小程序微信登陆实现流程

Myth丶恋晨 2024-03-17 22:37 78阅读 0赞

#### 1. 微信登录流程 ####

微信登录官方介绍：[https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html][https_developers.weixin.qq.com_miniprogram_dev_framework_open-ability_login.html]

小程序登录：小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。

**登录流程时序**  
![在这里插入图片描述][3cb4b81eac7346b1bdfec2e12500dfb3.png]

**步骤分析：**

1.  小程序端，调用wx.login()获取`code`，就是授权码。
2.  小程序端，调用wx.request()发送请求并携带code，请求开发者服务器(自己编写的后端服务)。
3.  开发者服务端，通过HttpClient向微信接口服务发送请求，并携带`appId`\+`appsecret`\+`code`三个参数。
4.  开发者服务端，接收微信接口服务返回的数据，session\_key+opendId等。`opendId`是微信用户的唯一标识。
5.  开发者服务端，自定义登录态，生成令牌(token)和openid等数据返回给小程序端，方便后绪请求身份校验。
6.  小程序端，收到自定义登录态，存储storage。
7.  小程序端，后绪通过wx.request()发起业务请求时，携带token。
8.  开发者服务端，收到请求后，通过携带的token，解析当前登录用户的id。
9.  开发者服务端，身份校验通过后，继续相关的业务逻辑处理，最终返回业务数据。

> **说明：**
> 
> 1.  调用 [wx.login()][wx.login] 获取 **临时登录凭证`code`** ，并回传到开发者服务器。
> 2.  调用 [auth.code2Session][] 接口（https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html），换取 **用户唯一标识 `OpenID`** 、 用户在微信开放平台帐号下的**唯一标识UnionID**（若当前小程序已绑定到微信开放平台帐号） 和 **会话密钥 session\_key**。

**之后开发者服务器可以根据用户标识`OpenID`来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。**

> **注意事项**  
> 会话密钥 session\_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥。  
> 临时登录凭证 code 只能使用一次

#### 2. **实现步骤：** ####

##### **1. 获取授权码code** #####

在微信的小程序开发工具中，发起请求，获取授权码，每个授权码只能使用一次，每次测试，需重新获取。  
![在这里插入图片描述][4cc5411a66a04105b1e1034b1a58ac77.png]

##### **2. 接口参数说明** #####

请求方式、请求路径、请求参数  
HTTPS 调用 `GET https://api.weixin.qq.com/sns/jscode2session`

`请求参数`

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>appid</td> 
   <td>string</td> 
   <td>是</td> 
   <td>小程序 appId</td> 
  </tr> 
  <tr> 
   <td>secret</td> 
   <td>string 是</td> 
   <td>小程序 appSecret</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>js_code</td> 
   <td>string</td> 
   <td>是</td> 
   <td>登录时获取的 code，可通过wx.login获取</td> 
  </tr> 
  <tr> 
   <td>grant_type</td> 
   <td>string</td> 
   <td>是</td> 
   <td>授权类型，此处只需填写 authorization_code</td> 
  </tr> 
 </tbody> 
</table>

**请求参数示例：**

> GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js\_code=JSCODE&grant\_type=authorization\_code

`返回参数`

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>session_key</td> 
   <td>string</td> 
   <td>会话密钥</td> 
  </tr> 
  <tr> 
   <td>unionid</td> 
   <td>string</td> 
   <td>用户在开放平台的唯一标识符，若当前小程序已绑定到微信开放平台账号下会返回，详见 UnionID 机制说明。</td> 
  </tr> 
  <tr> 
   <td>errmsg</td> 
   <td>string</td> 
   <td>错误信息</td> 
  </tr> 
  <tr> 
   <td>openid</td> 
   <td>string</td> 
   <td>用户唯一标识</td> 
  </tr> 
  <tr> 
   <td>errcode</td> 
   <td>int32</td> 
   <td>错误码</td> 
  </tr> 
 </tbody> 
</table>

**返回参数示例:**

{
        
    	"openid":"xxxxxx",
    	"session_key":"xxxxx",
    	"unionid":"xxxxx",
    	"errcode":0,
    	"errmsg":"xxxxx"
    }

##### **3. 发送请求** #####

获取session\_key和openid

![在这里插入图片描述][c8131d7fa6c84e9b90a5837fd83d93ba.png]

若出现code been used错误提示，说明授权码已被使用过，请重新获取  
![在这里插入图片描述][862ad86e6544478a9db503632dfdaf8c.png]

[https_developers.weixin.qq.com_miniprogram_dev_framework_open-ability_login.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
[3cb4b81eac7346b1bdfec2e12500dfb3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/e3ff2a4c4afd463285d8f065e7b6baac.png
[wx.login]: https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
[auth.code2Session]: https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html
[4cc5411a66a04105b1e1034b1a58ac77.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/9e821b46260f473684f218a712077ab8.png
[c8131d7fa6c84e9b90a5837fd83d93ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/0a94c7a853af438ea790054926411c4f.png
[862ad86e6544478a9db503632dfdaf8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/ec426a22cc3544bb99b201f6aa3dad57.png