🔥🔥 超实用，Vue实现微信扫码登录

2023-05-06 00:01| 来源: 网络整理| 查看: 265

小知识，大挑战！本文正在参与「程序员必备小知识」创作活动

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

前言

微信扫码登录是非常常见的需求，让微信用户使用微信登录第三方应用或网站，无非两种展现方式

第一种，重定向到微信指定的扫码页面第二种，网站将微信登录二维码内嵌到页面中该模式整体流程：第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；通过code参数加上AppID和AppSecret等，通过API换取access_token；通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。参数说明参数是否必须说明self_redirect否true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，false：手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。id是第三方页面显示二维码的容器idappid是应用唯一标识，在微信开放平台提交应用审核通过后获得scope是应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可redirect_uri是重定向地址，需要进行UrlEncodestate否用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验style否提供"black"、"white"可选，默认为黑色文字描述。详见文档底部FAQhref否自定义样式链接，第三方可根据实际需求覆盖默认样式。详见文档底部FAQ 这里主要说的是第二种，将微信二维码内嵌到网站页面中，在网站内就能完成登录，无需跳转到微信域下登录后再返回，提升微信登录的流畅性与成功率。这里使用vue-wxlogin，方便组件化模块化引入 npm install vue-wxlogin --save-dev 复制代码封装成组件微信扫一扫登录请使用微信扫描二维码登录 import wxlogin from 'vue-wxlogin' import api from '@api/index' export default { name: 'wxLogin', components: { wxlogin }, data () { return { appid: '', redirect_uri: '', state: '1', href: '' // 自定义样式链接 } }, mounted () { this.getWeChatUrl() }, methods: { // 获取微信appid和回调地址redirect_uri，指定内嵌的路由地址weChatLogin getWeChatUrl () { api.wachatQrUrl().then(res => { if (res && res.code === '0000') { const data = res.data this.appid = data.appId this.redirect_uri = data.wxCallbackUrl + 'weChatLogin' } }) } } } 复制代码在导航守卫router.beforeEach函数中进行拦截判断，获取url中的code，根据code调用接口进行登录验证 router.beforeEach((to, from, next) => { let code = null if (to.name === 'weChatLogin') { code = to.query.code || null } // 微信授权登陆 if (code) { api.weChatOauth(code).then(res => { if (res?.code === '0000') { // 登录成功，并提示,跳转到用户主页面 Message({ type: 'success', message: '登录成功' }) router.push({ path: '/index' }) } }) } else { next() } }) 复制代码最后

微信截图_20211008175145.png

【本文地址】

公司简介

联系我们