手把手教你微信扫码登录 |
您所在的位置：网站首页 › web扫码登录如何实现 › 手把手教你微信扫码登录 |
|
最近做的需求涉及到了PC微信扫码登录，现在需求做完了总结一下这个开发过程中遇到的问题，附上微信官方文档辅助理解 👉 微信登录 1、做什么效果？ 页面弹框中放二维码 微信扫描授权成功后打开一个新标签页2、约定的方案 调用后端接口获得微信登录二维码 扫描成功之后，后端返回js脚本执行前端定义好的方法 PC微信扫码登录的实现使用接入 SDK 的方式来将二维码嵌入到页面中 // 创建微信登录的对象 new WxLogin({ self_redirect: true, // 是否在iframe内跳转 redirect_uri id: 'wechat-login', // 希望二维码嵌入容器的 id appid: 'appid', scope: 'snsapi_login', redirect_uri: '扫码成功后跳转的地址', href: 'data:text/css;base64,LmxvZ2luUGFuZWwubm9ybWFsUGFuZWwgLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5xcmNvZGUubGlnaHRCb3JkZXIgew0KICB3aWR0aDogMjAwcHg7DQogIGhlaWdodDogMjAwcHg7DQp9DQo=', }) 💡 这里需要说一下，redirect_uri就是微信扫码成功后跳转的地址，那为什么约定的方案还要给后端我们定义好的 js 脚本呢？因为希望微信扫码之后的动作是前端来控制的（包括成功后关闭弹窗，打开新页签这些动作） 遇到的问题1、href: 自定义样式链接，第三方可根据实际需求覆盖默认样式。但是实际引入项目中写好的样式文件没有生效，文档里没有仔细说，直到我翻到了一行小字：觉得默认二维码过大，可以提供相关css样式文件，并把链接地址填入href字段（注意 ： 是链接地址，必须是公网地址），研究了一通发现 href 除了放链接还可以将写好的样式文件进行 base64 转码，像👆代码中一样也可以实现修改二维码的样式。上面是主要参数，还有更多参数可以参考微信官方文档 2、postMessage: 嵌在页面上的二维码其实是一个iframe，那当扫描成功之后，后端是在这个 redirect_uri 页面返回的 js 脚本，也就是在 iframe 里面来执行我们提供的脚本，实现和父窗口的通信就需要使用到 postMessage。 // 给后端提供的脚本 (function () { window.parent.postMessage({ msg: 'success' }, '*') })() // 接收message window.addEventListener('message', function(event) { // 拿到event做对应的操作 }, false) |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |