微信小程序官方参考地址:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
登录流程时序
说明:
- 调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。
- 调用 auth.code2Session 接口,换取 用户唯一标识 OpenID 和 会话密钥 session_key。
之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份。
注意:
- 会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥。
- 临时登录凭证 code 只能使用一次
步骤总览:
第一步,在小程序段调用wx.login获取到code;
第二步,将获取到的code发送给后台;
第三步,后台用这个code,以及小程序AppID、AppSecret去微信获取openID和session_key,在满足 UnionID 下发条件的情况下会返回UnionID;
具体实现步骤:
第一步,在小程序段调用wx.login获取到code:
wx.login(Object object)
调用接口获取登录凭证(code)。通过凭证进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)等。用户数据的加解密通讯需要依赖会话密钥完成。
示例代码
wx.login({
success (res) {
if (res.code) {
//发起网络请求
wx.request({
url: 'https://test.com/onLogin',
data: {
code: res.code
}
})
} else {
console.log('登录失败!' + res.errMsg)
}
}
})
第二步,将获取到的code发送给后台:
将获取到的code发送到后台。
第三步,后台用这个code,以及小程序AppID、AppSecret去微信获取openID和session_key,在满足 UnionID 下发条件的情况下会返回UnionID;
请求地址:
GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
这里可以用postman等工具请求尝试,我这边是可以获取到openid的。
获取手机号
微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
先简述一下,获取手机号需要用户授权,在用户授权之后,小程序端可以拿到iv、encryptedData这两个数据。
iv是加密算法的初始向量,你可以理解为解密时候需要这个,encryptedData是我们所需要的数据的加密内容,即我们要解密encryptedData,才可以获取到手机号码。
我们将这两个数据作为参数发送给后台,后台拿auth.code2Session获取的session_key以及小程序端传过来的iv和encryptedData去解密即可得到手机号码。
因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 button 组件的点击来触发。
注意:目前该接口针对非个人开发者,且完成了认证的小程序开放(不包含海外主体)。需谨慎使用,若用户举报较多或被发现在不必要场景下使用,微信有权永久回收该小程序的该接口权限。
使用方法
需要将 button 组件 open-type 的值设置为 getPhoneNumber,当用户点击并同意之后,可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据, 然后在第三方服务端结合 session_key 以及 app_id 进行解密获取手机号。
注意
在回调中调用 wx.login 登录,可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey,导致解密失败。建议开发者提前进行 login;或者在回调中先使用 checkSession 进行登录态检查,避免 login 刷新登录态。
这里我可能说的不太详细,但是可以看下官网文档,再看我这个例子理解一下。代码我上传一份,主要是demo。对了, 里面还有一个表格例子,哈哈。下载