【H5】html实现微信授权登陆

水深无声 2024-03-27 14:21 76阅读 0赞

#### html实现微信授权登陆 ####

*  前言
 *  网页授权的两种 scope 的区别
 *  开发指南
 *   *  第一步：用户同意授权，获取code
     *  第二步：通过 code 换取网页授权access\_token
     *  第三步：拉取用户信息(需 scope 为 snsapi\_userinfo)
 *  代码实现：
 *  效果图
 *  总结

## 前言 ##

在一次前端项目中，需要在网页端拉起微信，实现微信授权登录，然后把调用微信API，获取到用户信息，返回给后端。

网页授权分为两种，一种静默授权，一种非静默授权。微信网页授权是通过OAuth2.0机制实现的，在用户授权给公众号后，公众号可以获取到一个网页授权特有的接口调用凭证（网页授权access\_token），通过网页授权access\_token可以进行授权后接口调用，如获取用户基本信息；

这篇文章就讲诉一下如何实现微信授权登录。

## 网页授权的两种 scope 的区别 ##

1.  以`snsapi_base`为 scope 发起的网页授权，是用来获取进入页面的用户的 openid 的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）
2.  以`snsapi_userinfo`为 scope 发起的网页授权，是用来获取用户的基本信息的。但**这种授权需要用户手动同意**，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。

## 开发指南 ##

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

### 第一步：用户同意授权，获取code ###

scope若为`snsapi_base`：即选择静默授权，调用此微信服务端API接口

> https://open.weixin.qq.com/connect/oauth2/authorize?appid=appId&redirect\_uri=redirect\_uri&response\_type=code&scope=snsapi\_base&state=123\#wechat\_redirect

scope若为`snsapi_userinfo`：即选择非静默授权，调用此微信服务端API接口

> https://open.weixin.qq.com/connect/oauth2/authorize?appid=appId&redirect\_uri=redirect\_uri&response\_type=code&scope=snsapi\_userinfo&state=STATE\#wechat\_redirect

参数说明：  
![在这里插入图片描述][fcc19773251b4ac0a121633e3cd239f7.png]

### 第二步：通过 code 换取网页授权access\_token ###

如果网页授权的作用域为snsapi\_base，则本步骤中获取到网页授权access\_token的同时，也获取到了openid，snsapi\_base式的网页授权流程即到此为止。

请求方法：

> 获取 code 后，请求以下链接获取access\_token：
> 
> https://api.weixin.qq.com/sns/oauth2/access\_token?appid=APPID&secret=SECRET&code=CODE&grant\_type=authorization\_code

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

### 第三步：拉取用户信息(需 scope 为 snsapi\_userinfo) ###

如果网页授权作用域为snsapi\_userinfo，则此时开发者可以通过access\_token和 openid 拉取用户信息了。

**请求方法**

> http：GET（请使用 https 协议）：
> 
> https://api.weixin.qq.com/sns/userinfo?access\_token=ACCESS\_TOKEN&openid=OPENID&lang=zh\_CN

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

## 代码实现： ##

**前端：**

需要引入jquery插件

**后端接口：**

**
     * 微信网页授权
     */
    @RestController
    @Slf4j
    public class WeixinOauthHandler {
        
    
        /**
         * 第一步：用户同意授权，获取code
         *
         * @param response
         */
        @RequestMapping("/oauth")
        public void oauth(HttpServletResponse response) throws IOException {
        
    		
    		//	项目服务器url
            String path = "http://***:9936/" + "invoke";
            try {
        
                path = URLEncoder.encode(path, "UTF-8");
            } catch (Exception e) {
        
                e.printStackTrace();
            }
    
    
            String url = "https://open.weixin.qq.com/connect/oauth2/authorize?" +
                    "appid=你的公众号appid" +
                    "&redirect_uri=" + path +
                    "&response_type=code" +
                    "&scope=snsapi_userinfo" +
                    "&state=comi" +
                    "#wechat_redirect";
            log.info("url===" + url);
            response.sendRedirect(url);
        }
    
    
        /**
         * 第二步：用户同意授权，页面跳转至/invoke
         *
         * @param request
         */
        @RequestMapping("/invoke")
        public void invoke(HttpServletRequest request) {
        
            String code = request.getParameter("code");
            log.info("code=====" + code);
            //通过code获取ACCESS_TOKEN
    
            //认证服务器
            String url = "https://api.weixin.qq.com/sns/oauth2/access_token?" +
                    "appid=您的公众号appid" +
                    "&secret=您的公众号密钥" +
                    "&code=" + code +
                    "&grant_type=authorization_code";
    
            String object = HttpUtil.doGet(url);
            JSONObject jsonObject = JSONObject.parseObject(object);
            log.info("jsonObject====" + jsonObject);
            String access_token = jsonObject.getString("access_token");
            String openid = jsonObject.getString("openid");
    
            //第三步：拉取用户信息
            String userInfoUrl = "https://api.weixin.qq.com/sns/userinfo?" +
                    "access_token=" + access_token +
                    "&openid=" + openid +
                    "&lang=zh_CN";
    
            String userInfo = HttpUtil.doGet(userInfoUrl);
            JSONObject userJson = JSONObject.parseObject(userInfo);
            log.info("userJson=====" + userJson);
    
        }
    
    }

## 效果图 ##

![在这里插入图片描述][591c093d673f4eaeb9b22dd028e626b6.jpeg_pic_center]

可以获取到国家、地区、openid、code、微信昵称、微信头像、性别、语言等等字段。  
![在这里插入图片描述][fc5eb2c0f6e844f5aadb50355a279397.png]

## 总结 ##

顺便给大家提供一个微信公众号测试平台：[https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login][https_mp.weixin.qq.com_debug_cgi-bin_sandbox_t_sandbox_login]

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

需要在微信公众号后台配置后，才能后台才能调用成功哦～

[fcc19773251b4ac0a121633e3cd239f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/e2e7191ce7464cebad384183ff7fd214.png
[e0c791d0bd8f441f834f3a21b377c282.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/358683d21c2b407c9873581c90edab2b.png
[2348c98cfebd459aaccdac0bd2323e53.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/18918471077f4585b21f3e86f44af66d.png
[591c093d673f4eaeb9b22dd028e626b6.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/791164cf6339476d8a3d5b1d4a3018e2.png
[fc5eb2c0f6e844f5aadb50355a279397.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/b857786793854e099373f37b5401b11f.png
[https_mp.weixin.qq.com_debug_cgi-bin_sandbox_t_sandbox_login]: https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
[7131256e165a48969db4d064cdbb9cd0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/86613283a30e4c20a43bb9a28f81c9e1.png