### 收集整理写一套微信小程序的登录流程

[小程序登录官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html)


![wxlogin.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7df72d0548024c1d8df8620111357c1d~tplv-k3u1fbpfcp-watermark.image)


**1.code：调用[wx.login](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html)获取到的， 是临时登录凭证，其有效时间仅为5分钟，如果5分钟内小程序的后台不拿着这个临时身份证来微信后台服务器换取微信用户id的话，那么这个身份证就会被作废，需要再调用wx.login重新生成登录凭证。[参考](https://developers.weixin.qq.com/ebook?action=get_post_info&volumn=1&lang=zh_CN&book=miniprogram&docid=000cc48f96c5989b0086ddc7e56c0a#_ftn6)** 

**2.openId： 是一个用户对于一个小程序／公众号的标识，开发者可以通过这个标识识别出用户[参考](https://developers.weixin.qq.com/community/develop/doc/000c2424654c40bd9c960e71e5b009?highLine=%25E8%258E%25B7%25E5%258F%2596%25E7%2594%25A8%25E6%2588%25B7%25E4%25BF%25A1%25E6%2581%25AF)。**

Q2: 既然用户的openId 是永远不变的，那么开发者可以使用openId 作为用户的登录态么？

A: 不行，这是非常危险的行为。因为 openId 是不变的，如果有坏人拿着别人的 openId 来进行请求，那么就会出现冒充的情况。所以我们建议开发者可以自己在后台生成一个拥有有效期的 第三方session 来做登录态，用户每隔一段时间都需要进行更新以保障数据的安全性。

**3.session_key**：会话密钥 是对用户数据进行加密签名的密钥。**为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥**。


### 微信手机号码一键登录

[获取手机号码的方法](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html)：
需要将 button 组件 open-type 的值设置为 getPhoneNumber，当用户点击并同意之后，可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据， 然后在第三方服务端结合 session_key 以及 app_id 进行解密获取手机号。[开放数据校验与解密](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html)

看到这里就需要一个登录界面来实现获取微信手机号码的一键登录了，这里我们借鉴[肯德基小程序的登录界面](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20124c7d4d22455bae86b53bbb40e1d8~tplv-k3u1fbpfcp-watermark.image)

**下面是整理后的时序图**：
![QQ截图20210525135618.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0b7315921bc0499a9ef12a81652445cc~tplv-k3u1fbpfcp-watermark.image)
```mermaid
sequenceDiagram
MiniProgram->>MiniProgram: wx.login 获取 code
MiniProgram->>Developer Service: 发送code
Developer Service->>WX API: 调用微信api接口auth.code2Session 
WX API-->>Developer Service: 返回session_key和openid等
Developer Service->>Developer Service: 根据openId得到了手机号码
Developer Service-->>MiniProgram:返回token和用户信息
Developer Service->>Developer Service: 根据openId没有得到用户信息
Developer Service-->>MiniProgram: 返回加密后的openid
MiniProgram->>MiniProgram:getPhoneNumber得到encryptedData
MiniProgram->>Developer Service:发送encryptedData和加密后的openid
Developer Service->>Developer Service:根据openid和session_key解密encryptedData得到电话号码
Developer Service->>Developer Service:绑定openid和用户信息
Developer Service-->>MiniProgram:返回token和用户信息
```



**小程序登录的流程图**
![QQ截图20210525135805.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/57323dadb0334104b5123a8e15c456ec~tplv-k3u1fbpfcp-watermark.image)
```mermaid
graph TD
    A[进入小程序] --> B(读取storage获取token)
    B --> C{token是否存在}
    C -->|yes| D{判断token是否失效}
    C -->|no| E[wx.login获取code]
    D -->|no| E
    D --> |yes| F[携带token 发起业务请求]
    E --> |发送code到服务器| G{服务器判断是否有用户信息}
    G --> |yes| H[登录成功小程序保存token和用户信息]
    G --> |no| I[跳转到登录界面]
```