vue3 微信扫码登录及获取个人信息实现的三种方法

更新时间：2023年03月02日 09:03:46 作者：@卓越俊逸_角立杰出@

本文主要介绍了vue3 微信扫码登录及获取个人信息实现的三种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、流程：

微信提供的扫码方式有两种,分别是:

跳转二维码扫描页面
内嵌式二维码

根据文档我们可以知道关于扫码授权的模式整体流程为:

1. 第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据 code 参数；

2. 通过 code 参数加上 AppID 和AppSecret等，通过 API 换取access_token；

3. 通过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>

//   data
bast64css: '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给后端，后端会返回给你这个人的信息

方式二：

自己集成到自己的网页

1、首先在vue页面添加微信登录按钮：

<!--微信授权登录按钮-->
<img src="@/assets/images/weixin.png" /><a style="line-height: 60px;height: 60px; margin: 0 5px;" type="text" @click="handLoginByWx">微信扫码登录</a>

2、配置登录相关参数，跳转微信登录二维码授权页面

// 跳转微信登录二维码授权页面
      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
                    `
        }
      }

3.进行扫码授权确认

手机扫码二维码确认授权

4.回调

由于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 }
      })

5.登录页监听地址是否存在code

登录页面监听是否获取到微信授权返回的code值，若存在则调用后台提供的接口将code返回给后端
6.根据后端返回的凭证再调用登录接口进行登录

方式三：结合后端获取到二维码

1、添加一个div, 用于显示微信登陆二维码

<div id="weixin"></div>

2、添加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：回调地址，是微信登陆成功后要跳转到的页面

3、显示二维码

扫描二维码登录后，点击确认登录按钮后，浏览器会自动跳到：

http://domain/weixinlogin?code=02147Yff12Yhgz0ArCef1qabgf147Yf0&state=undefined

这个code是微信发给用户的临时令牌。我们可以根据code再次请求微信第三方登陆接口得到access_token（正式令牌）

3、获取access_token

3.1、API 介绍

通过code获取access_token进行其他接口调用

1、接口说明（通过以下接口获取access_token）

HTTP请求方式： GET
URL：https://api.weixin.qq.com/sns/oauth2/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"
}

3.2 以下vue前端调用java后端代码

1、通过 axios 调用node服务，新建文件：@/api/weixin.js（这里是因为接口统一管理，单独存放在api文件下）

import axios from 'axios'
export function getAccessToken(code) {
 return axios.get(`http://localhost:8888?operation=token&code=$[code]`)
}

2、添加工具 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;
}

3、创建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

1、接口说明

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 微信扫码登录及获取个人信息实现的三种方法的文章就介绍到这了,更多相关vue3 微信扫码登录及获取信息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue+Three加载glb文件报错问题及解决
当使用Three.js加载GLB模型时,遇到加载错误常常是路径问题,解决方案：1. 将GLB模型文件置于public目录,避免打包时路径编码变化；2. 从node_modules的three库中复制draco解码器至public目录；3. 确认场景、摄像机和光源设置正确
2024-10-10
vue项目中的类使用方式
这篇文章主要介绍了vue项目中的类使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue切换组件实现返回后不重置数据,保留历史设置操作
这篇文章主要介绍了Vue切换组件实现返回后不重置数据,保留历史设置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue3中安装使用vue-i18n实时切换语言且不用刷新
这篇文章主要介绍了vue3中安装使用vue-i18n实时切换语言不用刷新问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue单页面SEO优化的实现
本文主要介绍了vue单页面SEO优化的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
解决vue中less的使用问题
这篇文章主要介绍了解决vue中less的使用问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-11-11
vue3中setup的作用及使用场景分析
本文主要介绍了Vue 3.0中的setup函数,包括其概述、使用场景和具体用法,通过本文的介绍,我们可以看到,setup函数是用来将组件的状态和行为进行分离的一个重要工具,感兴趣的朋友跟随小编一起看看吧
2024-11-11
Vue3 Pinia如何修改全局状态变量值
这篇文章主要介绍了Vue3 Pinia如何修改全局状态变量值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-05-05
vue结合el-table实现表格行拖拽排序(基于sortablejs)
这篇文章主要介绍了vue结合el-table实现表格行拖拽排序(基于sortablejs),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2024-01-01
vue3中v-model的用法详解
vue 提供了很多自定义指令，大大方便了我们的开发，其中最常用的也就是 v-model，他可以在组件上使用以实现双向绑定。它可以绑定多种数据结构, 今天总结一下用法
2023-04-04