小程序（3）：授权登录
小程序自身携带庞大流量，又提供了各种强大的API，今天只说授权登录。以前可以直接默认调起授权，最近在做的时候发现改版了，需要用户手动触发授权按钮。
1、login.wxml
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" class="weui-btn" type="primary" style='margin-top:15%'>授权登录</button>
<view wx:else>请升级微信版本</view>判断是否授权，如果没有，则显示授权按钮。注意上面的open-type="getUserInfo"，这个会自动调起授权框。看一下js
// pages/login/login.js
var util = require('../../utils/util.js');
Page({
/**
* 页面的初始数据
*/
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
bindGetUserInfo: function (e) {
if (e.detail.userInfo) {
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
wx.request({
url: '｛你的https域名｝/api/login/applet',
data: { code: res.code },
method: 'POST',
header: { 'content-type': 'application/x-www-form-urlencoded' },
success: function (res1) {
wx.setStorageSync("sessionId", res1.data.data);
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
wx.request({
url: '｛你的https域名｝/api/login/user-info',
data: {
encryptedData: res.encryptedData,
iv: res.iv,
sessionId: wx.getStorageSync("sessionId")
},
method: 'POST',
header: { 'content-type': 'application/x-www-form-urlencoded' },
success: function (res1) {
wx.setStorageSync("storeMemberId", res1.data.data.id);
var member = res1.data.data;
//这里获取到了用户信息，可以执行自己的操作
wx.switchTab({
url: '/pages/index/index',
})
}
})
}
})
}
})
}
})
//用户按了允许授权按钮
} else {
//用户按了拒绝按钮
wx.redirectTo({
url: '/pages/login/login',
})
}
}
})2、后台获取用户信息
基本流程：拿到上面js获取的code换取openid和sessionkey，如果你只需要openid，下面这一步就够了。 下面可以看到，我把获取到的sessionkey放redis了，因为我需要用它获取用户详情。
@ResponseBody
@RequestMapping("applet")
public ResultModel<String> login4applet(String code) {
try {
String url = "https://api.weixin.qq.com/sns/jscode2session?appid=" + AppletInfo.appid + "&secret=" + AppletInfo.secret +
"&js_code=" + code + "&grant_type=authorization_code";
String res = HttpClientUtil.post(url);
Map<String,String> data = FastJsonUtils.toBean(res,Map.class);
String openid = data.get("openid");
String session_key = data.get("session_key");
String sessionId = IDGen.genId();
stringRedisTemplate.opsForValue().set(sessionId, session_key + "," + openid,7200,TimeUnit.SECONDS);
return new ResultModel<>(ResultStatus.SUCCESS, sessionId);
} catch (NormalException e) {
return ResultModel.defaultError("授权失败");
}
}3、换取用户信息
第一步中第一个ajax请求后，又发送一次请求，三个参数 encryptedData: 加密数据 iv:偏移 sessionId: 上面第二步的sessionId，其实就是一个标识 通过sessionId取到上面存在redis中的sessionKey，因为官方建议最好不要直接传输这个，因此我用了本地缓存。
@ResponseBody
@RequestMapping("user-info")
public ResultModel<Member> getUserInfo(String sessionId, String iv, String encryptedData) {
String sessionKeyAndOpenId = stringRedisTemplate.opsForValue().get(sessionId);
if (StringUtil.isBlank(sessionKeyAndOpenId)) {
throw new NormalException("登录信息失效");
}
String sessionKey = sessionKeyAndOpenId.split(",")[0];
// 被加密的数据
try {
byte[] dataByte = Base64.decode(encryptedData);
// 加密秘钥
byte[] keyByte = Base64.decode(sessionKey);
// 偏移量
byte[] ivByte = Base64.decode(iv);
String result = AESUtil.decrypt(dataByte, keyByte, ivByte);
Map<String, String> map = FastJsonUtils.toBean(result, HashMap.class);
if (map.get("openId") == null) {
throw new NormalException("获取用户信息失败");
}
//先判断是否存在unionId
String unionId =map.get("unionId");
ResultModel<Member> resultModel = memberService.getByUnionId(unionId);
Member member = resultModel.getData();
if (member == null){
String openId = map.get("openId");
member.setOpenId(openId);
String avatarUrl = map.get("avatarUrl");
member = new Member();
member.setId(IDGen.genId());
member.setUnionId(unionId);
memberService.save(member);
}
return new ResultModel<>(ResultStatus.SUCCESS, member);
} catch (NormalException e) {
return new ResultModel<>(ResultStatus.FAIL, null);
}
}此时我们已经获取了用户的openid，unionId（如果绑定了开放平台的话），头像，昵称，省市等信息，剩下的就自己随便玩儿了
4、爬坑
既然写代码，没坑怎么行？
Q：报错：invalid appid
A：可是建项目开始就绑定了appid啊，原来在通过code获取session_key的时候，不小心发成了get请求。
ps：鄙视一下腾讯的同行，你这时候是不是提示method not support更合适呢？害的我找了半天bug~~~
其实整体来说根据api一步一步来还是没什么问题的，就是他的文档有的写的确实有点坑，希望踩过的童鞋一起来吐槽~~~
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-07-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读