官方文档《小程序登录》的登录流程如下图:
在客户端需要用到的接口是wx.login
,通过该接口可获取code
,然后传给服务器进行一系列的操作获取用户的进行信息。
然而在该过程中,有时候是无法获取到UnionID
的。具体原因可阅读官方文档UnionID 机制说明。
在实际业务中,我们的业务端常常同时包括APP、小程序、公众号
,这三者会绑定到微信开放平台,三者间通过unionid
来确定各平台登录的用户是否为同一个用户。因而必须要获取到unionid
。
那么需要怎么解决呢?
官方提供的UnionID获取途径有以下6种:
根据前面内容,已经排除了第2、3
点;业务需要在一开始就获取unionid
,所以第4
点也排除;因为没有用到云函数,第5、6
点也排除掉。那就只剩下第1. 调用接口 wx.getUserInfo,从解密数据中获取 UnionID
点啦。
由于官方对wx.getUserInfo
接口进行了调整,所以我们不能主动调改接口啦,说明如下:
综上所述,最终得到的解决方案是:使用wx.login和<button open-type="getUserInfo" @getuserinfo="onGetUserInfo">点击登录小程序</button>
组合来进行处理,有两种不同的操作流程。
方案一:
- 进入页面立即调用
wx.login
获取到code
-
onGetUserInfo
获取到encryptedData、iv、rawData、signature、userInfo
等 - 把第1、2步获取到的参数(还可以携带业务相关的自定义参数,如邀请码等)全部传给服务器。
- 服务器在拿到前端
code
之后去请求微信的接口拿unionid
,如果返回的unionid
为空,再通过encryptedData、rawData、signature、iv
以及之前的session_key
解密出unionid
,得到解密信息后再完成登录、注册、绑定邀请关系
等业务逻辑,并给前端返回相应的业务数据。关于数据解密请阅读官方文档《开放数据校验与解密》。
方案二:
- 进入页面立即调用
wx.login
获取到code
并传给服务器 - 服务器接收到code之后将获取的用户数据返回给前端
- 前端根据返回的数据判断
unionid
是否存在,如果不存在,则展示需要用户授权的页面,页面内通过<button open-type="getUserInfo" @getuserinfo="onGetUserInfo">点击登录小程序</button>
按钮触发授权,获取到encryptedData、iv、rawData、signature、userInfo
等并传给服务器 - 服务器通过
encryptedData、rawData、signature、iv
以及之前的session_key
解密出unionid
,得到解密信息后再完成登录、注册、绑定邀请关系
等业务逻辑,并给前端返回相应的业务数据。关于数据解密请阅读官方文档《开放数据校验与解密》。
核心代码
<button open-type="getUserInfo" @getuserinfo="onGetUserInfo">点击登录小程序</button>
onLoad(options) {
// #ifdef MP-WEIXIN
// 初始化时立即调用,不能在wx.getUserInfo之后,否则会导致encryptedData出错:pad block corrupted
uni.login({
provider: 'weixin',
scopes: 'auth_base',
success: loginRes => {
console.log({ loginRes });
this.weixinCode = loginRes.code;
},
fail: res => {
console.log('login fail', res);
}
});
// #endif
},
methods: {
onGetUserInfo(e) {
// 有值表示授权成功,否则为用户拒绝授权
if (e.detail.userInfo) {
const { encryptedData, iv, rawData, signature, userInfo } = e.detail; // 通过getUserInfo按钮获取的用户信息
// TODO 这里编写具体业务代码 把weixinCode和上面的参数一起传给服务器
}
}
}
以上代码实在uni-app中的写法,可根据需要转换为相应的微信小程序原生代码。
PS:
wx.login必须在wx.getUserInfo之前调用
,否则可能会导致小程序encryptedData解密出错:pad block corrupted
。
- 原因:通过wx.login获取到code,然后用code以及appid和appSecret调用接口得到session_key,该session_key是解密encryptedData的密钥。如果调用顺序不同,则获取的session_key就不是当前获取到的encryptedData的密钥了。
至此,“关于微信小程序通过wx.login获取不到UnionID”的问题就解决啦!
希望对小伙伴们有帮助!如有错误之处或更好的解决方案请留言。