您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“vue3怎么實(shí)現(xiàn)微信掃碼登錄及獲取個(gè)人信息”的有關(guān)知識,在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
微信提供的掃碼方式有兩種,分別是:
跳轉(zhuǎn)二維碼掃描頁面
內(nèi)嵌式二維碼
根據(jù)文檔我們可以知道關(guān)于掃碼授權(quán)的模式整體流程為:
1. 第三方發(fā)起微信授權(quán)登錄請求,微信用戶允許授權(quán)第三方應(yīng)用后,微信會(huì)拉起應(yīng)用或重定向到第三方網(wǎng)站,并且?guī)鲜跈?quán)臨時(shí)票據(jù) code 參數(shù);
2. 通過 code 參數(shù)加上 AppID 和AppSecret等,通過 API 換取access_token;
3. 通過access_token進(jìn)行接口調(diào)用,獲取用戶基本數(shù)據(jù)資源或幫助用戶實(shí)現(xiàn)基本操作。
微信開發(fā)官網(wǎng) 申請:
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'" // 網(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é)果:這樣微信二維碼就會(huì)顯示在自己寫的網(wǎng)頁上
掃描后,頁面的url會(huì)給一個(gè)帶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給后端,后端會(huì)返回給你這個(gè)人的信息
自己集成到自己的網(wǎng)頁
1、首先在vue頁面添加微信登錄按鈕:
<!--微信授權(quán)登錄按鈕--> <img src="@/assets/images/weixin.png" /><a 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.進(jìn)行掃碼授權(quán)確認(rèn)
手機(jī)掃碼二維碼確認(rèn)授權(quán)
4.回調(diào)
由于vue這邊有路由守衛(wèi),故相關(guān)獲取回調(diào)返回的code值在路由守衛(wèi)中進(jìn)行處理
// 為微信授權(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)用登錄接口進(jìn)行登錄
1、添加一個(gè)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、顯示二維碼
掃描二維碼登錄后,點(diǎn)擊確認(rèn)登錄按鈕后,瀏覽器會(huì)自動(dòng)跳到:
http://domain/weixinlogin?code=02147Yff12Yhgz0ArCef1qabgf147Yf0&state=undefined
這個(gè)code是微信發(fā)給用戶的臨時(shí)令牌。我們可以根據(jù)code再次請求微信第三方登陸接口得到access_token(正式令牌)
3、獲取access_token
3.1、API 介紹
通過code獲取access_token進(jìn)行其他接口調(diào)用
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
返回以下參數(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(這里是因?yàn)榻涌诮y(tǒng)一管理,單獨(dú)存放在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)前登錄用戶的用戶名,頭像。
“vue3怎么實(shí)現(xiàn)微信掃碼登錄及獲取個(gè)人信息”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。