【微信网页授权】SpringBoot+uniapp实现网页授权获取用户基本信息

秒速五厘米 2024-05-11 09:06 71阅读 0赞

#### 文章目录 ####

*   *  前言
     *   *  ?缘由
         *  ⏲️建议阅读时长
         *  ?主要目标
         *  ??试用人群
         *  ?快速链接
         *  ?猜你喜欢
         *  ?水图
     *  正文
     *   *  ?准备
         *   *  1.服务号/订阅号(已认证)
             *  2.开发工具
             *  3.接口文档
             *  4.网页授权获取用户基本信息配置
             *   *  在公众号左侧菜单【开发工具】=》【公众平台测试帐号】
                 *  在网页服务-网页账号-修改
                 *  修改OAuth2.0网页授权【授权回调页面域名】
         *  ?问题剖析
         *   *  1.什么是网页授权？
             *   *  官网解释
                 *  简单理解
                 *  举个栗子 ?
             *  2.网页授权流程步骤？
             *   *  1. 用户同意授权，获取code
                 *  2. 通过 code 换取网页授权access\_token
                 *  3. 刷新access\_token（如果需要）
                 *  4. 拉取用户信息
         *  ?开始
         *   *  简易流程图
             *  步骤
             *   *  1.步骤一
                 *  2.步骤二
                 *  3.步骤三
         *  ❌常见错误
         *   *  错误1：redirect\_uri 参数错误
             *  错误2：oauth\_code已使用
     *  总结

### 前言 ###

#### ?缘由 ####

起因于本狗上一个项目本打算采用**微信公众号网页授权登录**做用户鉴权，但最终因公众号是**未认证的订阅号**，**无权限获取用户信息**，所以改变思路，采用登录注册方式实现用户区分。但在开发中，学习了**微信网页授权登录**流程，特此分享，带你手把手操作，让我们一起捋清授权的逻辑。

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

#### ⏲️建议阅读时长 ####

约20分钟

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

#### ?主要目标 ####

1.  **测试公众号**实现**网页授权**并获取**用户基本信息**
2.  **灵活掌握微信接口文档**，熟练对接相关接口
3.  整理授权逻辑，前后端对接熟悉流程

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

#### ??试用人群 ####

1.  对于**微信公众号网页授权**流程模糊或初次接触
2.  做过相关流程但想回顾熟悉复盘

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

#### ?快速链接 ####

公众号：**JavaDog程序狗**  
**在公众号，发送【wx】 ，无任何套路即可获得**

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

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

#### ?猜你喜欢 ####

<table> 
 <thead> 
  <tr> 
   <th>序号</th> 
   <th>分类</th> 
   <th>文章描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td>项目实战</td> 
   <td><a href="https://blog.csdn.net/baidu_25986059/article/details/129263139" rel="nofollow">SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序</a></td> 
  </tr> 
 </tbody> 
</table>

#### ?水图 ####

![请添加图片描述][f514fdb2153543fe9f8fbb6897f3243a.gif]

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

### 正文 ###

#### ?准备 ####

##### 1.服务号/订阅号(已认证) #####

> 网页授权接口权限只有**服务号**或者**已认证的订阅号**有权限，也就是需要每年缴纳300块钱费用认证过才会有权限，否则无法在正式公众号调用此接口。  
> ? 切记无权限时调用会提示【微信公众号授权scope参数错误或没有scope权限】，只可在**测试公众号进行调试**！！！

##### 2.开发工具 #####

<table> 
 <thead> 
  <tr> 
   <th>序号</th> 
   <th>分类</th> 
   <th>工具</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td>后端</td> 
   <td>IDEA</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>前端</td> 
   <td>uniapp</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>前端</td> 
   <td>微信开发者工具</td> 
  </tr> 
 </tbody> 
</table>

##### 3.接口文档 #####

[微信官方公众号文档][Link 1]

##### 4.网页授权获取用户基本信息配置 #####

> 以测试号进行展示操作步骤

###### 在公众号左侧菜单【开发工具】=》【公众平台测试帐号】 ######

![56d167b00c4041558c623f2e1578958a.png][]

###### 在网页服务-网页账号-修改 ######

![7c204111a28242f390026212a96d0592.png][]

###### 修改OAuth2.0网页授权【授权回调页面域名】 ######

> **切记不要带http**，此处地址填写本地ip即可。可在键盘通过【win+R】，输入【cmd】，确定后输入ipconfig，复制出IPv4地址即可。或者启动uniapp后，控制台打印的地址，**以上方法仅限本地调试**。

![98dd380c9fc94844b6030a259f413934.png][]  
![927f597802224340a6f80b346dbc18f7.png][]

![3e551c285ca94cb7a402b437893b9946.png][]

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

#### ?问题剖析 ####

##### 1.什么是网页授权？ #####

###### 官网解释 ######

> 如果用户在**微信客户端**中访问**第三方网页**，公众号可以通过微信**网页授权机制**，来获取用户基本信息，进而实现业务逻辑。

###### 简单理解 ######

> 通俗来说，就是我们通过**微信内置浏览器**去访问其他网站时，可以通过**微信授权策略**，在目标网站可以获取微信用户的基本信息，如昵称，头像等

###### 举个栗子 ? ######

> 通过**微信内打开csdn分享链接**，当跳转到csdn网页时，csdn就可以通过**网页授权**，直接拿到我们微信的昵称，头像信息等，完成**自主授权注册**

##### 2.网页授权流程步骤？ #####

###### 1. 用户同意授权，获取code ######

> 前端引导用户进入授权页面同意授权，获取code

![283bba59941f49238e9398b2ac379d15.png][]

###### 2. 通过 code 换取网页授权access\_token ######

> 通过前端获取的code，**调用我们自己服务器接口**，通过**后台使用code调取微信接口**，换取**access\_token(网页授权接口调用凭证)**，access\_token是调用用户信息及其他接口所必需的参数

###### 3. 刷新access\_token（如果需要） ######

> 由于**access\_token**拥有较短的**有效期**，当**access\_token超时**后，可以使用**refresh\_token**进行刷新，refresh\_token有效期为30天，当refresh\_token失效之后，需要**用户重新授权**

###### 4. 拉取用户信息 ######

> 开发者可以通过**access\_token**和 **openid** 拉取用户信息

? 如果看不懂不要划走，下面才是重点讲解  
? 如果看不懂不要划走，下面才是重点讲解  
? 如果看不懂不要划走，下面才是重点讲解

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

#### ?开始 ####

##### 简易流程图 #####

> 为了方便理解，画了一个简易流程图，有疑惑别急，下面还有现实列子解释版

![9a5ac132fed24eeabe9c1a5cc80aa81a.png][]

> 举个实际购买**苹果手机**例子，可能不太贴合，但有助与理解

![93a40258a8d14f97ad398dceb064aafb.png][]

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

##### 步骤 #####

> 根据下图进行步骤分析

![ebb0bf8e2b0a40669d958c82616e927e.png][]

###### 1.步骤一 ######

前端uniapp中**新建授权页**

> 页面进入后，onLoad直接跳转微信接口地址，微信方通过appId获取code，并**携带code**根据**redirect\_uri返回到当前页面**，此刻**地址栏中就包含着code信息**

**跳转前**  
![bb26cb81414e47efa6500076c364e617.png][]

**跳转后**  
![58cd73256d5143b38ae6da03849d542d.png][]

关键代码

//通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】,之后会继续进入到onload()方法
    location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" +
    local + "&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect""

**appid** ：公众号对应的appId  
**redirect\_uri**：页面回跳地址，也就是当前页面的地址，此地址也就是在上方**准备4**中OAuth2.0网页授权【授权回调页面域名】填入的值。微信根据这个回调地址进行携带code回跳。

其他参数可看官方参数说明

![b35b0beaedf6484480d0fa50388b2623.png][]

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

###### 2.步骤二 ######

1.后端提供接口，**入参**为上一步的**code**，**通过code**调取微信接口**换取access\_token**。此处后端使用了[weixin-java-mp][]组件，方便对接微信接口。

@Api(tags = "网页授权控制器")
    @RestController
    @RequestMapping("/login")
    public class AuthController {
        
    
        @Resource
        private UserService userService;
    
        @ApiOperation(value = "网页授权获取用户基本信息", notes = "网页授权获取用户基本信息")
        @GetMapping
        public ResponseData login(@RequestParam String code) throws WxErrorException {
        
            return userService.auth(code);
        }
    }

2.前端带着code，调用1中的/login接口

const res = await this.$api.login({
        
    		code
    	})
    	if (!res.success) {
        
    		uni.$u.toast(res.message)
    		return
    	}
    	// 用户信息
    	this.userInfo = res.data;
    }

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

###### 3.步骤三 ######

将步骤二后端拿到的**access\_token**，调用微信**获取用户信息**，将用户信息返回给前端

WxOAuth2AccessToken accessToken;
            WxMpUser wxMpUser;
            try {
        
            	// 获取accessToken 
                accessToken = wxMpService.getOAuth2Service().getAccessToken(code);
                log.info("AccessToken={}" + accessToken);
                // 获取用户信息
                wxMpUser = wxMpService.getUserService().userInfo(accessToken.getOpenId());
                log.info("wxMpUser={}", JSONUtil.toJsonStr(wxMpUser));
            } catch (WxErrorException e) {
        
                return ResponseData.error(e.getMessage());
            }
            return ResponseData.success(wxMpUser);

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

#### ❌常见错误 ####

##### 错误1：redirect\_uri 参数错误 #####

> 微信中【OAuth2.0网页授权】-**授权回调页面域名配置错误**

![87e8ed08eff14244821c198375d6c2f1.png][]  
![54c670d5f7aa470493d363e5604ae8f3.png][]

##### 错误2：oauth\_code已使用 #####

> **code每次使用换取access\_token后便失效**，再次调用则会报错，请**根据自己业务**，进行缓存比较，**防止重复调用**

![188f3cbd636146f2a5b33872b30fdcb9.png][]

### 总结 ###

本文虽然篇幅长，但是实现功能简单，主要目的是展示**网页授权**的流程与思路，对于微信对接，本人建议多查看**微信官方文档**，写的很详细，通读过几遍后就会对疑问点有些许领悟，希望能对大家有所帮助。

![e74f3636c05a430eab8819333fa004eb.jpeg][]

<table> 
 <thead> 
  <tr> 
   <th align="center">JavaDog</th> 
   <th align="center">狗屋地址</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">个人博客</td> 
   <td align="center"><a href="https://blog.javadog.net" rel="nofollow">https://blog.javadog.net</a></td> 
  </tr> 
  <tr> 
   <td align="center">公众号</td> 
   <td align="center"><a href="https://mp.weixin.qq.com/s/_vgnXoQ8FSobD3OfRAf5gw" rel="nofollow">https://mp.weixin.qq.com/s/_vgnXoQ8FSobD3OfRAf5gw</a></td> 
  </tr> 
  <tr> 
   <td align="center">CSDN</td> 
   <td align="center"><a href="https://blog.csdn.net/baidu_25986059" rel="nofollow">https://blog.csdn.net/baidu_25986059</a></td> 
  </tr> 
  <tr> 
   <td align="center">掘金</td> 
   <td align="center"><a href="https://juejin.cn/user/2172290706716775" rel="nofollow">https://juejin.cn/user/2172290706716775</a></td> 
  </tr> 
  <tr> 
   <td align="center">知乎</td> 
   <td align="center"><a href="https://www.zhihu.com/people/JavaDog" rel="nofollow">https://www.zhihu.com/people/JavaDog</a></td> 
  </tr> 
  <tr> 
   <td align="center">简书</td> 
   <td align="center"><a href="https://www.jianshu.com/u/1ff9c6bdb916" rel="nofollow">https://www.jianshu.com/u/1ff9c6bdb916</a></td> 
  </tr> 
  <tr> 
   <td align="center">gitee</td> 
   <td align="center"><a href="https://gitee.com/javadog-net" rel="nofollow">https://gitee.com/javadog-net</a></td> 
  </tr> 
  <tr> 
   <td align="center">GitHub</td> 
   <td align="center"><a href="https://github.com/javadog-net" rel="nofollow">https://github.com/javadog-net</a></td> 
  </tr> 
 </tbody> 
</table>

[d4fce750c9b0480ebb13bbd01bce7b4b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/accff608160a44cb91cfb3e606dbd1de.png
[f514fdb2153543fe9f8fbb6897f3243a.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/3f2d201c99b342bf95103bf220d7660b.gif
[Link 1]: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
[56d167b00c4041558c623f2e1578958a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/50fd5890af874a8db6793181e9d55c29.png
[7c204111a28242f390026212a96d0592.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/546d77870f1b41da82980ea2a2d3f3c7.png
[98dd380c9fc94844b6030a259f413934.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/29e093dd40ec416fb8bf27b8391f7f27.png
[927f597802224340a6f80b346dbc18f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/cf4cb29654984c8aaf345a033643fd28.png
[3e551c285ca94cb7a402b437893b9946.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/4b77ca2cc9634b028ed0c39983ca88f8.png
[283bba59941f49238e9398b2ac379d15.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/761dda054dd744d6ab789a73bc3afa22.png
[9a5ac132fed24eeabe9c1a5cc80aa81a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/76bda62b9be54109a2499dacec68b94b.png
[93a40258a8d14f97ad398dceb064aafb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/29bf16ae722240b3a42ab26207bd0924.png
[ebb0bf8e2b0a40669d958c82616e927e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/4a4c40dbce354c9eb8688681ea0298c6.png
[bb26cb81414e47efa6500076c364e617.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/f438d60291894fc29f240f6019f8f6a3.png
[58cd73256d5143b38ae6da03849d542d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/f69e8ac846c648a79305ea77c015b631.png
[b35b0beaedf6484480d0fa50388b2623.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/78e82a15b7e9447e890c2dbc44f6b87a.png
[weixin-java-mp]: https://github.com/Wechat-Group/WxJava
[87e8ed08eff14244821c198375d6c2f1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/85ebaa75d29d4387baeb00610153d883.png
[54c670d5f7aa470493d363e5604ae8f3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/03873efc01c8469aa46c7666024ddc17.png
[188f3cbd636146f2a5b33872b30fdcb9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/b74b227163cb43239a19f3e576c9eb9e.png
[e74f3636c05a430eab8819333fa004eb.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/7389796e028544f8b1169c383d15234f.jpeg