网页使用微信扫码登录-第一步在微信开发平台登录进去之后再管理中心—— 创建网站应用。填上网站应用的基本信息之后提交审核。审核通过后会有AppID和secret。做好保存。注：这里的回调域名很重要，请...

第一步
在微信开发平台登录进去之后再管理中心——>创建网站应用。填上网站应用的基本信息之后提交审核。审核通过后会有AppID和secret。做好保存。

注：这里的回调域名很重要，请填XXX.XXX.XXX格式。并尽量填写互联网上的域名，测试域名如果没报错也可以用。

第二步
在需要扫码登录的页面添加下面代码


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

<script type="text/javascript" src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

var obj = new WxLogin({
       self_redirect: false,
       id: "login_container",
       appid: "从开放平台获取的AppID",
       scope: "snsapi_login",
       redirect_uri: encodeURIComponent("填写登录成功后你要跳转的页面"),
       state: "回调参数可随意填",
       style: "",
       href:""
   });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
如果需要修改二维码的样式，步骤如下：
1、对css代码base64加密

2、href参数格式：href: "data:text/css;base64,base64加密后的字符串

href:"data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm8ge3dpZHRoOiAyMDBweDt9Ci5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30gCi5pbXBvd2VyQm94IC5zdGF0dXN7cGFkZGluZzogMH0="
1
注：跳转的URL页面中的域名要和开放平台填的域名相同，开放平台的域名审核通过之后可以修改。顶级域名相同不起作用，只有二级域名相同才可以，也就是 www.example.com 要相同，而不是example.com相同，如果有人用顶级域名成功获取的话，请分享一下！

第三步
用户扫了上述二维码之后，点击登录按钮后，页面会跳转到redirect_uri填写的内容中，并带上code和state参数。通过code获取access_token。
获取URL：https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
这一步最好放在服务器端执行，以保证secret的保密性。前端要是调用的话，会有跨域问题、打印错误问题。反正我只遇到这种问题的。
返回的数据有

————————————————
版权声明：本文为CSDN博主「Swn_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Swn__/article/details/105076606