在页面中嵌入二维码,这种方式看起来跟专业一些。要想实现这种方式的扫码登录,第一步仍是先完成回调地址。完成方式和上一节的代码完全一样,示意代码如下:
/**
* @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 {
// ......
}
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<div id="login_container"></div>
<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>
代码说明:
样式具体如下:
.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/