1、完成回调

在页面中嵌入二维码，这种方式看起来跟专业一些。要想实现这种方式的扫码登录，第一步仍是先完成回调地址。完成方式和上一节的代码完全一样，示意代码如下：

    /**
     * @description 微信登录授权成功后的回调地址
     * @author 军哥
     * @date 2022/5/13 23:13
     * @version 1.0
     */
    // https://shenmazong.com/login?code=021Sz3000jNiON15Sl000wO44m1Sz30d&state=STATE
    // https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
    @RequestMapping(value = "/wxLoginReturn")
    public void wxLoginReturn(HttpServletRequest request, HttpServletResponse response) throws IOException {

        // ......
    }

2、在回调页面引入js库

<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

3、添加dom组件

<div id="login_container"></div>

4、添加js代码

        <script type="text/javascript">
            var obj = new WxLogin({
                self_redirect:false,
                id:"login_container",
                appid: "wx8d23fb53",
                scope: "snsapi_login",
                redirect_uri: encodeURIComponent('https://shenmazong.com/wxLoginReturn'),
                state: "1211111",
                style: "black",
                href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm8ge3dpZHRoOiAyMDBweDt9Ci5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30g"
            });
        </script>

代码说明：

• self_redirect ： 表示是自身跳转还是父级页面跳转。因为这个控件会转换为iframe，所以一般都是设为false
• id ： 表示关联页面dom组件id，决定了二维码显示在什么位置
• appid ： 这个不用说了，就是appid，在网站应用详情里可以查看
• scodpe ： 这个是固定值snsapi_login
• redirect_uri ： 这个就是授权登录成功后，跳转的页面
• state ： 可以自定义个随机字符串
• style ： 这个是二维码显示的样式，目前只能是black或者是white
• href : 可以通过设置这个值来改变二维码显示的样式，他的值必须是base64编码的

样式具体如下：

.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display: none}
.impowerBox .status {text-align: center;}

把以上代码base64编码后，给href即可，格式如示例中一样。

base64在线编码工具地址如下，仅供参考：

# base64在线编码工具
https://www.matools.com/base64
https://base64.supfree.net/