vue3怎麼實現微信掃碼登入及取得個人資訊

一、流程：

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

• 跳轉二維碼掃描頁面

• #內嵌式二維碼

根據文件我們可以知道關於掃碼授權的模式整體流程為:

1. 第三方發起微信授權登入要求，微信使用者允許授權第三方應用程式後，微信會拉起應用程式或重定向到第三方網站，並且帶上授權臨時票據code 參數；

2. 透過code 參數加上AppID 和AppSecret等，透過API 換取access_token;

3. 透過access_token進行介面調用，取得使用者基本資料資源或協助使用者實現基本操作。

二、前置條件：

微信開發官網申請：

appid: ‘’, // 後端提供
redirect_uri: &lsquo ;’, // 後端提供
AppSecret // 後端提供

三、具體登入實作

實作方式一：

使用vue外掛：

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

使用：

<wxlogin
        :appid="appid"
        :scope="&#39;snsapi_login&#39;"  // 网页固定的
        :theme="&#39;black&#39;"
        :redirect_uri="redirect_uri"
        :href=&#39;bast64css&#39;
        
        >
 </wxlogin>
 
 
 
//   data
<wxlogin
        :appid="appid"
        :scope="&#39;snsapi_login&#39;"  // 网页固定的
        :theme="&#39;black&#39;"
        :redirect_uri="redirect_uri"
        :href=&#39;bast64css&#39;
        
        >
 </wxlogin>

//   data
bast64css: &#39;data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O2hlaWdodDoyMDBweH0NCi5pbXBvd2VyQm94IC5pbmZvIHt3aWR0aDogMjAwcHh9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fQ0KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lfQ0KaWZyYW1lIHtoZWlnaHQ6IDMyMnB4O30NCg==&#39;,
                appid: &#39;wx64914809da50&#39;, // 后端提供
                redirect_uri: &#39;http%3A%2F%2Flant.com&#39;, // 后端提供

結果：這樣微信二維碼就會顯示在自己寫的網頁上

掃描後，頁面的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  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/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"
}

3.2 下列vue前端呼叫後端程式碼

4java# 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 &#39;@/utils/param&#39;
import { getAccessToken } from &#39;@/api/weixin&#39;
    
export default {
    mounted(){
      let code=getUrlParam(&#39;code&#39;)
      if(code!==null){//如果是微信登陆
        //根据code获取access_token
        getAccessToken(code).then( res=>{
          let access_token= res.data.access_token
          let openid= res.data.openid
          console.log(&#39;access_token:&#39;+access_token+ &#39;openid:&#39;+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 &#39;@/utils/param&#39;
import { getAccessToken } from &#39;@/api/weixin&#39;
import { setUser } from &#39;@/utils/auth&#39; 

export default {
    mounted(){
      let code=getUrlParam(&#39;code&#39;)
      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=&#39;/&#39;  //跳转到首页
          })
        })
      }
    }
}
</script>

###至此getUser獲取當前登錄用戶的用戶名，頭像。 ###

以上是vue3怎麼實現微信掃碼登入及取得個人資訊的詳細內容。更多資訊請關注PHP中文網其他相關文章！