vue3如何實現(xiàn)微信掃碼登錄及獲取個人信息
這篇文章主要講解了“vue3如何實現(xiàn)微信掃碼登錄及獲取個人信息”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue3如何實現(xiàn)微信掃碼登錄及獲取個人信息”吧！
十余年的望謨網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)整合營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整望謨建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)從事“望謨網(wǎng)站設(shè)計”,“望謨網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。
一、流程：
微信提供的掃碼方式有兩種,分別是:
跳轉(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 }使用：
// data
// 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頁面添加微信登錄按鈕：
微信掃碼登錄
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, 用于顯示微信登陸二維碼
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" }
]
}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/oauth4/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
四、登錄微信后獲取微信中用戶頭像和昵稱
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中
感謝各位的閱讀，以上就是“vue3如何實現(xiàn)微信掃碼登錄及獲取個人信息”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對vue3如何實現(xiàn)微信掃碼登錄及獲取個人信息這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
文章名稱：vue3如何實現(xiàn)微信掃碼登錄及獲取個人信息
地址分享：
http://weahome.cn/article/iipsce.html
重慶分公司
重慶分公司
