前端实现 微信扫码登录网站 pc端(二维码嵌套页面) 超详细，包会
一、准备工作
本人申明：本案例使用到的appid和AppSecret都是无效的
appid：应用唯一标识，在微信开放平台提交应用审核通过后获得
AppSecret：在微信开放平台提交应用审核通过后获得
二、引入地址(有两种引入方式)
1.在根目录html文件引入，既index.html
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>2.通过js添加节点
const script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
document.body.appendChild(script)三、在需要使用微信登录的地方实例以下 JS 对象
var obj = new WxLogin({self_redirect: false, //默认为false(保留当前二维码) true(当前二维码所在的地方通过iframe 内跳转到 redirect_uri)id: "login_container", //容器的idappid: "wxa3fdea5a3090f", //应用唯一标识，在微信开放平台提交应用审核通过后获得scope: "snsapi_login", //应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可redirect_uri: "https://www.xiang.com//client/index.html", //扫完码授权成功跳转到的路径// state: "", //用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止 csrf 攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加 session 进行校验style: "white", //提供"black"、"white"可选，默认为黑色文字描述href: "data:text/css;base64,LmxvZ2luUGFuZWwubm9ybWFsUGFuZWwgLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5xcmNvZGUubGlnaHRCb3JkZXIgew0KICB3aWR0aDogMTc0cHg7DQogIGhlaWdodDogMTc0cHg7DQogIG1hcmdpbi10b3A6IDA7DQogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7DQp9DQouaW1wb3dlckJveCAuaW5mbyB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQoud2ViX3FyY29kZV90eXBlX2lmcmFtZSB7DQogIHdpZHRoOiAxNzRweDsNCn0NCg==" //自定义样式链接，第三方可根据实际需求覆盖默认样式});注意事项：
如果二维码出来，但是跳转失败，一定要看看浏览器是否开启了拦截。
href 必须是样式链接/base64格式，转码地址(css文件转码)：https://www.lddgo.net/convert/filebasesix
redirect_uri 重定向的地址必须是白名单地址
这里附上我自己的css文件地址(效果参考页尾)：
data:text/css;base64,LmxvZ2luUGFuZWwubm9ybWFsUGFuZWwgLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5xcmNvZGUubGlnaHRCb3JkZXIgew0KICB3aWR0aDogMTc0cHg7DQogIGhlaWdodDogMTc0cHg7DQogIG1hcmdpbi10b3A6IDA7DQogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7DQp9DQouaW1wb3dlckJveCAuaW5mbyB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQoud2ViX3FyY29kZV90eXBlX2lmcmFtZSB7DQogIHdpZHRoOiAxNzRweDsNCn0NCg==.loginPanel.normalPanel .title {display: none;
}
.qrcode.lightBorder {width: 174px;height: 174px;margin-top: 0;box-sizing: border-box;
}
.impowerBox .info {display: none;
}
.web_qrcode_type_iframe {width: 174px;
}
四、获取 code
授权成功以后当前code会拼接在重定向地址后面列：
https://www.xiang.com//client/index.html?code=021NoBFa1u5ORE0600Ja1dDubb2NoBFT&state=undefined
通过两种方法获取：
window获取
window.location.search.substring(6).split('&')[0]路由监听获取
watch: {$route(){if(this.$route.query.code!=undefined){console.log(this.$route.query.code,this.$route.query.state);}}
},五、通过 code 获取access_token
注：这一步可以给后端操作，把获取到的code通过调用接口给予后端，后端拿到数据以后，返回登录状态跟字段，前端也可以获取到所有的状态以后再返回给后端(但是这样没有必要，因为还是要给后端，后端需要筛选字段返回给我们)
https://api.weixin.qq.com/sns/oauth2/access_token?
appid=APPID 应用唯一标识，在微信开放平台提交应用审核通过后获得
&secret=SECRET 应用密钥AppSecret，在微信开放平台提交应用审核通过后获得
&code=CODE 填写第四步获取的 code 参数
&grant_type=authorization_code 填authorization_code axios({ 'url': `https://api.xaing.qq.com/sns/oauth2/access_token?appid=wxa3fdea55b5a3090f&secret=089ba1c53233913f94c0381aa53c1d8e&code=CODE&grant_type=authorization_code`,'method': 'get'})正确返回：
{ "access_token":"ACCESS_TOKEN", //接口调用凭证"expires_in":7200, //access_token接口调用凭证超时时间，单位（秒）"refresh_token":"REFRESH_TOKEN", //用户刷新access_token"openid":"OPENID", //授权用户唯一标识"scope":"SCOPE", //用户授权的作用域，使用逗号（,）分隔"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL" //当且仅当该网站应用已获得该用户的 userinfo 授权时，才会出现该字段。
}最后附上案例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="login_container"></div>
</body><script src="https://downs.yaoulive.com/liveJs/axios.min.js"></script>
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script>var obj = new WxLogin({self_redirect: false,id: "login_container",appid: "wxa3fdea5a3090f",scope: "snsapi_login",redirect_uri: "https://www.xiang.com//client/index.html",// state: "",style: "white",href: "data:text/css;base64,LmxvZ2luUGFuZWwubm9ybWFsUGFuZWwgLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5xcmNvZGUubGlnaHRCb3JkZXIgew0KICB3aWR0aDogMTc0cHg7DQogIGhlaWdodDogMTc0cHg7DQogIG1hcmdpbi10b3A6IDA7DQogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7DQp9DQouaW1wb3dlckJveCAuaW5mbyB7DQogIGRpc3BsYXk6IG5vbmU7DQp9DQoud2ViX3FyY29kZV90eXBlX2lmcmFtZSB7DQogIHdpZHRoOiAxNzRweDsNCn0NCg=="});// 这一步可以直接调用接口返回给后端code，由后端来进行这一步if (window.location.search.substring(6).split('&')[0]) {axios({'url': `https://api.weixin.qq.com/sns/oauth2/access_token?appid=wxa3fdea5a3090f&secret=53233913f94c0381aa53c1d8e&code=${window.location.search.substring(6).split('&')[0]}&grant_type=authorization_code`,'method': 'get'})}</script></html>
前端实现 微信扫码登录网站 pc端(二维码嵌套页面) 超详细，包会相关推荐
- 微信扫描二维码登录网站---href设置二维码大小
苦逼之人,必有苦逼之处:来段代码提提神 微信文档中的参数说明是:href 说是填入一个自定义的样式链接: 我那个擦啊 :样式啥的文件都给弄好了 :结果微信这个二维码死活没有效果.百度出来的解决方案少之 ...
- jq将网页生成二维码插件 给网站内页添加手机扫码访问教程 给网站添加二维码教程 网站如何生成二维码
很多用户通过电脑访问了你的网站,可能某些他想手机查看,那么刚好用的这个功能,这个鹏仔简单写了下,电脑端屏幕大于1198的会显示二维码,小于则当做移动端或ipa隐藏不显示. 本次需要引入jq,如果你的站 ...
- php微信扫码登录业务(带参数二维码方式)
准备材料: 微信公众号-认证服务号,如果没有可以申请测试号 申请测试号链接https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showi ...
- 微信扫描PC端二维码跳转到小程序确认登录通过WebSocket来获取用户信息达到PC端登录
需求: 在pc端获取后端给的token值来生产二维码(这里后端给了我两个url:一个是二维码url,一个是ws的 url),用微信扫描二维码跳转到小程序写的确定登录页面(进行确定):然后在PC端使用W ...
- vue app扫PC端二维码登录
通过接口获取二维码唯一标识,例如:qrcodeId 通过 qrcodejs2插件生成 二维码(二维码内容就是 qrcodeId,具体根据APP 需要) 循环调用接口,查看扫码状态(app是否扫码确认登 ...
- 支付宝PC端二维码支付（沙箱环境）
一,准备工作 jar 获取以下内容: 1,APPID 2,支付宝网关 3,公钥 4,私钥 5,支付宝钱包账号密码 支付宝开放平台: https://openhome.alipay.com/platfo ...
- python 网站实现扫描二维码关注微信公众号，实现自动登陆
微信公众平台接口测试帐号:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 1,微信提供生成带参数的二维码的接口,参数就是唯 ...
- 最新在线客服系统php代码微信软件公众号小程序app二维码聊天网站源码
最新在线客服系统php代码微信软件公众号小程序app二维码聊天网站源码 管理界面 独家长期更新日志(欢迎反馈BUG) 1.添加手机端前后台声音提示 2.添加后台客户管理显示在线离线 3.添加清空当前对 ...
- 山东大学项目实训（四）—— 微信小程序扫描web端二维码实现web端登录
效果 点击登录后,显示二维码→打开"探古"(本项目)微信小程序,扫描二维码确认登录→web端登录成功 主要流程 因为本人主要负责web前端的开发,所以本文仅介绍web前端的实现方法 ...
最新文章
- python在线工具-在线 Python运行工具
- 学python找工作有用吗-为什么我不建议你通过 Python 去找工作？
- Redis:redis cluster的实现细节
- Windows 10——安装Snort_2_9_16
- [030] 微信公众帐号开发教程第6篇-文本消息的内容长度限制揭秘（转）
- android 排队系统设计,基于android银行排队叫号系统毕业设计论文+设计源码+答辩PPT...
- 浏览器看直播html5卡顿,win10自带浏览器看直播卡顿怎么解决_win10浏览器看直播一卡一卡修复方法-win7之家...
- JAVA项目一 家庭收支记账软件
- 三维空间直角坐标系转换（2）——改进七参数小旋转角的局限
- 前度字符串转数组_关于前度书籍的阿里云论坛用户知识和技术交流
- Spring系列之静态代理、动态代理、cglib代理与Spring AOP的处理
- API解读：StringTokenizer
- 【机器学习】数据归一化全方法总结：Max-Min归一化、Z-score归一化、数据类型归一化、标准差归一化等
- 杭电计算机考研复试经验帖
- 0.前端简历编写和面试前准备
- 属于拼多多的巴别塔正在构筑
- ppt图片设计素材下载网站搭建模板
- 马斯克究竟从特斯拉赚了多少钱？道翰天琼认知智能机器人平台API接口大脑为您揭秘-1。
- 数据采集与管理【13】
- 视频-sps,pps