【Oauth2】七、微信OAuth2授权登录

淩亂°似流年 2023-10-09 14:33 26阅读 0赞

## 前言 ##

前面已经把gitee的OAuth2授权登录流程和配置搞明白了，单纯的理论十分枯燥，而且gitee的OAuth2中规中矩，需要我们定制的东西不多。因此这里结合微信网页开发文档来实现微信环境下的网页OAuth2授权。微信网页授权对OAuth2的一些地方进行了“夹带私货”，属于非标准的OAuth2，很多地方需要定制。这不仅仅是一个挑战，还是学习Spring Security OAuth2的一个良好素材，而且比较爽的是它提供沙盒。  
本文DEMO分支：wechat 分支。

## 一、环境准备 ##

在开始之前我们需要准备好微信网页开发的环境。

### 1、微信公众号服务号 ###

请注意，一定是微信公众号服务号，只有服务号才提供这样的能力。一般公众号虽然也是认证过的公众号，但是只能发发文章并不具备提供服务的能力。但是微信公众平台提供了沙盒功能来模拟服务号，可以降低开发难度，你可以到[微信公众号测试账号][Link 1]页面申请，申请成功后别忘了关注测试公众号。  
[正式的微信公众号服务号只有企事业单位、政府机关才能开通，微信网页开发参考文档。][Link 2]

### 2、内网穿透 ###

因为微信服务器需要回调开发者提供的回调接口，为了能够本地调试，内网穿透工具也是必须的。启动内网穿透后，需要把内网穿透工具提供的虚拟域名配置到微信测试帐号的回调配置中，一定要按照下图所示。

*  配置回调地址  
    ![e2d7fff3e3ec434e9ef487d98036ce97.png][]
 *  关注公众号  
    ![在这里插入图片描述][08295377e72347cd97dccd702d3a94ff.png]
 *  修改网页账号获取信息域名![在这里插入图片描述][db9ea67afdf1437bac68374de4439cba.png]

在这里插入图片描述

## 二、代码配置 ##

### 1、配置文件 ###

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

### 2、自定义配置类 ###

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

### 3、微信开发工具进行登录测试 ###

![在这里插入图片描述][baceba43af6d4119b26babe883eb9a58.png]  
也可以在上边地址栏中直接输入一下地址进行登录

http://iqf667.natappfree.cc/oauth2/authorization/wechat

### 4、登录成功后到了我们的默认页面 ###

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

[Link 1]: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
[Link 2]: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
[e2d7fff3e3ec434e9ef487d98036ce97.png]: https://img-blog.csdnimg.cn/e2d7fff3e3ec434e9ef487d98036ce97.png
[08295377e72347cd97dccd702d3a94ff.png]: https://img-blog.csdnimg.cn/08295377e72347cd97dccd702d3a94ff.png
[db9ea67afdf1437bac68374de4439cba.png]: https://img-blog.csdnimg.cn/db9ea67afdf1437bac68374de4439cba.png
[41941f4f0d8b4327b275151693d50c37.png]: https://img-blog.csdnimg.cn/41941f4f0d8b4327b275151693d50c37.png
[288048b88bfc4a1cba7403bffc4a6d97.png]: https://img-blog.csdnimg.cn/288048b88bfc4a1cba7403bffc4a6d97.png
[baceba43af6d4119b26babe883eb9a58.png]: https://img-blog.csdnimg.cn/baceba43af6d4119b26babe883eb9a58.png
[0c401ee74f254a76ba505ae3b5e8019b.png]: https://img-blog.csdnimg.cn/0c401ee74f254a76ba505ae3b5e8019b.png