小程序的登陆和授权
发布时间：2020-05-20 10:00 所属栏目：小程序开发教程
1.小程序登录
登入官方说明
小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。
登录流程时序
说明:
- 调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。
- 调用 code2Session 接口，换取 用户唯一标识 OpenID 和 会话密钥 session_key 。
之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。
注意：
- 会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全，开发者服务器 不应该把会话密钥下发到小程序，也不应该对外提供这个密钥 。
- 临时登录凭证 code 只能使用一次
兄弟们，是不是很简单，一看就会？我知道你们的回答如下图，但是不要慌，我们详细讲每一步
小程序端执行wx.login后在回调函数中就能拿到上图的code,然后把这个code传给我们后端程序，后端拿到这个这个code后，可以请求code2Session接口拿到用的openid和session_key,openid是用户在微信中唯一标识，我们就可以把这个两个值(val)存起来，然后返回一个键（key）给小程序端，下次小程序请求我们后端的时候，带上这个key，我们就能找到这个val,就可以，这样就把登入做好了。
1.1wx.login(Object object)
调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等。用户数据的加解密通讯需要依赖会话密钥完成。更多使用方法详见 小程序登录 。
参数
Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| timeout | number | 否 | 超时时间，单位ms | 1.9.90 | |
| success | function | 否 | 接口调用成功的回调函数 | ||
| fail | function | 否 | 接口调用失败的回调函数 | ||
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
object.success 回调函数
参数
Object res
| 属性 | 类型 | 说明 |
|---|---|---|
| code | string | 用户登录凭证（有效期五分钟）。开发者需要在开发者服务器后台调用 code2Session ，使用 code 换取 openid 和 session_key 等信息 |
示例代码
wx.login({
success(res) {
if (res.code) {
// 发起网络请求
wx.request({
url: 'https://test.com/onLogin',
data: {
code: res.code
},
success: function (res) {
wx.setStorageSync('login_key', res.data.data.login_key);
}
})
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
1.2code2Session
本接口应在服务器端调用，详细说明参见 服务端API 。
登录凭证校验。通过 wx.login() 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程。更多使用方法详见 小程序登录 。
请求地址
GET https://api.weixin.qq.com/sns/jscode2sessionappid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
请求参数
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| appid | string | 是 | 小程序 appId | |
| secret | string | 是 | 小程序 appSecret | |
| js_code | string | 是 | 登录时获取的 code | |
| grant_type | string | 是 | 授权类型，此处只需填写 authorization_code |
返回值
Object
返回的 JSON 数据包
| 属性 | 类型 | 说明 |
|---|---|---|
| openid | string | 用户唯一标识 |
| session_key | string | 会话密钥 |
| unionid | string | 用户在开放平台的唯一标识符，在满足 UnionID 下发条件的情况下会返回，详见 UnionID 机制说明 。 |
| errcode | number | 错误码 |
| errmsg | string | 错误信息 |
errcode 的合法值
| 值 | 说明 |
|---|---|
| -1 | 系统繁忙，此时请开发者稍候再试 |
| 0 | 请求成功 |
| 40029 | code 无效 |
| 45011 | 频率限制，每个用户每分钟100次 |
说完上面的登入后，我们是不是还没有用到上面的session_key？这个就是在用户授权的时候用的，用来解密用户的数据，还要解密？是的你没有听错，不要慌，下面给你解释
2.微信授权获取用户信
后端获取微信用户信息流程
微信官方：忘了告诉你，session_key还会过期的，是的，没错就是这样坑爹。
我的回复：我就是头铁，我不管session_key过期，会带来什么样的后果呢？
微信官方：对不起，你头铁没有，你后端程序无法用户授权的数据，就问你气不气？
我的回复：好的，你牛逼，我可以接收你session_key过期，但是你要告诉我怎么判断他是过期的吧？怎么获取新的session_key吧？
微信官方：还是要按照我的要求来吧？看你这么可怜，告诉你吧，用wx.checkSession判断是否过期，如果过期就重写登入吧！获取新的code,后端在去请求code2Session获取新的session_key
我的回复：好的，谢谢你sb
判断session_key有没有过期
2.1wx.checkSession(Object object)
检查登录态是否过期。
通过 wx.login 接口获得的用户登录态拥有一定的时效性。用户越久未使用小程序，用户登录态越有可能失效。反之如果用户一直在使用小程序，则用户登录态一直保持有效。具体时效逻辑由微信维护，对开发者透明。开发者只需要调用 wx.checkSession 接口检测当前用户登录态是否有效。
登录态过期后开发者可以再调用 wx.login 获取新的用户登录态。调用成功说明当前 session_key 未过期，调用失败说明 session_key 已过期。更多使用方法详见 小程序登录 。
参数
Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
示例代码
wx.checkSession({
success() {
// session_key 未过期，并且在本生命周期一直有效
},
fail() {
// session_key 已经失效，需要重新执行登录流程
wx.login() // 重新登录
}
})
微信官方：你要获取用的信息？我告诉你哈，如果要获取的话，要经过用户同意的。
我的回复：sb,我怎么知道他是否授权过呢？如果没有授权，我怎么让他授权？
**微信官方：你好，你可以调用wx.getSetting来判断，用户是否授权，如果没有授权，你要让他点击按钮，调起授权页面。用户点击同意授权以后*，你就可以调用wx.getUserInfo接口获取数据了**
我的回复：妈的，怎么这么麻烦？
微信官方：对不起，大佬，没有办法啊，我们要保护用户的信息安全啊
我的回复：哦
2.2wx.getSetting(Object object)
基础库 1.2.0 开始支持，低版本需做 兼容处理 。
获取用户的当前设置。 返回值中只会出现小程序已经向用户请求过的权限 。
参数
Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
object.success 回调函数
参数
Object res
| 属性 | 类型 | 说明 |
|---|---|---|
| authSetting | AuthSetting | 用户授权结果 |
示例代码
wx.getSetting({
success(res) {
console.log(res.authSetting)
//部分结果，如果为true,则表示该用户对这项权限以及授权，如果没有授权，我们这需要通过button按钮让用户授权
// res.authSetting = {
// "scope.userInfo": true,
// "scope.userLocation": true
// }
}
})
注意事项
- wx.authorize({scope: "scope.userInfo"}) ，不会弹出授权窗口，请使用 <button_open-type="getUserInfo">
- 需要授权 scope.userLocation 时必须 配置地理位置用途说明 。
微信官方：当你小程序端调用我们wx.getUserInfo的时候，我们会返回你用的基本信息。
我的回复：什么是基本信息，哪些是敏感信息？我后端怎么获取呢？
微信官方：比如openid这些，大佬，你又两种方法，第一：你可以将这些基本信息传到后端，第二： 你可以讲getUserInfo中的 iv,encryptedData传给后端解密，机密后就能获取到用户的敏感信息了
我的回复：好的，我后端怎么解密呢？用什么解密呢？
微信官方：你登入的时候不是，后端不是存了session_key吗？加上这些数据，就可以解密了
我的回复：哦
2.3wx.getUserInfo(Object object)
获取用户信息
调用前需要 用户授权 scope.userInfo。
获取用户信息。
参数
Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| withCredentials | boolean | 否 | 是否带上登录态信息。当 withCredentials 为 true 时，要求此前有调用过 wx.login 且登录态尚未过期，此时返回的数据会包含 encryptedData, iv 等敏感信息；当 withCredentials 为 false 时，不要求有登录态，返回的数据不包含 encryptedData, iv 等敏感信息。 | |
| lang | string | en | 否 | 显示用户信息的语言 |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
object.lang 的合法值
| 值 | 说明 |
|---|---|
| en | 英文 |
| zh_CN | 简体中文 |
| zh_TW | 繁体中文 |
object.success 回调函数
参数
Object res
| 属性 | 类型 | 说明 |
|---|---|---|
| userInfo | UserInfo | 用户信息对象，不包含 openid 等敏感信息 |
| rawData | string | 不包括敏感信息的原始数据字符串，用于计算签名 |
| signature | string | 使用 sha1( rawData + sessionkey ) 得到字符串，用于校验用户信息，详见 用户数据的签名验证和加解密 |
| encryptedData | string | 包括敏感数据在内的完整用户信息的加密数据，详见 用户数据的签名验证和加解密 |
| iv | string | 加密算法的初始向量，详见 用户数据的签名验证和加解密 |
接口调整说明
在用户未授权过的情况下调用此接口，将不再出现授权弹窗，会直接进入 fail 回调（详见 《公告》 )。在用户已授权的情况下调用此接口，可成功获取用户信息。
示例代码
// 必须是在用户已经授权的情况下调用
wx.getUserInfo({
success(res) {
const userInfo = res.userInfo
const nickName = userInfo.nickName
const avatarUrl = userInfo.avatarUrl
const gender = userInfo.gender // 性别 0：未知、1：男、2：女
const province = userInfo.province
const city = userInfo.city
const country = userInfo.country
}
})
encryptedData 解密后为以下 json 结构，详见 加密数据解密算法
{
"openId": "OPENID",
"nickName": "NICKNAME",
"gender": GENDER,
"city": "CITY",
"province": "PROVINCE",
"country": "COUNTRY",
"avatarUrl": "AVATARURL",
"unionId": "UNIONID",
"watermark": {
"appid": "APPID",
"timestamp": TIMESTAMP
}
}
示例代码
<!-- 如果只是展示用户头像昵称，可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<!-- 需要使用 button 来授权登录 -->
<button
wx:if="{{canIUse}}"
open-type="getUserInfo"
bindgetuserinfo="bindGetUserInfo"
>
授权登录
</button>
<view wx:else>请升级微信版本</view>
Page({
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad() {
// 查看是否授权
wx.getSetting({
success(res) {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success(res) {
console.log(res.userInfo)
wx.request({
url: url,
data: {
'iv': res.iv,
'encryptedData': res.encryptedData,
'login_key':登入标识
},
method: "POST",
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
//解密后数据
console.log(res)；
}
});
}
})
}
}
})
},
bindGetUserInfo(e) {
console.log(e.detail.userInfo)
}
})
叫你解密大法
2.4开放数据校验与解密
小程序可以通过各种前端接口获取微信提供的开放数据。考虑到开发者服务器也需要获取这些开放数据，微信会对这些数据做签名和加密处理。开发者后台拿到开放数据后可以对数据进行校验签名和解密，来保证数据不被篡改。
签名校验以及数据加解密涉及用户的会话密钥 session_key。 开发者应该事先通过 wx.login 登录流程获取会话密钥 session_key 并保存在服务器。为了数据不被篡改，开发者不应该把 session_key 传到小程序客户端等服务器外的环境。
数据签名校验
为了确保开放接口返回用户数据的安全性，微信会对明文数据进行签名。开发者可以根据业务需要对数据包进行签名校验，确保数据的完整性。
- 通过调用接口（如 wx.getUserInfo ）获取数据时，接口会同时返回 rawData、signature，其中 signature = sha1( rawData + session_key )
- 开发者将 signature、rawData 发送到开发者服务器进行校验。服务器利用用户对应的 session_key 使用相同的算法计算出签名 signature2 ，比对 signature 与 signature2 即可校验数据的完整性。
如 wx.getUserInfo的数据校验：
接口返回的rawData：
{
"nickName": "Band",
"gender": 1,
"language": "zh_CN",
"city": "Guangzhou",
"province": "Guangdong",
"country": "CN",
"avatarUrl": "http://wx.qlogo.cn/mmopen/vi_32/1vZvI39NWFQ9XM4LtQpFrQJ1xlgZxx3w7bQxKARol6503Iuswjjn6nIGBiaycAjAtpujxyzYsrztuuICqIM5ibXQ/0"
}
用户的 session-key：
HyVFkGl5F5OQWJZZaNzBBg==
用于签名的字符串为：
{"nickName":"Band","gender":1,"language":"zh_CN","city":"Guangzhou","province":"Guangdong","country":"CN","avatarUrl":"http://wx.qlogo.cn/mmopen/vi_32/1vZvI39NWFQ9XM4LtQpFrQJ1xlgZxx3w7bQxKARol6503Iuswjjn6nIGBiaycAjAtpujxyzYsrztuuICqIM5ibXQ/0"}HyVFkGl5F5OQWJZZaNzBBg==
使用sha1得到的结果为
75e81ceda165f4ffa64f4068af58c64b8f54b88c
加密数据解密算法
接口如果涉及敏感数据（如 wx.getUserInfo 当中的 openId 和 unionId），接口的明文内容将不包含这些敏感数据。开发者如需要获取敏感数据，需要对接口返回的 加密数据(encryptedData) 进行对称解密。 解密算法如下：
- 对称解密使用的算法为 AES-128-CBC，数据采用PKCS#7填充。
- 对称解密的目标密文为 Base64_Decode(encryptedData)。
- 对称解密秘钥 aeskey = Base64_Decode(session_key), aeskey 是16字节。
- 对称解密算法初始向量 为Base64_Decode(iv)，其中iv由数据接口返回。
微信官方提供了多种编程语言的示例代码（ 点击下载 ）。每种语言类型的接口名字均一致。调用方式可以参照示例。
另外，为了应用能校验数据的有效性，会在敏感数据加上数据水印( watermark )
watermark参数说明：
| 参数 | 类型 | 说明 |
|---|---|---|
| appid | String | 敏感数据归属 appId，开发者可校验此参数与自身 appId 是否一致 |
| timestamp | Int | 敏感数据获取的时间戳, 开发者可以用于数据时效性校验 |
如接口 wx.getUserInfo 敏感数据当中的 watermark：
{
"openId": "OPENID",
"nickName": "NICKNAME",
"gender": GENDER,
"city": "CITY",
"province": "PROVINCE",
"country": "COUNTRY",
"avatarUrl": "AVATARURL",
"unionId": "UNIONID",
"watermark": {
"appid": "APPID",
"timestamp": TIMESTAMP
}
}
注：
- 解密后得到的json数据根据需求可能会增加新的字段，旧字段不会改变和删减，开发者需要预留足够的空间
会话密钥 session_key 有效性
开发者如果遇到因为 session_key 不正确而校验签名失败或解密失败，请关注下面几个与 session_key 有关的注意事项。
- wx.login 调用时，用户的 session_key 可能 会被更新而致使旧 session_key 失效（刷新机制存在最短周期，如果同一个用户短时间内多次调用 wx.login ，并非每次调用都导致 session_key 刷新）。开发者应该在明确需要重新登录时才调用 wx.login ，及时通过 code2Session接口更新服务器存储的 session_key。
- 微信不会把 session_key 的有效期告知开发者。我们会根据用户使用小程序的行为对 session_key 进行续期。用户越频繁使用小程序，session_key 有效期越长。
- 开发者在 session_key 失效时，可以通过重新执行登录流程获取有效的 session_key。使用接口 wx.checkSession 可以校验 session_key 是否有效，从而避免小程序反复执行登录流程。
- 当开发者在实现自定义登录态时，可以考虑以 session_key 有效期作为自身登录态有效期，也可以实现自定义的时效性策略。
