【Solution】一文学会微信扫码登录

￡神魔★判官ぃ 2024-02-22 09:40 107阅读 0赞

**目录**

一、微信登录原理

二、实现前准备

1、登录微信公众平台测试号

2、配置具体URL与token

3、实现连接

4、内网穿透

5、OAuth2.0网页授权

三、代码实现

1、准备依赖

2、生成二维码用户扫码同意授权获取code并携带code重定向到指定的回调路由做进一步处理

3、定义回调接口

4、根据code获取access\_token

5、根据access\_token获取用户信息

6、登录成功后存储会话信息

四、结果演示

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

## 一、微信登录原理 ##

![6bc6a984b6e44e58ab5485444bfb8cfb.png][]

具体可查看官网文档，后续会在代码实现详细提及[微信网页开发 / 网页授权 (qq.com)![icon-default.png?t=N7T8][icon-default.png_t_N7T8]https://developers.weixin.qq.com/doc/offiaccount/OA\_Web\_Apps/Wechat\_webpage\_authorization.html][_ _ _qq.com_icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_developers.weixin.qq.com_doc_offiaccount_OA_Web_Apps_Wechat_webpage_authorization.html]

## 二、实现前准备 ##

### 1、登录微信公众平台测试号 ###

[微信公众平台 (qq.com)![icon-default.png?t=N7T8][icon-default.png_t_N7T8]https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/cc327f173a714eb1a13825edd6cce75e.png][_qq.com_icon-default.png_t_N7T8_icon-default.png_t_N7T8_http_mp.weixin.qq.com_debug_cgi-bin_sandbox_t_sandbox_login]

访问后扫码登录即可

### 2、配置具体URL与token ###

![675f1c05a27f4989beb1f928fc5e878b.png][]

此处token可随便填写，但此处URL必须能在公网被访问到（在下一点会详细提及），因为当填写后，微信会给该URL发送一个GET请求，该请求携带以下参数。开发者对该请求进行处理后，如果确认无误则将参数中的ehostr返回，则接入成功。请求处理规则如下![2641ee1b336041ccb2c351d70844a5eb.png][]

![e0371d3443f04567b87d547a2498f3f1.png][]

### 3、实现连接 ###

这里我们需要实现上述填写的URL对应的接口，如http://48.r9.cpolar.top/wx/check

此时我们需要做的就是在项目controller层定义该接口并按照上述规则检查后返回结果

@Slf4j
    @Controller
    @ResponseBody
    @RequestMapping("/wx")
    public class WxController {
    
        @GetMapping("/check")
        public String check(@RequestParam("signature")String signature,
                            @RequestParam("timestamp") String timestamp,
                            @RequestParam("nonce") String nonce,
                            @RequestParam("echostr") String echostr) {
            log.error(echostr);
    // 为了方便此处我直接返回
            return echostr;
        }
    }

### 4、内网穿透 ###

![934e2b33d9b146dfa52a6f7e24050e78.png][]

在上述代码实现后，我们启动项目可用访问127.0.0.1:port/wx/check?queryString就可用在本地访问，但是在第2步中我们提交了URL后是微信服务器会访问该接口，但是该接口却不能被外网访问，我们可用通过内网穿透来让微信访问到我们项目端口下的/wx/check接口，具体如下[【计网】傻瓜式安装cpolar内网穿透\_西瓜霜润喉片的博客-CSDN博客![icon-default.png?t=N7T8][icon-default.png_t_N7T8]https://blog.csdn.net/qq\_61903414/article/details/133819946?spm=1001.2014.3001.5501][cpolar_-CSDN_icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_blog.csdn.net_qq_61903414_article_details_133819946_spm_1001.2014.3001.5501]在进行配置后，我们即可获得对应的域名+/wx/check填写到第2步对应的URL中

### 5、OAuth2.0网页授权 ###

此时我们还需要将页面往下滑动找到如下行

![ffe190294e5c4975b73e0a37577ca127.png][]

并将不带http://的域名填写进去，最后启动项目，在上述第2步URL配置中配置后提交准备工作即可完成即可，要注意上述第二步需要加http://

## 三、代码实现 ##

### 1、准备依赖 ###

在后续的实现中我们需要生成二维码，所以我们需要用到二维码生成的工具，此处使用hutool

<dependency>
      <groupId>com.google.zxing</groupId>
      <artifactId>core</artifactId>
      <version>3.3.3</version>
    </dependency>
    
    <dependency>
      <groupId>cn.hutool</groupId>
      <artifactId>hutool-all</artifactId>
      <version>5.7.10</version>
    </dependency>

### 2、生成二维码用户扫码同意授权获取code并携带code重定向到指定的回调路由做进一步处理 ###

此处我们需要先生成二维码，该二维码需要跳转到[https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect\_uri=uri&response\_type=code&scope=scope&state=STATE\#wechat\_redirect][https_open.weixin.qq.com_connect_oauth2_authorize_appid_appid_redirect_uri_uri_response_type_code_scope_scope_state_STATE_wechat_redirect]

所以我们将该url存入二维码中，用户扫码二维码即可进行授权。但是我们不能直接使用上述url，我们需要进行参数的修改![c91956460b8c484496521ceb8e73bcbe.png][]如图可知上述url中需要进行修改的参数有appid、redirect\_uri与scope，其中APPID、scope都是固定scope一般使用snsapi\_userinfo ，所以我们可用直接对路由进行封装。后续对应的url也在如下类中，后续会详细提及![3b894d2d46e04b3f90dd8fd7d5919b62.png][]

@Slf4j
        public class WxUtil {
            public static final String APP_ID = "";  
            public static final String APP_SECRET = "";
            public static final String ROOT_URL = "http://www.ii.com";  // 域名
    
            /**
            * 二维码中包含的url获取code并携带code重定向到redirectUrl
            * @param redirectUrl
            * @return
            */
            public static String CODE_URL(String redirectUrl) {
                return "https://open.weixin.qq.com/connect/oauth2/authorize?appid="
                    + WxUtil.APP_ID
                    + "&redirect_uri="
                    + redirectUrl
                    + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
            }
    
            /**
            * 根据code获取token的url与参数
            * @param code
            * @return
            */
            public static final String TOKEN_URL(String code) { 
                return "https://api.weixin.qq.com/sns/oauth2/access_token?appid="
                    + WxUtil.APP_ID + "&secret=" + WxUtil.APP_SECRET
                    + "&code=" + code + "&grant_type=authorization_code";
            }
    
            /**
            * 跟去token获取用户信息的url
            * @param token
            * @param openid
            * @return
            */
            public static String USERINFO_URL(String token, String openid) {
                return "https://api.weixin.qq.com/sns/userinfo?access_token="
                    + token + "&openid="
                    + openid + "&lang=zh_CN";
            }
        }

此时我们可用通过上述CODE\_URL方法获取url并存于二维码中让用户扫码进行授权，所以我们需要生成二维码并传给前端

@GetMapping("/code")
        public void code(HttpServletRequest request, HttpServletResponse response) throws IOException {
            // 1. 重定向url 回调地址
            String redirectUrl = URLEncoder.encode(WxUtil.ROOT_URL + "/wx/callback","UTF-8");
    
            // 2. 生成接口url
            String url = WxUtil.CODE_URL(redirectUrl);
            
            // 3. 生成二维码
            response.setContentType("image/png");
            QrCodeUtil.generate(url,300,300,"jpg", response.getOutputStream());
        }

这个时候当用户点击微信登录时就会请求该接口获取到二维码，用户扫码授权后，就会携带code调用回调接口，所以我们需要实现上述定义的回调接口redirectUrl

### 3、定义回调接口 ###

在该回调接口里面我们需要做的是首先根据参数code去获取access\_token

### 4、根据code获取access\_token ###

我们需要拿着code向[https://api.weixin.qq.com/sns/oauth2/access\_token?appid=APPID&secret=SECRET&code=CODE&grant\_type=authorization\_codeg][https_api.weixin.qq.com_sns_oauth2_access_token_appid_APPID_secret_SECRET_code_CODE_grant_type_authorization_codeg]

该接口去获取access\_token，所以我们需要发起http请求，具体的URL在上述WxUtil中进行了封装，只需要传入code即可获取最终的URL。由于该URL返回的是这样的数据，我们可用定义一个对应的Java类去接收他

@Data
    public class TokenInfo {
        // 网页授权接口调用凭证,注意：此access_token与基础支持的access_token不同
        private String access_token;
        // access_token接口调用凭证超时时间，单位（秒）
        private String expires_in;
        // 用户刷新access_token
        private String refresh_token;
        // 用户唯一标识符
        private String openid;
        // 用户授权的作用域，使用逗号（,）分隔
        private String scope;
    }

![945fac6bf2764f6ababba43227f23407.png][]

### 5、根据access\_token获取用户信息 ###

此时我们就可以拿着access\_token中的信息去访问[https://api.weixin.qq.com/sns/oauth2/refresh\_token?appid=APPID&grant\_type=refresh\_token&refresh\_token=REFRESH\_TOKEN][https_api.weixin.qq.com_sns_oauth2_refresh_token_appid_APPID_grant_type_refresh_token_refresh_token_REFRESH_TOKEN]

来获取对应的用户信息，在上述WxUtil中也对该URL进行了封装，我们只需要传入所需的参数token与openid即可。访问该URL如果响应正确则会返回对应的用户数据，我们也可用定义一个Java类来接收他

@Data
    public class UserInfo {
        private String openid;
        private String nickname;
        private int sex;
        private String language;
        private String city;
        private String headimgurl;
        private String province;
        private String country;
        private String[] privilege;
        @JsonIgnore
        private String unionid;
    }

public static UserInfo getUser(String code) throws IOException {
            // 1. 构造Http请求获取access_token
            CloseableHttpClient httpClient = HttpClients.createDefault();
            HttpGet httpGet = new HttpGet(TOKEN_URL(code));
            HttpResponse response = httpClient.execute(httpGet);
            String result = "";
            if (response.getStatusLine().getStatusCode() == 200) {
                result = EntityUtils.toString(response.getEntity(),"UTF-8");
            }
            log.info("获取到token:{}",result);
    
            // 2. 解析获取到的token
            ObjectMapper objectMapper = new ObjectMapper();
            TokenInfo tokenInfo = objectMapper.readValue(result,TokenInfo.class);
    
            // 3. 根据access_token中的token与openid获取用户信息
            HttpGet httpGet1 = new HttpGet(USERINFO_URL(tokenInfo.getAccess_token(),tokenInfo.getOpenid()));
            HttpResponse response1 = httpClient.execute(httpGet1);
            if (response.getStatusLine().getStatusCode() == 200) {
                result = EntityUtils.toString(response1.getEntity(),"UTF-8");
            }
            log.info("获取到userinfo:{}",result);
    
            // 4. 解析用户信息
            UserInfo userInfo = objectMapper.readValue(result,UserInfo.class);
            return userInfo;
        }

### 6、登录成功后存储会话信息 ###

此时我们就获取到了用户的信息![eafe4b3ef69d454d8996200384a7e76c.png][]

![aa6c5ff8bce2491a990c1e097eb3707a.png][]

获取到信息后我们可用通过redis或者session或者JWT存储会话信息

@RequestMapping("/callback")
        public String callback(String code, String state, HttpServletResponse response, HttpServletRequest request, HttpSession session) throws IOException {
            // 1. 获取微信用户数据
            UserInfo user = WxUtil.getUser(code);
    
            // 2. 存储会话信息 token
            System.out.println("登录成功" + user.toString());
    
            // 3. 返回
            return objectMapper.writeValueAsString(user);
        }

## 四、结果演示 ##

最后我们只需要简单的前端代码：只有一张二维码

<!DOCTYPE html>
    <html>
    <head>
        <title>Generate QR Code</title>
    </head>
    <body>
    <img id="qrcode" src="/wx/code" alt="QR Code">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
    </script>
    </body>
    </html>

[6bc6a984b6e44e58ab5485444bfb8cfb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/86321bc0cdc14ff3b663f55198fae09c.png
[icon-default.png_t_N7T8]: https://csdnimg.cn/release/blog_editor_html/release2.3.6/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N7T8
[_ _ _qq.com_icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_developers.weixin.qq.com_doc_offiaccount_OA_Web_Apps_Wechat_webpage_authorization.html]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/ce52ab5668f64f90a19db0432d10dfa4.png
[_qq.com_icon-default.png_t_N7T8_icon-default.png_t_N7T8_http_mp.weixin.qq.com_debug_cgi-bin_sandbox_t_sandbox_login]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/cc327f173a714eb1a13825edd6cce75e.png
[675f1c05a27f4989beb1f928fc5e878b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/5107cc7318a1463288cdb49dbf6db241.png
[2641ee1b336041ccb2c351d70844a5eb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/7a55594db3454b5e9ce2671ad6e52d72.png
[e0371d3443f04567b87d547a2498f3f1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/83bb06cdd0b24dd38e244a9209f3a878.png
[934e2b33d9b146dfa52a6f7e24050e78.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/d53e3168dbf643d6bbf1d2011cf0712a.png
[cpolar_-CSDN_icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_blog.csdn.net_qq_61903414_article_details_133819946_spm_1001.2014.3001.5501]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/2ad3f31d3af3400aabac855a871d8902.png
[ffe190294e5c4975b73e0a37577ca127.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/3c8dc450f14749e783c35f40436017fb.png
[https_open.weixin.qq.com_connect_oauth2_authorize_appid_appid_redirect_uri_uri_response_type_code_scope_scope_state_STATE_wechat_redirect]: https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect
[c91956460b8c484496521ceb8e73bcbe.png]: https://img-blog.csdnimg.cn/c91956460b8c484496521ceb8e73bcbe.png
[3b894d2d46e04b3f90dd8fd7d5919b62.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/72c6b712220247c383d26f8678543522.png
[https_api.weixin.qq.com_sns_oauth2_access_token_appid_APPID_secret_SECRET_code_CODE_grant_type_authorization_codeg]: https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
[945fac6bf2764f6ababba43227f23407.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/17edc8e144524fffa5b22a9d34938e30.png
[https_api.weixin.qq.com_sns_oauth2_refresh_token_appid_APPID_grant_type_refresh_token_refresh_token_REFRESH_TOKEN]: https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
[eafe4b3ef69d454d8996200384a7e76c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/a6a37ff8f39249588444a63cb13d49a2.png
[aa6c5ff8bce2491a990c1e097eb3707a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/899d2bad92ba4e61913aa3655c9f3726.png