微信公众号快速开发（四）微信网页授权_微信公众号开发页面授权-CSDN博客

本文链接：https://blog.csdn.net/weixin_40141790/article/details/105330433

引入授权

OAuth2概念引入

OAuth2.0是OAuth协议的延续版本，但不向前兼容OAuth 2.0(即完全废止了OAuth1.0)。 OAuth 2.0关注客户端开发者的简易性。要么通过组织在资源拥有者和HTTP服务商之间的被批准的交互动作代表用户，要么允许第三方应用代表用户获得访问的权限。

以上来自百度百科，即OAuth由Resourse Owner(资源所有者)，Client(客户端)，以及Provider(服务提供商)组成，Provider包括Authorization Server(认证服务器)和Resource Server(资源服务器)两部分。

微信的网页授权是基于OAuth2.0协议。比如当我们的公众号中要修改用户的基本信息时，公众号就要先获取微信中的用户数据；又或者用户修改图片时需要访问手机的相册。如果按传统的方式，用户登录公众号之后，第三方的公众号就可以随意从微信端获取用户信息，或是手机的全部数据，这就造成了密码泄露的隐患，当你不想使用该公众号又担心数据外泄，只能修改密码。

微信网页授权流程

OAuth协议的出现正是为了解决上述这些问题。他将用户名密码授权方式改为通过令牌授权，第三方应用请求访问资源，资源所有者(用户)同意授权后，再次访问服务提供商(微信官方)去向认证服务器申请令牌(Token)，认证服务器同意后发放令牌(Token)，然后第三方应用再拿这个令牌(Token)去向资源服务器(微信官方)申请想要的资源，资源服务器验证通过后开放这个应用所需的资源。

具体而言，网页授权流程分为四步：

引导用户进入授权页面同意授权，获取code
通过code换取网页授权access_token（与基础支持中的access_token不同）
如果需要，开发者可以刷新网页授权access_token，避免过期
通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）

具体介绍参见公众号开发文档->微信网页授权

开发准备

一、微信web开发者工具

便于在客户端调式，下载地址：微信web开发者工具

二、配置网页账号

微信测试公众平台->体验接口权限->网页服务->网页账号->网页授权获取用户基本信息->修改

这里暂时还是使用内网穿透的域名，若需要开发微信支付功能，需使用真实域名。

三、配置静态页面

根据开发文档的返回json，拟做一个页面，用于显示用户的信息

静态资源位置：templates/person.html，该页面用于显示用户的详细信息

开发步骤

用户同意授权，获取code

一、URL

根据文档，引导网页授权的URL的格式为：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STAT

注意：

微信会对授权链接做正则强匹配校验，如果链接的参数顺序不对，授权页面将无法正常访问；
回调redirect_uri，应当使用https链接来确保授权code的安全；
网页授权作用域为snsapi_userinfo，后续便可以通过access_token和openid拉取用户信息；
如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE；
参数说明，如下图：

二、添加转发页面的控制器

因为本项目暂时使用的时thymeleaf模板，无法直接访问项目中的静态资源，因此需要配置重定向的Controller。（为了跳转方便，后面页面与URL保持不重名）

IndexController:

@Controller
@RequestMapping("/api/v1/wechat1")
public class IndexController {
   

    // 用于thymeleaf环境下，跳转到字符串相应的html页面
    @RequestMapping("/{path}")
    public String webPath(@PathVariable String path) {
   
        return path;
    }

    @RequestMapping("/index")
    public void index(String co