本篇内容介绍了“vue3怎么实现微信扫码登录及获取个人信息”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
一、流程：
微信提供的扫码方式有两种,分别是:
跳转二维码扫描页面
内嵌式二维码
根据文档我们可以知道关于扫码授权的模式整体流程为:
第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据 code 参数；
通过 code 参数加上 AppID 和AppSecret等，通过 API 换取access_token；
通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。
二、前置条件：
微信开发官网 申请：
appid: ‘’, // 后端提供
redirect_uri: ‘’, // 后端提供
AppSecret // 后端提供
三、具体登录实现
实现方式一：
使用vue插件：
// 安装npm install vue-wxlogin --save-dev// js引入import wxlogin from 'vue-wxlogin'components: { wxlogin }使用：
<wxlogin :appid="appid" :scope="'snsapi_login'" // 网页固定的 :theme="'black'" :redirect_uri="redirect_uri" :href='bast64css' > </wxlogin> // data<wxlogin :appid="appid" :scope="'snsapi_login'" // 网页固定的 :theme="'black'" :redirect_uri="redirect_uri" :href='bast64css' > </wxlogin>// databast64css: 'data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O2hlaWdodDoyMDBweH0NCi5pbXBvd2VyQm94IC5pbmZvIHt3aWR0aDogMjAwcHh9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fQ0KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lfQ0KaWZyYW1lIHtoZWlnaHQ6IDMyMnB4O30NCg==', appid: 'wx64914809da50', // 后端提供 redirect_uri: 'http%3A%2F%2Flant.com', // 后端提供结果：这样微信二维码就会显示在自己写的网页上
扫描后，页面的url会给一个带code的地址 ，去获取code
if (window.location.href.indexOf('code') >= 0) { let code = window.location.href.split('?')[1]; code = code.substring(5, code.indexOf('&')); this.wechatcode = code this.wechatLogin() }把code给后端，后端会返回给你这个人的信息
方式二：
自己集成到自己的网页
首先在vue页面添加微信登录按钮：
<!--微信授权登录按钮--><img src="@/assets/images/weixin.png" /><a type="text" @click="handLoginByWx">微信扫码登录</a>配置登录相关参数，跳转微信登录二维码授权页面
// 跳转微信登录二维码授权页面 handLoginByWx() { // 重定向地址重定到当前页面，在路径获取code const hrefUrl = window.location.href // 判断是否已存在code if (!this.code) { // 不存在，配置相关微信登录参数（主要是授权页面地址，appID，回调地址） window.location.href = ` https://open.weixin.qq.com/connect/qrconnect ?appid=APPID &redirect_uri=${encodeURIComponent(hrefUrl)} &response_type=code &scope=snsapi_login ` } }进行扫码授权确认
手机扫码二维码确认授权
回调
由于vue这边有路由守卫，故相关获取回调返回的code值在路由守卫中进行处理
// 为微信授权登录重定向地址服务 var temp = (to.path).split('&') var pram = temp[1] var item = pram.split('=') var code = item[1] // 重定向到微信登录页面并且将code值带上 next({ path: '/login', query: { 'code': code } })登录页监听地址是否存在code
登录页面监听是否获取到微信授权返回的code值，若存在则调用后台提供的接口将code返回给后端
6.根据后端返回的凭证再调用登录接口进行登录
方式三：结合后端获取到二维码
添加一个div, 用于显示微信登陆二维码
<div id="weixin"></div>添加mounted，引入微信登录二维码 JS
mounted() { var obj = new WxLogin({ id: "weixin", appid: "wx3bdb1192c22883f3", scope: "snsapi_login", // 扫码成功后 跳转的地址 redirect_uri: "http://domain/weixinlogin" }); }, head: { script: [ { src: "http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js" } ] }appid: 应用唯一标识
scope：应用授权作用于
redirect_uri：回调地址，是微信登陆成功后要跳转到的页面
显示二维码
扫描二维码登录后，点击确认登录按钮后，浏览器会自动跳到：
http://domain/weixinlogin?code=02147Yff12Yhgz0ArCef1qabgf147Yf0&state=undefined
这个code是微信发给用户的临时令牌。我们可以根据code再次请求微信第三方登陆接口得到access_token（正式令牌）
获取access_token
1、API 介绍
通过code获取access_token进行其他接口调用
接口说明 （通过以下接口获取access_token）
HTTP请求方式： GET
URL：https://api.weixin.qq.com/sns/oauth3/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
返回以下参数：
{ "access_token":"ACCESS_TOKEN", "expires_in":7200, "refresh_token":"REFRESH_TOKEN", "openid":"OPENID", "scope":"SCOPE"}2 以下vue前端调用java后端代码
通过 axios 调用node服务，新建文件：@/api/weixin.js（这里是因为接口统一管理，单独存放在api文件下）
import axios from 'axios'export function getAccessToken(code) { return axios.get(`http://localhost:8888?operation=token&code=$[code]`)}添加工具 utils/param.js （用于获取浏览器地址栏参数code）
export function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r != null) return unescape(r[2]); return null;}创建weixinLogin.vue
<template> <div></div></template><script>import { getUrlParam } from '@/utils/param'import { getAccessToken } from '@/api/weixin' export default { mounted(){ let code=getUrlParam('code') if(code!==null){//如果是微信登陆 //根据code获取access_token getAccessToken(code).then( res=>{ let access_token= res.data.access_token let openid= res.data.openid console.log('access_token:'+access_token+ 'openid:'+openid) }) } }}</script>四、登录微信后获取微信中用户头像和昵称
API
接口说明
HTTP请求方式： GET
URL：https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
返回参数：
{“openid”:“OPENID”,“nickname”:“NICKNAME”,“sex”:1,“province”:“PROVINCE”,“city”:“CITY”,“country”:“COUNTRY”,“headimgurl”: “http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0”,“privilege”:[“PRIVILEGE1”,“PRIVILEGE2”],“unionid”: " o6_bmasdasdsad6_2sgVt7hMZOPfL" }在获取access_token和openid后，再次请求接口，获取昵称和头像，保存到cookie中
<template> <div></div></template><script>import { getUrlParam } from '@/utils/param'import { getAccessToken } from '@/api/weixin'import { setUser } from '@/utils/auth' export default { mounted(){ let code=getUrlParam('code') if(code!==null){//如果是微信登陆 //根据code获取access_token getAccessToken(code).then( res=>{ let access_token= res.data.access_token let openid= res.data.openid weixin.getUserinfo( access_token, openid ).then( res => { //提取用户昵称和头像 let nickname= res.data.nickname let headimgurl= res.data.headimgurl // 将用户信息保存到token中 setUser(access_token,nickname,headimgurl) location.href='/' //跳转到首页 }) }) } }}</script>至此getUser获取当前登录用户的用户名，头像。
“vue3怎么实现微信扫码登录及获取个人信息”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
