手机端访问第三方java服务器后判断是否进行OAuth2.0网页微信公众号授权认证

小鱼儿 2022-06-14 08:30 30阅读 0赞

在网上看了好多案例关于网页授权认证，但不是自己想要的，所以尝试写了一篇，怎么在服务器端引导授权认证！不足之处请指出共同学习。

### **一、关于什么是OAuth2.0网页授权认证网上资料很多，也可以去官网查看，官网地址：[点击打开链接][Link 1]** ###

**         另外网页认证默认支持80，443端口，回调函数不能带端口，回调函数值在测试公众号可以为ip或域名，生产只能为域名。之前看到帖子说测试环境下可以带端口，但我还没测试过。**

### 二、现在先介绍微信公众平台OAuth2.0授权流程      微信公众平台OAuth2.0授权详细步骤如下：      1. 用户关注微信公众账号。   2. 微信公众账号引导用户请求授权页面URL。（本文章主要针对怎么在服务端进行引导用户进行网页授权）   3. 用户点击授权页面URL，将向服务器发起请求   4. 服务器询问用户是否同意授权给微信公众账号(scope为snsapi\_base时无此步骤)   5. 用户同意(scope为snsapi\_base时无此步骤)   6. 服务器将CODE通过回调传给微信公众账号   7. 微信公众账号获得CODE   8. 微信公众账号通过CODE向服务器请求Access Token   9. 服务器返回Access Token和OpenID给微信公众账号   10. 微信公众账号通过Access Token向服务器请求用户信息(scope为snsapi\_base时无此步骤)   11. 服务器将用户信息回送给微信公众账号(scope为snsapi\_base时无此步骤)    ###

如果用户在微信中（Web微信除外）访问公众号的第三方网页，公众号开发者可以通过此接口获取当前用户基本信息（包括昵称、性别、城市、国家）。利用用户信息，可以实现体验优化、用户来源统计、帐号绑定、用户身份鉴权等功能。 **请注意，“获取用户基本信息接口是在用户和公众号产生消息交互时，才能根据用户OpenID获取用户基本信息，而网页授权的方式获取用户基本信息，则无需消息交互，只是用户进入到公众号的网页，就可弹出请求用户授权的界面，用户授权后，就可获得其基本信息（此过程甚至不需要用户已经关注公众号。）”**  
  
微信OAuth2.0授权登录让微信用户使用微信身份安全登录第三方应用或网站，在微信用户授权登录已接入微信OAuth2.0的第三方应用后，第三方可以获取到用户的接口调用凭证（access\_token），通过access\_token可以进行微信开放平台授权关系接口调用，从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。  
  
在微信公众号请求用户网页授权之前，开发者需要先到公众平台网站的我的服务页中配置授权回调域名。

请注意，这里填写的域名不要加http://  
关于配置授权回调域名的说明：

授权回调域名配置规范为全域名，比如需要网页授权的域名为： www.qq.com，

配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。

### **但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com  无法进行OAuth2.0鉴权。**       ###

### **三  没有账号。怎么测试呢，使用测试账号** ###

**这里讲一下在没有服务的情况，可以使用测试账号，进入开发者工具，找到测试账号。进入网页授权接口，修改里面的回调函数使用ngrok外网映射工具生成的域名**，如图是产生的 **临时域名，使用红圈圈起来的就可以了。**

![Center][]

把这里的域名配置一下就可以了。就可以进行验证测试。

**四 使用测试工具**

测试工具在网上下载到本地， **进入cmd，进入工具所在这一级目录路径，然后执行  ngrok http  8080**  等一会就可以看到上图所示。 **高版本执行这句才可以，低版本可以不用加http**

注意： 这条命令只可以在cmd不关闭突出下才可以，否则无效。而且每次执行命令产生的域名都不一样。所以每次测比较麻烦。但有一种可以设置执行一次就可以。但该条命令

最近一直用不了。看了帖子，大家都一样，所以这里就不给出了，感兴趣可以百度一下，资料比较多，很容易找到。

到这里测试环境就OK了，其他就是代码了。

下面借鉴别人一个流程图（个人感觉不错）来自：[点击打开链接][Link 2]

![Center 1][]

大体授权流程介绍到此;就本文章而言，开始进行服务器端网页授权认证操作：

1.用户登录微信公众号，访问服务器

2.服务器进行判断引导用户进入授权页面同意授权，获取code  
3.通过code换取网页授权access\_token（与基础支持中的access\_token不同）  
4.如果需要，开发者可以刷新网页授权access\_token，避免过期  
5.通过网页授权access\_token和openid获取用户基本信息  
附：其中包括  6.*ssl认证（证书认证和网络安全信息加密）*

## **第一步：** ##

**让用户关注微信公众号，给用户提供一个按钮，用于访问服务器；**

## **第二步：** ##

用户访问服务器后进行用户判断，是否已网页授权认证，如果没有则引导用户进行授权认证

**使用重定向方式引导用户进行网页授权认证。（OAuth2.0规定网页授权只支持在手机端进行认证）；**

最后进入网页授权页面 ：进行用户同意授权，获取code

在确保微信公众账号拥有授权作用域（scope参数）的权限的前提下（服务号获得高级接口后，默认拥有scope参数中的 snsapi\_base 和 snsapi\_userinfo ）；

这一步在整个的网页授权过程中是非常重要的一步，因为只有引导用户授权获取到code才能开始后面信息的获取，在这里需要注意的是我们在配置授权链接中的redirect\_uri必须是我们在第一步中配置的安全域名。

**这一步其实就是将需要授权的页面** **url拼接到微信的认证请求接口里面** **，比如需要用户在访问页面 ** **lovebread.tunnel.qydev.com/auth** ** 时进行授权认证，那么拼接后的授权验证地址为：**

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx88888888&redirect\_uri=http://lovebread.tunnel.qydev.com/auth&response\_type=code&scope=snsapi\_base&state=xxxx\_state\#wechat\_redirect

这里面需要替换appid、redirect\_uri为实际的信息。其中的scope参数有两个值：

snsapi\_base：只能获取到用户openid。好处是静默认证，无需用户手动点击认证按钮，感觉上像是直接进入网站一样。

snsapi\_userinfo：可以获取到openid、昵称、头像、所在地等信息。需要用户手动点击认证按钮。

否

<table> 
 <tbody> 
 <tr> 
 <th>参数</th> 
 <th>是否必须</th> 
 <th>说明</th> 
 </tr> 
 </tbody> 
 <tbody> 
 <tr> 
 <td>appid</td> 
 <td>是</td> 
 <td>公众号的唯一标识 </td> 
 </tr> 
 <tr> 
 <td>redirect_uri</td> 
 <td>是</td> 
 <td>授权后重定向的回调链接地址，请使用urlencode对链接进行处理 </td> 
 </tr> 
 <tr> 
 <td>response_type</td> 
 <td>是</td> 
 <td>返回类型，请填写code </td> 
 </tr> 
 <tr> 
 <td>scope</td> 
 <td>是</td> 
 <td>应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息） </td> 
 </tr> 
 <tr> 
 <td>state</td> 
 <td> 
 <div style="text-align:center"> 
 否&nbsp; 
 </div> 
 <div style="text-align:center"> 
 
 </div> </td> 
 <td>重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节</td> 
 </tr> 
 <tr> 
 <td>#wechat_redirect</td> 
 <td>是</td> 
 <td>无论直接打开还是做页面302重定向时候，必须带此参数&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

注：code作为换取access\_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期！

未完，后续补加源码。

[Link 1]: https://mp.weixin.qq.com/wiki
[Center]: /images/20220614/e6d7bff87c704be3a0783899788d9f8c.png
[Link 2]: http://www.cnblogs.com/txw1958/p/weixin71-oauth20.html
[Center 1]: /images/20220614/77723c188240451db8266e10389d1514.png