第三节 嵌入页面实现微信扫码登录

亮子 2022-05-14 00:49:37 17755 0 0 0

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/

图片alt