文章目录
1. 微信扫码登录开发文档
首先仔细阅读 微信扫码登录开发文档
微信扫码登录比钉钉扫码登录坑稍微多一点,但是也最终必将其解决。可以看下我的钉钉扫码登录流程 vue 钉钉授权第三方WEB网站扫码登录功能
申请AppID,AppSecret,配置回调地址
登录微信开发平台 --> 管理中心 --> 网站应用,点击查看 查看申请的信息
AppID,AppSecret
配置回调地址
不要http!!!
2. 微信扫码登录方式
扫码登录有两种方式:
①:跳转到大黑屏界面进行扫码登录,像京东,知乎这种大型网站都是采用的这种方式
②:把微信登录二维码嵌入到网页中进行登录。这样可以自定义一些样式,例如二维码的大小、是否有标题等,下面是嵌入式的效果如下,~~~~这种效果比较符合设计的需求一点。
3. 微信扫码登录代码
<template>
<div>
<div id="wx_login_container" style="height: 300px"></div>
</div>
</template>
<script type="text/javascript" src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script>
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() //获取微信的登录二维码
}
}
</script>
<style lang="scss" scoped>
.wx_login_container {
height: 300px;
}
</style>
官方文档字段说明
用户同意和拒绝效果
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,