微信小程序有三种授权登录方式
三种方式虽然不同但是百变不离其中 基本原理还是一样的
- 一次性授权
常规写法,需要获取用户公开信息(头像,昵称等)时,判断调取授权登录接口,但是此方法如果不经处理的话 用户如果拒绝授权或者删除该微信小程序后 需要重新调取并获取用户公开信息(头像,昵称等;
- 永久授权
在不必要使用用户公开信息(头像,昵称等)时,不调取授权登录接口,只有在必要的时候再去判断调取授权登录接口并把获取到的用户公开信息存入数据库,这样在每次登录时直接先运行指定函数从数据库索取需要的用户公开信息(头像,昵称等)即可,此方法在删除小程序后不用再次去授权登录(因为在用户第一次授权登录时已经把用户的公开信息存入数据库了以后直接向数据库索取即可),建议使用;
- 不授权
不需要授权登录获取用户公开信息(头像,昵称等),使用wx.login获取用户code并传入后台,后台可以通过用户的code值向微信要一个值(具体需要问后台,我只是个小前端,后台的东西不是很懂,只是知道一些逻辑而且也已经成功实现)然后通过这个用code换取的值就可以识别到指定用户,如果需要的话,前端要显示的头像、昵称等这些信息可以使用自定义可编辑的功能,当然,也可以通过小程序提供的这个组件显示用户的头像及昵称(不过这个组件只有显示功能),用户如果想直接使用自己的头像昵称,也可以自行授权(比如添加个引导按钮什么之类的),建议使用;
下面详细说一下第一种授权方式的流程
首先通过 wx.getSetting()判断用户是否已经授权 如果未授权 然后 执行wx.login()获取code 然后像后端发起请求把code传递给后端 后端通过code请求微信api获得openid和session_key(会话密钥) 然后前端再通过wx.getUserInfo() 获取encryptedData,iv等敏感数据 传递给后端 后端通过解密 获取unionId等数据
注意:临时登录凭证 code 只能使用一次 程序中要避免多次调用wx.login 否则session_key会失效
// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
<button class="btn" open-type="getUserInfo" @getuserinfo="bindGetUserInfo" withCredentials="true">微信授权</button>
bindGetUserInfo(e){
console.log('eeee',e.detail.userInfo)
var that = this
if (!e.detail.iv) {
uni.showToast({
title: "您取消了授权,登录失败",
icon: "none"
});
return false;
}
uni.getUserInfo({
provider: 'weixin',
success: function(infoRes) {
console.log('infoRes',infoRes)
that.nikename = infoRes.userInfo.nickName
that.avatarUrl = infoRes.userInfo.avatarUrl
that.encryptedData = infoRes.encryptedData
that.iv = infoRes.iv
uni.login({
success:function(res){
that.code = res.code
that.requestAuthorization() //发起请求把code 和敏感数据传递给后端
}
})
}
});
},
- 官方文档授权流程