vue怎么实现登录,前端扫码登录怎么实现
文章目录1 .微信扫码注册开发文件申请AppID、AppSecret、 设置回叫地址2 .微信扫码注册码3 .使用微信扫码注册码href更改内嵌模式5 .凹点1:redirect_uri参数错误6 .凹点2 1 .微信扫码注册开发文件 首先，请仔细阅读微信扫码的登录开发文档 微信扫码注册比钉钉扫描注册坑多一点，但最终会解决的。 你可以看到我的订书机的扫码注册过程。 vue订书机允许第三方网站的扫码注册功能 申请AppID、AppSecret，设置回叫地址登录微信开发平台——管理中心——网站APP应用软件，点击查看申请信息 AppID，AppSecret 配置回调地址，使其不进行http！ 2 .微信扫码注册方式扫描注册有两种方式。 ①)跳转到大屏幕界面扫码注册。 就像京东一样，我知道这样大规模的网站正在被采用 ②)在网页上嵌入微信注册二维码进行注册。 这样，可以定制几个样式，包括二维码的大小、有无标题等。 以下是嵌入式效果: ~~~这个效果符合设计的需要。 3 .微信扫码注册码templatedivdivid=' wx _ log in _ container ' style=' height 3360300 px '/div/div/template script w xlogin.js '/scriptscriptexportdefault { data (} { return { } methods : { get _ wx _ QR code (可从/微信的开发文件中找到) 回调域名必须在encodeURIComponent中处理varobj=newXlogin ) self_redirect3360false在当前页面中标识为: ' wx _ log in _ containionxxxxx
'，scope: 'snsapi_login '， redirect _ uri :编码组件(' http://www.Bao xiu.cn/#/bind account (//bind account ) ) ) ) 65 style: 'black '，href: '，}，mounted () { this.get _ wx _ QR code }//we chat的登录二维码(/scriptststylelalaled )
用户同意和拒绝的效果
4 .使用4.href更改嵌入样式的嵌入默认值就是这样的效果。 如果不想要标题，或者要将设置设置为二维码大小，可以通过href进行设置
想法是用base64加密以下样式并放入href参数中。 base64转换的地址
. impowerbox.QR code { width :240 px； 边距-顶部：25 px； border :0 }.impowerbox.title { display : none； }.impowerbox.info { width :240 px； }.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.Bao xiu.cn/#/bind account )
)申请二维码页面的回叫地址(你的redirect_uri )中还必须添加http或者https，还必须进行转码操作
使用编码组件进行转码。 请去其他转码网站复印
redirect _ uri :加密组件(http://www.Bao xiu.cn/#/bind account ) )此外，回调地址是端口号http://www.babar
6 .坑点2 :测试环境中没有域名。 如果只通过ip状况测试扫描登录众多合作伙伴并申请appid，一般会有构成回调域名的域名。 因为申请appid需要网站备案。 但是，一些伙伴测试没有申请域名。 但是，在测试扫描登录中使用ip又不好。 有人来教你骚扰…
:使用主机配置虚拟域名
通常，打开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 .坑点三：嵌入式微信扫码登录跳转页面大小错误
成功登录嵌入式微信扫码后，在此二维码的div而不是浏览器中，跳转页面的容器出现了以下问题：
解决方案：
self_redirectnotrue :在手机上单击确认登录后，可以在iframe中跳转到redirect_uri。 false :在手机上单击确认登录后，可以在top window中跳转到redirect_uri。 默认值为false。
只要将so，self_redirect参数设定为false即可
self_redirect: false，