微信登录的流程一般查看微信小程序开发文档就能解决,我们来梳理一下:首先我们需要通过调取wx.login接口获取临时交换openId的凭证码code,然后拿这个临时凭证码code去访问指定的某个小程序APPID的openId和登录态记录session_key,同一个小程序每一个用户的openId都是固定且唯一的,我们可以将这个openid存入开发者服务器实现登录验证的业务。
主要的问题出现在:AppID与sercet对应错误,主要的错误码为41008与40029,分别是code没获取到以及AppID验证失败。
我们看一下代码:
Page({
/**
* 页面的初始数据
*/
data: {
// code存放变量
js_code:"",
// 用户非隐蔽信息
rawData:"",
// 用户加密签名
signature:"",
// 封装用户信息
userInfo:"",
// 获取的登录唯一凭证
openid:"",
// 临时登录的会话密钥,可以作为登录状态的记录信号
session_key:""
},
login(){
var th = this;
// 授权获取当前用户信息
wx.getUserProfile({
desc: '用于登录校验',
success(res){
console.log(res);
// 接收这个响应信息里的用户信息
var userInfo = res.userInfo;
th.setData({
userInfo: userInfo,
rawData: res.rawData,
signature: res.signature
})
}
})
// 调用login接口获取临时交换凭证code
wx.login({
success: function(res){
console.log(res.code);
// 将获取的临时凭证存放起来
th.setData({
js_code: res.code
});
}
});
// 设置延时是先进行授权结束后再回调这个微信登录的openId换取函数
setTimeout(function(){
let code = th.data.js_code;
wx.request({
// 注意反引号
url: `https://api.weixin.qq.com/sns/jscode2session?appid=你的AppID值&secret=你的小程序密钥&js_code=${code}&grant_type=authorization_code`,
success(res){
console.log(res);
// 将获取的两个关键信息存储
th.setData({
openid: res.data.openid,
session_key: res.data.session_key
})
console.log(th.data.openid);
console.log(th.data.session_key);
}
})
},2000);
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
..........省略下面.......
}
页面代码就一个按钮:
<button type="primary" open-type="getUserInfo" bindtap="login">
授权微信登录
</button>
<image src="{{userInfo.avatarUrl}}" style="height: 40px;width: 40px;"></image>
<text>{{userInfo.nickName}}</text>
每一个小程序在测试环境时都会有一个project.config.json文件,里面具备配置的小程序id,我们需要将你设置的AppID在这里也更改一下。