记录--vue3问题:如何实现微信扫码授权登录?
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
一、需求
微信扫码授权,如果允许授权,则登录成功,跳转到首页。
二、问题
1、微信扫码授权有几种实现方式?
2、说一下这几种实现方式的原理是什么?
3、vue中的微信扫码授权登录,与uniapp和原生小程序的微信授权登录,它们之间有共同点吗?
TWO
解决问题,答案速览
一、网页跳转式
前端只需调用后端微信登录的接口即可。生成微信二维码、传递code参数等操作都在后端处理。
二、网页内嵌式
1、在public/index.html的head标签中引入wxLogin.js。
2、在template中设置一个内嵌二维码容器,可以自定义容器的样式。
3、创建WxLogin对象,配置必要参数,并通过id关联内嵌二维码容器。其中,参数redirect_uri和appid最关键,redirect_uri配置的是扫码授权成功后的重定向页面地址,在重定向页面可以拿到最最最重要的code参数。
4、在重定向页面通过code参数请求后端微信登陆的接口,获取access_token并存到本地,登录成功跳转首页。此处根据业务自定义逻辑即可。
// 在public/index.html的head标签中引入 <script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"> </script> <!-- 内嵌二维码容器 --> <div id="login_container"></div> // 获取code var obj = new WxLogin({ // 需要显示内嵌二维码的容器id id: 'login_container', // 应用ID appid: '', // 网页默认即可 scope: 'snsapi_login', // 授权成功后回调的url redirect_uri: encodeURIComponent(''), // 可设置为简单的随机数加session用来校验 state: Math.ceil(Math.random() * 1000), // 二维码的样式,提供"black"、"white"可选。 style: 'black', // 自定义样式链接 href: '' }) }
// 通过code请求接口获取access_token import { useRoute, useRouter } from 'vue-router' const router = useRouter() const route = useRoute let code = route.query.code let state = route.query.state if (code) { let codeForm = { code: code,// 关键 state: state, } // 调微信登录的后端接口 LoginApi(codeForm).then(res => { localStorage.setItem('access_token', res.data.token) router.push('home') })}
THREE
问题解析,知识总结
一、微信扫码授权登录有几种实现方式?
微信扫码授权登录有两种实现方式:网页外链式、网页内嵌式。
1、网页外链式
在选择带第三方登录方式时,点击微信登录,然后会跳转到一个新的微信扫码页面。当用户扫码允许授权登录后,就会自动关闭扫码页面,然后跳转到首页。
此方式可以算是后端处理。
2、网页内嵌式
在选择带第三方登录方式时,点击微信登录,会在当前页面的某处弹出一个内嵌的二维码。当用户扫码允许授权登录后,就会直接跳转到首页。
此方式可以算是前端处理,但这种方式比较推荐,用户体验比较好。
二、说一下这几种实现方式的原理是什么?
1、网页外链式
步骤一:用户进入登录页,在登录页选择微信登陆,前端调用后端微信登录的接口,后端会生成微信二维码,将地址返回给前端,前端响应后会在新页面打开这个二维码地址。
步骤二:用户用微信扫码,当授权成功后,就会自动重定向到后端扫码回调的接口。可以自动重定向到指定接口,是因为在生成二维码时,回调地址填的是后端接口地址,此处区别于网页内嵌式。
步骤三:后端会在重定向扫码回调接口中获取到code参数,再通过code参数获取到access_token、openid,进而获取用户信息,最终返回重定向首页地址给前端,登录成功跳转到首页。其中,地址内携带着access_token、openid、用户信息等参数,前端会保存这些参数到本地存储中。
2、网页内嵌式
步骤一:用户进入登录页,在登录页选择微信登陆,然后就会在内嵌二维码容器中显示出二维码。
步骤二:用户用微信扫码,当授权成功后,就会自动重定向到中转页。其中,中转页可以是注册页,也可以是当前登录页。
步骤三:前端在中转页获取当前路由对象的query信息,并通过请求接口将query信息中的code参数传给后端。
步骤四:后端就会通过code参数获取到access_token、openid,进而获取用户信息,当前端拿到这些参数后就会登录成功,跳转到首页,并保存到本地存储中。
三、vue中的微信扫码授权登录,与uniapp和原生小程序的微信授权登陆,它们之间有共同点吗?
1、uniapp的微信授权登录,主要借助uni.getUserProfile和uni.login这两个API实现。getUserProfile作用是获取用户授权,login作用是获取code参数。
2、原生小程序的微信授权登录,主要借助wx.getUserProfile和wx.login这两个API实现。getUserProfile作用是获取用户授权,login作用是获取code参数。
3、uniapp和原生小程序的微信授权登陆的原理,和vue中的微信扫码授权登录基本一致,掌握其一即可。
本文转载于:
https://juejin.cn/post/7267090979538141239
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
热门相关:倾心之恋:总裁的妻子 未来兽世:买来的媳妇,不生崽 豪门情变,渣总裁滚远点! 拒嫁豪门,前妻太抢手 异世修真邪君