参考资料
1、小程序登录 | 微信开放文档
2、GitHub - zhuhuix/opensource_startup: SpringBoot实现微信小程序登录的后台源码
学习记录，以上是小程序授权登录流程图。
1、首先使用方法获取code
-
//微信文档实例
-
wx.login({
-
success (res) {
-
if (res.code) {
-
//发起网络请求
-
wx.request({
-
url: '/onLogin',
-
data: {
-
code: res.code
-
}
-
})
-
} else {
-
console.log('登录失败！' + res.errMsg)
-
}
-
}
-
})
2、 然后使用获取用户信息（非必须）
-
// 必须是在用户已经授权的情况下调用
-
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: '', //仅为示例，并非真实的接口地址
-
data: {
-
x: '',
-
y: ''
-
},
-
header: {
-
'content-type': 'application/json' // 默认值
-
},
-
success (res) {
-
console.log(res.data)
-
}
-
})
4、后台接口调用微信接口auth.code2Session，登录凭证校验。通过 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程。
GET https:///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) {
-
/*
-
* @desc: 获取用户信息 期望数据如下
-
*
-
* @param: userInfo [Object]
-
* @param: rawData [String]
-
* @param: signature [String]
-
* @param: encryptedData [String]
-
* @param: iv [String]
-
**/
-
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(
-
"",
-
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("调用获取code失败");
-
}
-
},
-
-
fail: function (error) {
-
// 调用 接口失败
-
that.showInfo("接口调用失败");
-
console.log(error);
-
},
-
});
-
},
服务端调用微信服务器进行登录凭证校验。
将获取到的code，从配置里拿到appid,secret拼接到链接上。
-
@Override
-
public JSONObject authCode2Session(String appId, String secret, String jsCode) {
-
-
String url = "/sns/jscode2session?apphljs-string">"&secret=" + secret + "&js_code=" + jsCode + "&grant_type=authorization_code";
-
String str = (url, "GET", null);
-
("api/wx-mini/getSessionKey:" + str);
-
if ((str)) {
-
return null;
-
} else {
-
return (str);
-
}
-
-
}
以上就是微信小程序的授权流程。
具体代码大家可以到GitHub上去下载，链接在文章开头，只需要把数据库和redis连接换成自己的就可以成功运行