微信扫码登录_JAVA

╰半橙微兮° 2023-02-14 10:12 23阅读 0赞

**一、需求**

在PC端的登录页面加个微信扫码的按钮，点击按钮弹出二维码，实现微信扫码登录网站的功能。如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ1NjQ2Ng_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ1NjQ2Ng_size_16_color_FFFFFF_t_70 1][]

**二、调研**

扫码登录属于微信开放平台提供的API,不是微信公众平台。这里需要注册等配置，暂不赘述。

同时也要注意，如果你也需要微信公众号内的登录授权操作，那么用户唯一标识不应该是openId，而应该是unionId，因为微信公众平台和微信开放平台的openId是不一样的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ1NjQ2Ng_size_16_color_FFFFFF_t_70 2][]

**三、开始开发**

1.后台新增生成二维码图片的接口，因为我这里扫码后跳转的地址不是固定的，所以也用到了这个state参数，如果固定可以写死这个跳转地址。

/**
         * 返回二维码
         *
         * @param state 扫码成功后跳转的链接
         * @return
         */
        @ResponseBody
        @RequestMapping(value = "/getQrCode", method = RequestMethod.GET)
        public String getQrCode(String state) {
            try {
                state = StringUtils.isBlank(state) ? "state" : state;
                //redirectUri 是扫码回调的地址 下一个方法oauth
                String encodeUri = URLEncoder.encode(redirectUri, "UTF-8");
                String url = "https://open.weixin.qq.com/connect/qrconnect?" +
                        "appid={appId}&redirect_uri={redirect_uri}&response_type=code&scope=snsapi_login&state={state}#wechat_redirect";
                String urlReplace = url.replace("{appId}", appId).replace("{redirect_uri}", encodeUri)
                        .replace("{state}", state);
                log.info("-----微信开放平台扫码登录url-----" + urlReplace);
                return urlReplace;
            } catch (Exception e) {
                e.printStackTrace();
                return null;
            }
        }

2.前端调用接口，打开二维码的页面

//wx_login 是按钮的id
     $("#wx_login").on("click", function () {
                $.ajax({
                    url: '二维码接口/getQrCode',
                    async: true,
                    dataType: 'json',
                    type: 'get',
                    success: function (data) {
                        location.href = data;
                    }
                });
            });

3.后端新增扫描二维码回调的方法，其中主要做了：

**①：微信后台回调该方法，传入code参数，用来获取 accessToken和openId**

**②：调用微信授权接口即getUserAuthInfo，获取 accessToken和openId**

请求方式：GET

URL:   https://api.weixin.qqcom/sns/oauth2/access\_token?appid=\{APP\_ID\}&secret=\{APP\_SECRET\}&code=\{CODE\}&grant\_type=authorization\_code

**③：调用微信用户信息接口即getWxAuthUser，获取用户的unionId,昵称等信息。**

请求方式：GET

URL:  https://api.weixin.qq.com/sns/userinfo?access\_token=\{ACCESS\_TOKEN\}&openid=\{OPENID\}&lang=zh\_CN

/**
         * pc扫码登录跳转
         *
         * @return
         */
        @RequestMapping(value = "/oauth", method = RequestMethod.GET)
        public RedirectView oauth(HttpServletRequest request, HttpServletResponse response) {
            String code = request.getParameter("code");
            String state = request.getParameter("state");
            //appId appSecret 在微信开放平台找到
            Map<String, String> userAuthMap = userInfoService.getUserAuthInfo(code, appId, appSecret);
            String accessToken = userAuthMap.get("access_token");
            String openid = userAuthMap.get("openid");
            WxAuthUser wxAuthUser = WechatUtil.getWxAuthUser(accessToken, openid);
            if (wxAuthUser == null) {
                return null;
            }
            //你的登录逻辑
            String jsonResult = doLogin(wxAuthUser);
            log.info("-----微信开放平台扫码跳转url-----" + state);
            RedirectView redirectView = new RedirectView(state);
            redirectView.setStatusCode(HttpStatus.MOVED_PERMANENTLY);
            return redirectView;
        }

最后：总体来说流程比较简单，所以代码贴的不是很全，但是都有讲到。

有一些注意的点比如**微信开放平台需要绑定公众号**、**回调域名**等配置。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ1NjQ2Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200602093409480.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ1NjQ2Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ1NjQ2Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200602093512727.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ1NjQ2Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ1NjQ2Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200602094124846.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ1NjQ2Ng==,size_16,color_FFFFFF,t_70