注意:首先微信小程序是不能一进入小程序就让用户授权登录的,一进入小程序就让用户授权登录,是审核不通过的;
要想弹出微信的微信授权提示框,必须用一个按钮来触发,可用授权登录这个按钮来让微信授权这个弹窗显示,
首先,我们先来看一张微信小程序的授权登录流程图
是不是一看这张逻辑图,一下子就觉得逻辑清晰了许多呢
如果还是不理解的话也没关系,下面我们通过代码来实现一下微信小程序的授权登录
第一步,在用户进入小程序的时候,我们需要先判断一下用户是否授权过此小程序
注:可以通过wx.getSetting({})方法
// wx.getSetting方法获取用户的当前设置(判断是否授权)
wx.getSetting({
success: res => {//调用成功后的回调参数
console.log(res);
// 判断是否授权
if (res.authSetting['scope.userInfo']) {
//如果res.authSetting['scope.userInfo']有值时,代表已授权
wx.getUserInfo({
success: res => {
console.log(res);
if (res.userInfo) {
console.log(1);
this.setData({
userInfo: res.userInfo,
flag: true
})
}
}
})
}
}
})
第二步、如果没有授权的话,我们就还可以通过一个按钮来实现授权登录
//在微信小程序开发文档中,我们可以知道当button组件的open-type="getUserInfo" 并结合bindgetuserinfo事件,可以获取到用户信息(是否授权)
<button open-type="getUserInfo" bindgetuserinfo="getuserinfo">授权</button>
第三步、通过bindgetuserinfo事件,我们可以获取到用户的个人信息、加密后的偏移数据、加密后的用户信息(通过e.detail来获取)
getuserinfo(e){
console.log(e.detail);//可以获取到个人的信息、加密偏移数据、加密用户信息
}
第四步用户可以选择授权登录,当然也可以取消授权登录了呀
//我们可以判断一下 如果用户授权了的话
if (e.detail.userInfo) {
// 获取code 给后台传的
//我们就通过wx.login({})来写登录事件
wx.login({
success: async res => {//成功的回调
// console.log(res);
//获取到临时的凭证code码
//我们这里把code赋值给一个变量
let code = res.code
// 调用登录接口 把code码传上
let {
data
} = await request("zhangmengyi/user/wxapp/login", {
code
}, "POST")
console.log(data);
//获取到登录接口 是不是新用户
// 判断是否已经有用户信息 是否注册
// 登录接口code码返回10000时,代表未注册,返回0时,代表注册过
if (data.code == 10000) {
// 如果没有注册过的话 我们就
wx.login({
success: async res => {
// 通过 wx.getUserInfo再次获取用户信息 获取加密字段
wx.getUserInfo({
success: async user => {
console.log(user);
// 请求注册接口
let {
data: zhuce
} = await request("zhangmengyi/user/wxapp/register/complex", {
encryptedData: user.encryptedData,
iv: user.iv,
code: res.code
}, "POST")
// console.log(zhuce);
// 注册成功再请求登录
let {
data
} = await request("zhangmengyi/user/wxapp/login", {
cose: res.code
}, "POST")
console.log(data);
// 登录成功,把token存入本地
wx.setStorageSync('token', data.data.token)
然后更新一下试图 用户的id跟昵称
this.setData({
uid: data.data.uid,
userInfo: e.detail.userInfo,
})
// 保存uid到本地
wx.setStorage('uid', data.data.uid)
}
})
}
})
} else {
如果注册过了,是老用户的话 我们就直接更新视图 获取到用户的1个人信息
this.setData({
uid: data.data.uid,
userInfo: e.detail.userInfo,
})
然后把token和uid保存到本地 为什么只保存uid不保存昵称呢
是因为uid的话一重新编译就会不显示,所欲我们需要保存一下
wx.setStorageSync('token', data.data.token)
wx.setStorageSync('uid', data.data.uid)
}
}
})
}
到这里,微信登录的逻辑就完成了~~~~
注:wx.login()方法,在成功回调可以获取临时登录凭证(code),需要先获取,在调用。多次调用,在每次调用前都要获取。临时登录凭证 code 只能使用一次
会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥。
如果有不懂的或者觉的这样写不太好的大佬们,前辈们,欢迎留言请教或者指点哦