vue3 微信掃碼登錄及獲取個人信息實現(xiàn)的三種方法

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

本文主要介紹了vue3 微信掃碼登錄及獲取個人信息實現(xiàn)的三種方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、流程：

微信提供的掃碼方式有兩種,分別是:

跳轉(zhuǎn)二維碼掃描頁面
內(nèi)嵌式二維碼

根據(jù)文檔我們可以知道關(guān)于掃碼授權(quán)的模式整體流程為:

1. 第三方發(fā)起微信授權(quán)登錄請求，微信用戶允許授權(quán)第三方應(yīng)用后，微信會拉起應(yīng)用或重定向到第三方網(wǎng)站，并且?guī)鲜跈?quán)臨時票據(jù) code 參數(shù)；

2. 通過 code 參數(shù)加上 AppID 和AppSecret等，通過 API 換取access_token；

3. 通過access_token進行接口調(diào)用，獲取用戶基本數(shù)據(jù)資源或幫助用戶實現(xiàn)基本操作。

二、前置條件：

微信開發(fā)官網(wǎng) 申請：

appid: ‘’, // 后端提供
redirect_uri: ‘’, // 后端提供
AppSecret // 后端提供

三、具體登錄實現(xiàn)

實現(xiàn)方式一：

使用vue插件：

// 安裝
npm install vue-wxlogin --save-dev
// js引入
import wxlogin from 'vue-wxlogin'
components: { wxlogin }

使用：

<wxlogin
        :appid="appid"
        :scope="'snsapi_login'"  // 網(wǎng)頁固定的
        :theme="'black'"
        :redirect_uri="redirect_uri"
        :href='bast64css'
        
        >
 </wxlogin>
 
 
 
//   data
<wxlogin
        :appid="appid"
        :scope="'snsapi_login'"  // 網(wǎng)頁固定的
        :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', // 后端提供

結(jié)果：這樣微信二維碼就會顯示在自己寫的網(wǎng)頁上

掃描后，頁面的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給后端，后端會返回給你這個人的信息

方式二：

自己集成到自己的網(wǎng)頁

1、首先在vue頁面添加微信登錄按鈕：

<!--微信授權(quán)登錄按鈕-->
<img src="@/assets/images/weixin.png" /><a style="line-height: 60px;height: 60px; margin: 0 5px;" type="text" @click="handLoginByWx">微信掃碼登錄</a>

2、配置登錄相關(guān)參數(shù)，跳轉(zhuǎn)微信登錄二維碼授權(quán)頁面

// 跳轉(zhuǎn)微信登錄二維碼授權(quán)頁面
      handLoginByWx() {
        // 重定向地址重定到當(dāng)前頁面，在路徑獲取code
        const hrefUrl = window.location.href
        // 判斷是否已存在code
        if (!this.code) {
        // 不存在，配置相關(guān)微信登錄參數(shù)（主要是授權(quán)頁面地址，appID，回調(diào)地址）
          window.location.href = `
              https://open.weixin.qq.com/connect/qrconnect
            ?appid=APPID
            &redirect_uri=${encodeURIComponent(hrefUrl)}
            &response_type=code
            &scope=snsapi_login
                    `
        }
      }

3.進行掃碼授權(quán)確認

手機掃碼二維碼確認授權(quán)

4.回調(diào)

由于vue這邊有路由守衛(wèi)，故相關(guān)獲取回調(diào)返回的code值在路由守衛(wèi)中進行處理

// 為微信授權(quán)登錄重定向地址服務(wù)
      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.登錄頁監(jiān)聽地址是否存在code

登錄頁面監(jiān)聽是否獲取到微信授權(quán)返回的code值，若存在則調(diào)用后臺提供的接口將code返回給后端
6.根據(jù)后端返回的憑證再調(diào)用登錄接口進行登錄

方式三：結(jié)合后端獲取到二維碼

1、添加一個div, 用于顯示微信登陸二維碼

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

2、添加mounted，引入微信登錄二維碼 JS

mounted() {
    var obj = new WxLogin({
      id: "weixin",
      appid: "wx3bdb1192c22883f3",
      scope: "snsapi_login",
      // 掃碼成功后 跳轉(zhuǎn)的地址
      redirect_uri: "http://domain/weixinlogin"
    });
  },
  head: {
    script: [
      { src: "http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js" }
    ]
  }

appid: 應(yīng)用唯一標(biāo)識
scope：應(yīng)用授權(quán)作用于
redirect_uri：回調(diào)地址，是微信登陸成功后要跳轉(zhuǎn)到的頁面

3、顯示二維碼

掃描二維碼登錄后，點擊確認登錄按鈕后，瀏覽器會自動跳到：

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

這個code是微信發(fā)給用戶的臨時令牌。我們可以根據(jù)code再次請求微信第三方登陸接口得到access_token（正式令牌）

3、獲取access_token

3.1、API 介紹

通過code獲取access_token進行其他接口調(diào)用

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

返回以下參數(shù)：

{
    "access_token":"ACCESS_TOKEN",
    "expires_in":7200,
    "refresh_token":"REFRESH_TOKEN",
    "openid":"OPENID",
    "scope":"SCOPE"
}

3.2 以下vue前端調(diào)用java后端代碼

1、通過 axios 調(diào)用node服務(wù)，新建文件：@/api/weixin.js（這里是因為接口統(tǒng)一管理，單獨存放在api文件下）

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

2、添加工具 utils/param.js （用于獲取瀏覽器地址欄參數(shù)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、創(chuàng)建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){//如果是微信登陸
        //根據(jù)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

返回參數(shù)：

{
“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){//如果是微信登陸
? ? ? ? //根據(jù)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='/' ?//跳轉(zhuǎn)到首頁
? ? ? ? ? })
? ? ? ? })
? ? ? }
? ? }
}
</script>

至此getUser獲取當(dāng)前登錄用戶的用戶名，頭像

到此這篇關(guān)于vue3 微信掃碼登錄及獲取個人信息實現(xiàn)的三種方法的文章就介紹到這了,更多相關(guān)vue3 微信掃碼登錄及獲取信息內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: