微信扫码登录— 获取微信公众号二维码，关注公众号进行系统的用户登录

梦里梦外; 2024-02-21 04:15 73阅读 0赞

**目录**

一、微信扫码关注公众号登录

二、后端代码

Controller控制层

Service业务层

mapper持久层

WXUtils工具类

三、前端代码

四、需要更改的地方

整个微信公众号扫码登录**业务描述和代码逻辑**都进行了详细的介绍，最后还提供了**前后端关键代码**，只需要根据自己的项目进行更改即可。并且需要**修改代码位置**都进行了图片指引。

--------------------

## 一、微信扫码关注公众号登录 ##

**1.1需求明细：**

> 要求用户在网站登录页面选择扫码登录；通过**扫描二维码关注公众号**，成功关注公众号的用户，网站自动跳转到**登录成功页面**；并在公众号关注成功之后进行**模板消息**的提示；

**1.2相关链接，正常需要企业申请公众号然后获取appId和appsecret等相关消息；开发时建议使用微信公众号测试平台获取相关信息进行代码开发。**

[微信公众号平台链接][Link 1]

![3d0cedc20ba04c3b814cf549a079fe24.png][]

[微信公众号测试平台链接][Link 2]

![f18577e10d23484b91271dd759e3c73d.png][]

**1.3具体业务流程分析：**

![481ee540db254b479578f96689a756f7.png][]

> **1.向微信请求AccessToken:**
> 
> **——**access\_token是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access\_token。开发者需要进行妥善保存。access\_token的存储至少要保留512个字符空间。access\_token的有效期目前为2个小时，需定时刷新，重复获取将导致上次获取的access\_token失效。
> 
> **接口调用请求说明**
> 
> > https请求方式: GET https://api.weixin.qq.com/cgi-bin/token?grant\_type=client\_credential&appid=APPID&secret=APPSECRET
> 
> **参数说明**
> 
> <table> 
>  <thead> 
>   <tr> 
>    <th>参数</th> 
>    <th>是否必须</th> 
>    <th>说明</th> 
>   </tr> 
>  </thead> 
>  <tbody> 
>   <tr> 
>    <td>grant_type</td> 
>    <td>是</td> 
>    <td>获取access_token填写client_credential</td> 
>   </tr> 
>   <tr> 
>    <td>appid</td> 
>    <td>是</td> 
>    <td>第三方用户唯一凭证</td> 
>   </tr> 
>   <tr> 
>    <td>secret</td> 
>    <td>是</td> 
>    <td>第三方用户唯一凭证密钥，即appsecret</td> 
>   </tr> 
>  </tbody> 
> </table>
> 
> **返回说明**
> 
> 正常情况下，微信会返回下述JSON数据包给公众号：
> 
>     {"access_token":"ACCESS_TOKEN","expires_in":7200}
> 
> **参数说明**
> 
> <table> 
>  <thead> 
>   <tr> 
>    <th>参数</th> 
>    <th>说明</th> 
>   </tr> 
>  </thead> 
>  <tbody> 
>   <tr> 
>    <td>access_token</td> 
>    <td>获取到的凭证</td> 
>   </tr> 
>   <tr> 
>    <td>expires_in</td> 
>    <td> <p>凭证有效时间，单位：秒</p> </td> 
>   </tr> 
>  </tbody> 
> </table>
> 
> 具体详情查看：可以去 **微信公众号平台查看开发者文档；**

**1.4具体代码流程分析：**

![22a4e0b586f844e18e76003375187298.png][]

> 1.前端发送请求getQRCode()，获取ticket,用于生成二维码；固定链接+ticket；前端请求二维码接口的同时对登录接口check()进行轮询。
> 
> **https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=$\{data.ticket\}**
> 
> 2.后端通过调用微信接口凭证方法getAccessToken()方法
> 
> ![2f74869a9f7f443f805481024a27bab4.png][]
> 
> 3.前端轮询check()，主要是判断登录接口返回的数据中scanResult的值；
> 
> scanResult = 1 表示关注成功，用户登录
> 
> scanResult = -1 未关注成功
> 
> scanResult = -2 二维码过期
> 
> 4.用户扫描二维码，并成功关注公众号之后，微信内部会触发我们配置的回调接口方法；该
> 
> 方法主要是获取用户唯一标识openId，用于查找用户的信息。
> 
> 5.存redis数据；在获取二维码时redis存缓存
> 
> "WEI\_XIN\_TICKET" +ticket : 1
> 
> "WEI\_XIN\_TICKET" +ticket : 获取的openId
> 
> 在进行轮询check接口的时候，会始终去redis获取"**WEI\_XIN\_TICKET" +ticket**键的值，如果是1则表示用户没有关注成功，因为openId是在回调接口中进行赋值的，只有用户关注成功才会触发微信内部的回调方法，并且**回调成功**才会将获取的openId存入redis; 如果用户没有关注成功则不会执行回调方法，redis存的值始终会是1；
> 
> 6.注意点：微信公众号平台配置的回调地址，测试的时候需要使用**内网穿透地址**

[Link 1]: https://mp.weixin.qq.com/cgi-bin/home?t=home/index&lang=zh_CN&token=1438989259
[3d0cedc20ba04c3b814cf549a079fe24.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/40531ba281994766b892d42201ab5251.png
[Link 2]: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
[f18577e10d23484b91271dd759e3c73d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/0a6f55f8107944828c47113ff9b10914.png
[481ee540db254b479578f96689a756f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/ac317a74bd1d4a50848ac1051b4d77c5.png
[22a4e0b586f844e18e76003375187298.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/3720c6d76f4a4032bedeb651d3057557.png
[2f74869a9f7f443f805481024a27bab4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/62515460d29840d58bf2bb38b8ba0527.png