![cover](https://img-blog.csdnimg.cn/img_convert/3256b39ed0ef4decb2ddc7c65e82d331.png)
vue3+vite微信二维码扫描登录教程,简单易懂,提供多种方法,写这个的时候也是遇到很多坑,记录并分享一下心得体会
vue3微信二维码登录
首先这里放上微信官方的文档:微信登录功能 / 网站应用微信登录开发指南 (qq.com)
我们先来简单说一下整体流程
其实大致流程文档中有,说白了就是这个图片
用文字的话来说就是:先请求code,然后通过你自己定义好的回调页面去拿code和state,
redirect_uri?code=CODE&state=STATE
我们要去实例化我下面封装好的东西,然后在iframe中去打开一个用于你展示二维码和整个扫描状态的网站
还要在上面定义一个容器去装这个二维码,也就是下面提到的容器ID
实例时候的一些参数直接看文档(没有几个参数,很方便看),我这里就不再把文档抄一遍了,直接上手开始写代码
下面在项目中开始干活
我们首先在vue中封装一个用来生成实例的API,这个直接拿过去用就行
const WxLogin = function (e) {
var r = "default";
!0 === e.self_redirect ? (r = "true") : !1 === e.self_redirect && (r = "false");
var n = document.createElement("iframe"),
i =
"https://open.weixin.qq.com/connect/qrconnect?appid=" +
e.appid +
"&scope=" +
e.scope +
"&redirect_uri=" +
e.redirect_uri +
"&state=" +
e.state +
"&login_type=jssdk&self_redirect=" +
r +
"&styletype=" +
(e.styletype || "") +
"&sizetype=" +
(e.sizetype || "") +
"&bgcolor=" +
(e.bgcolor || "") +
"&rst=" +
(e.rst || "");
(i += e.style ? "&style=" + e.style : ""),
(i += e.href ? "&href=" + e.href : ""),
(i += "en" === e.lang ? "&lang=en" : ""),
(n.src = i),
(n.frameBorder = "0"),
(n.allowTransparency = "true"),
(n.scrolling = "no"),
(n.width = "300px"),
(n.height = "400px");
var s = document.getElementById(e.id);
s.innerHTML = "", s.appendChild(n);
};
然后在进入你需要生成二维码页面的地方,在初始化的生命周期中执行下面的代码
const setWxerwma = () => {
var obj = new WxLogin({
id: '容器id',// 需要显示的容器id
appid: '你的appid',
scope: 'snsapi_login',
redirect_uri: encodeURIComponent('成功后的回调页面地址'),
state: new Date().getTime() + '' + Math.ceil(Math.random() * 1000), //建议使用时间戳+随机数,具体看你
style: 'style',// 提供"black"、"white"可选。二维码的样式
href: ''// 外部css文件url,需要https,或者使用base64编码的css
})
}
这样就可以生成一个二维码了,下面细说一下可能遇到的问题
首先是关于href这个属性,官方给的说法是这样
说实话,这种方式非常拉跨,我这边建议使用base64转码之后的css样式,这里附转码网站:在线加密解密 (oschina.net)
我们转码成功之后,一定要在前面加上 data:text/css;base64, 这句话,也就是这个样子
href: 'data:text/css;base64,你转码之后的CSS'
这样我们就可以去自定义里面的CSS样式了,css具体咋写,就看各位的具体需求是什么就好了
redirect_uri这个回调页面与vue主页面传参,调用vue主页面方法
这里如果后端能给你提供同域名的回调当然很好搞,我们直接就在这里用你自己的路由页面就行,但是如果不是同域名,那么我们就需要去写一个html去做回调和扫码成功失败的事情。
由于这里本质上是一个iframe页面,我们想要再去给我们的vue项目传参或者触发里面的方法就得在windows全局挂载一个方法去触发
//写在你需要触发的地方
window.codeSuc = function (data) {
console.log('登录成功了');
console.log('这是ifram向主页面传递的数据:' + data);
};
然后我们提供给后端的html文件可以这样触发和传递数据,这样也可以获取到code和state的值去做相应的操作(code和state是扫描之后回调页面中给你带的):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
这是一个二维码网站
<button onclick="codeSuc()">扫码成功</button>
</body>
<script>
// 获取URL中的参数
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
function codeSuc() {
console.log('扫码成功');
if (window.parent && window.parent.codeSuc) {
window.parent.codeSuc('你好啊,我来了');
// 获取code和state参数的值
var codeValue = getParameterByName('code');
var stateValue = getParameterByName('state');
// 打印结果
console.log('Code:', codeValue);
console.log('State:', stateValue);
} else {
console.error("扫码成功方法 方法未在父页面中找到");
}
}
</script>
</html>
实例化的那些事
最后,如果你不想用我封装的这个实例化方法,你自己去用官方的,这样引入也可以,不过实际投入生产还建议你拿下来放在自己项目里面,这几句话就放在我上面写的setWxerwma中,不过我这个封装的你直接用效果是一样的
const s = document.createElement('script')
s.type = 'text/javascript'
s.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
const wxElement = document.body.appendChild(s)
还有一种更简单粗暴的方法,下载相关依赖
你可以去下载这个版本的依赖:"vue-wxlogin": "^1.0.4",然后使用的话就非常简单粗暴,引入进入直接用,我觉得依赖太臃肿,懒得用了
<template>
<div id="app">
<wxlogin :state="wxState" :appid="appid" @login-success="onLoginSuccess" :scope="'snsapi_login'" :theme="'black'" :redirect_uri="redirect_uri" rel="external nofollow">
</wxlogin>
</div>
</template>
<script setup>
import wxlogin from 'vue-wxlogin'
</script>
附上npm网址:vue-wxlogin - npm (npmjs.com)
关于如何取到连接中 ? 后面的各个key,就比如www.baidu.com?aa=123中的aa,这是一个封装好的方法
const getParameterByName = (name, url) => {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
//调用
getParameterByName(key,url)
以上就是我对微信二维码登录整体流程的参考和见解,里面如果有发现一些需要补充的或者需要修改的地方请与我联系,感谢各位,大家一起学习进步,后续如果我还发现一些比较关键的,需要补充的东西也会加入这篇文章
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)