vue3怎麼實現微信掃碼登入及取得個人資訊
- WBOY轉載
- 2023-05-15 23:04:043228瀏覽
一、流程：
微信提供的掃碼方式有兩種,分別是:
跳轉二維碼掃描頁面
#內嵌式二維碼
根據文件我們可以知道關於掃碼授權的模式整體流程為:
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="'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 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 '@/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、介面說明URL：https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENIDHTTP要求方式：GET
返回參數：
{
“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怎麼實現微信掃碼登入及取得個人資訊的詳細內容。更多資訊請關注PHP中文網其他相關文章！