参考资料
1、小程序登录 | 微信开放文档
2、GitHub - zhuhuix/opensource_startup: SpringBoot实现微信小程序登录的后台源码
学习记录，以上是小程序授权登录流程图。
1、首先使用wx.login方法获取code
//微信文档实例
wx.login({
success (res) {
if (res.code) {
//发起网络请求
wx.request({
url: 'https://example.com/onLogin',
data: {
code: res.code
}
})
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
2、 然后使用wx.getUserInfo获取用户信息（非必须）
// 必须是在用户已经授权的情况下调用
wx.getUserInfo({
success: function(res) {
var userInfo = res.userInfo
var nickName = userInfo.nickName
var avatarUrl = userInfo.avatarUrl
var gender = userInfo.gender //性别 0：未知、1：男、2：女
var province = userInfo.province
var city = userInfo.city
var country = userInfo.country
}
})
3、其次使用 wx.request方法，请求服务端的登录接口
wx.request({
url: 'example.php', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
4、后台接口调用微信接口auth.code2Session，登录凭证校验。通过 wx.login 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程。
GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
下面是实际实现代码，获取code，并获取用户信息，然后请求后台接口授权登录，保存用户信息。
// 公共登录动作
doLogin: function (callback) {
let that = this;
wx.login({
success: function (loginRes) {
console.log(loginRes, "loginRes");
if (loginRes.code) {
wx.getUserInfo({
withCredentials: true, // 非必填, 默认为true
success: function (infoRes) {
console.log("infoRes:", infoRes);
// 请求服务端的登录接口
wx.request({
url: api.loginUrl,
method: "POST",
data: {
authType: 1, //1代表微信端登录
code: loginRes.code, // 临时登录凭证
rawdata: infoRes.rawData, // 用户非敏感信息
signature: infoRes.signature, // 签名
encrypteddata: infoRes.encryptedData, // 用户敏感信息
iv: infoRes.iv, // 解密算法的向量
token: wx.getStorageSync("loginFlag"),
},
success: function (res) {
console.log("login success:", res);
res = res.data;
if (res.success) {
that.globalData.userInfo = res.module.userInfo;
console.log(
"globalData.userInfo",
that.globalData.userInfo
);
wx.setStorageSync("userInfo", res.module.userInfo);
wx.setStorageSync("loginFlag", res.module.token);
if (callback) {
callback();
}
} else {
that.showInfo(res.errMsg);
}
},
fail: function (error) {
// 调用服务端登录接口失败
that.showInfo("调用接口失败");
console.log(error);
},
});
},
fail: function (error) {
console.log(error);
// 获取 userInfo 失败，去检查是否未开启权限
wx.hideLoading();
that.showInfo("调用request接口失败");
console.log(error);
wwx.navigateTo({
url: "/pages/index/index",
});
},
});
} else {
// 获取 code 失败
that.showInfo("登录失败");
console.log("调用wx.login获取code失败");
}
},
fail: function (error) {
// 调用 wx.login 接口失败
that.showInfo("接口调用失败");
console.log(error);
},
});
},
服务端调用微信服务器进行登录凭证校验。
将获取到的code，从配置里拿到appid,secret拼接到链接上。
@Override
public JSonObject authCode2Session(String appId, String secret, String jsCode) {
String url = "https://api.weixin.qq.com/sns/jscode2session?appid=" + appId + "&secret=" + secret + "&js_code=" + jsCode + "&grant_type=authorization_code";
String str = WeChatUtil.httpRequest(url, "GET", null);
log.info("api/wx-mini/getSessionKey:" + str);
if (StringUtils.isEmpty(str)) {
return null;
} else {
return JSONObject.parseObject(str);
}
}
以上就是微信小程序的授权流程。
具体代码大家可以到GitHub上去下载，链接在文章开头，只需要把数据库和redis连接换成自己的就可以成功运行
