vue 微信扫码登录嵌入方式及开发踩的坑点

您所在的位置：网站首页 › 在电脑微信怎么扫二维码图片和文字 › vue 微信扫码登录嵌入方式及开发踩的坑点

vue 微信扫码登录嵌入方式及开发踩的坑点

2024-07-12 08:52| 来源: 网络整理| 查看: 265

文章目录 1. 微信扫码登录开发文档申请AppID，AppSecret，配置回调地址 2. 微信扫码登录方式3. 微信扫码登录代码4. 使用 href 更改内嵌的样式5. 坑点1：redirect_uri 参数错误6. 坑点2：测试环境没有域名，只有ip情况测试扫码登录7. 坑点3：内嵌式微信扫码登录跳转页面大小错误

1. 微信扫码登录开发文档

首先仔细阅读微信扫码登录开发文档

微信扫码登录比钉钉扫码登录坑稍微多一点，但是也最终必将其解决。可以看下我的钉钉扫码登录流程 vue 钉钉授权第三方WEB网站扫码登录功能

申请AppID，AppSecret，配置回调地址

登录微信开发平台 --> 管理中心 --> 网站应用，点击查看查看申请的信息

在这里插入图片描述 AppID，AppSecret

配置回调地址不要http！！！在这里插入图片描述

2. 微信扫码登录方式

扫码登录有两种方式：

①：跳转到大黑屏界面进行扫码登录，像京东，知乎这种大型网站都是采用的这种方式在这里插入图片描述 ②：把微信登录二维码嵌入到网页中进行登录。这样可以自定义一些样式，例如二维码的大小、是否有标题等，下面是嵌入式的效果如下，~~~~这种效果比较符合设计的需求一点。

3. 微信扫码登录代码 export default { data() { return {} }, methods: { get_wx_qrcode() { //从微信的开发文档不难看出回调域名需要经过encodeURIComponent处理 var obj = new WxLogin({ self_redirect: false,//扫码后默认重新打开的回调地址，不是当前页打开 id: 'wx_login_container', appid: 'wxe19e3e2415exxxxx', scope: 'snsapi_login', redirect_uri: encodeURIComponent( 'http://www.baoxiu.cn/#/bindAccount'//配置自己申请的回调地址 ), state: Math.ceil(Math.random() * 1000), style: 'black', href:'', } }, mounted() { this.get_wx_qrcode() //获取微信的登录二维码 } } .wx_login_container { height: 300px; }

官方文档字段说明

在这里插入图片描述

用户同意和拒绝效果在这里插入图片描述

4. 使用 href 更改内嵌的样式

内嵌默认效果是这样的，如果不想要标题，或者把设置二维码的大小样式，可以通过href去设置在这里插入图片描述

思路就是把如下的样式，通过base64加密放到href参数中。 base64 转换的地址

.impowerBox .qrcode {width: 240px;margin-top:25px;border:0} .impowerBox .title {display: none;} .impowerBox .info {width: 240px;} .status_icon {display:none} .impowerBox .status {text-align: center;padding:0} .impowerBox .info{margin: -10px auto}

在这里插入图片描述

代码截图，通过href设置去控制内嵌的微信登录二维码的样式。

在这里插入图片描述

5. 坑点1：redirect_uri 参数错误

在这里插入图片描述

导致这种问题的原因就是后台配置的回调地址和前端的 redirect_uri 存在问题。

解决方案：

① ：在开放平台设置好回调地址，例如地址是 www.baoxiu.cn 那么在生成二维码的时候回调只能写该域名下的地址（如：http://www.baoxiu.cn/#/bindAccount） ②：在申请二维码页面回调地址(你的redirect_uri) 还必须加上http或者https，还必须进行转码操作使用encodeURIComponent进行转码。或者你去其他转码网站转好，复制上去

redirect_uri: encodeURIComponent('http://www.baoxiu.cn/#/bindAccount'),

③：还有回调地址不能跟端口号如：http://www.baoxiu.cn:80/callback 这样是不行的

6. 坑点2：测试环境没有域名，只有ip情况测试扫码登录

很多小伙伴申请了 appid 一般都会有一个域名去配置回调域名，因为申请appid是需要网站备案的。但是部分小伙伴测试是没有申请域名。但是测试扫码登录使用ip又不好整怎么办。过来人教你骚操作…

①：使用host配置一个虚拟的域名一般都是在自己本机的这个目录下 C:\Windows\System32\drivers\etc\hosts 打开hosts文件配置一个本地的域名。如我的

192.168.1.76 www.baoxiu.cn

②：接着上一步：你配置完，可能会报错 Invalid Host header vue-cli3中，修改如下配置，并记得重启项目运行

module.exports = { devServer: { port: 80, disableHostCheck: true } }

③：修改项目启动端口为80，因为默认的端口是80端口。并记得重启项目运行，通过扫码成功后返回的/bindAccount 地址并且返回了code和state参数在这里插入图片描述 ④：后台配置的回调地址依然是 www.baoxiu.cn 切记，这里不是ip了。这个坑主要是讲怎么把ip配成域名去扫码登录。

7. 坑点3：内嵌式微信扫码登录跳转页面大小错误

在这里插入图片描述

内嵌式微信扫码登录成功后跳转页面的容器是这个二维码的div 而不是以浏览器为容器，出现一下问题。

解决办法：

self_redirect 否 true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，false：手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。 so，把 self_redirect 参数设置为 false 即可

self_redirect: false,

【本文地址】

vue 微信扫码登录嵌入方式及开发踩的坑点

vue 微信扫码登录嵌入方式及开发踩的坑点

今日新闻

推荐新闻