vue項目中微信登錄的實現(xiàn)操作
1、下載組件 wxlogin
npm install vue-wxlogin --save
2、引入組件,給組件傳參
3、重定向的url應該是微信登錄官網(wǎng)中的微信授權(quán)作用域
4、如果url里面有端口號,微信授權(quán)作用里面也要有
5、重定向的url:需要在http://tool.chinaz.com/tools/urlencode.aspx中轉(zhuǎn)碼
6、微信登錄成功后,會自動重定向到新地址,此時的地址欄中就有code參數(shù)
7、如果報錯說不能從組件跳到頁面,那就找到wxlogin組件里面的iframe標簽,加上這個屬性:sandbox=“allow-scripts allow-top-navigation allow-same-origin”
報錯內(nèi)容:
qrconnect?scope=snsapi_login&redirect_uri=http%3a%2f%2f%2f&state=&login_type=jssdk&self_redirect=false&style=black&href=:84 Unsafe JavaScript attempt to initiate navigation for frame with origin 'http://localhost:9020' from frame with URL 'https://open.weixin.qq.com/connect/qrconnect?app&scope=snsapi_login&redirect_uri=http%3a%2f%2f&state=&login_type=jssdk&self_redirect=false&style=black&href='. The frame attempting navigation is targeting its top-level window, but is neither same-origin with its target nor has it received a user gesture. See https://www.chromestatus.com/features/5851021045661696.```
補充知識:vue移動端微信授權(quán)登錄插件封裝
1.新建wechatAuth.js文件
const qs = require('qs')
//應用授權(quán)作用域,snsapi_base (不彈出授權(quán)頁面,直接跳轉(zhuǎn),只能獲取用戶openid),snsapi_userinfo (彈出授權(quán)頁面,可通過openid拿到昵稱、性別、所在地。并且,即使在未關(guān)注的情況下,只要用戶授權(quán),也能獲取其信息)
const SCOPES = ['snsapi_base', 'snsapi_userinfo']
class VueWechatAuthPlugin {
constructor () {
this.appid = null
this.redirect_uri = null
this.scope = SCOPES[1]
this._code = null
this._redirect_uri = null
}
install (Vue, options) {
let wechatAuth = this
this.setAppId(options.appid)
Vue.mixin({
created: function () {
this.$wechatAuth = wechatAuth
},
})
}
static makeState () {
return Math.random().toString(36).substring(2, 15) +
Math.random().toString(36).substring(2, 15)
}
setAppId (appid) {
this.appid = appid
}
set redirect_uri (redirect_uri) {
this._redirect_uri = encodeURIComponent(redirect_uri)
}
get redirect_uri () {
return this._redirect_uri
}
get state () {
return localStorage.getItem('wechat_auth:state')
}
set state (state) {
localStorage.setItem('wechat_auth:state', state)
}
get authUrl () {
if (this.appid === null) {
throw 'appid must not be null'
}
if (this.redirect_uri === null) {
throw 'redirect uri must not be null'
}
this.state = VueWechatAuthPlugin.makeState()
return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${this.redirect_uri}&response_type=code&scope=${this.scope}&state=${this.state}#wechat_redirect`
}
returnFromWechat (redirect_uri) {
let parsedUrl = qs.parse(redirect_uri.split('?')[1])
if (process.env.NODE_ENV === 'development') {
// console.log('parsedUrl: ', parsedUrl)
this.state = null
this._code = parsedUrl.code
} else {
if (this.state === null) {
throw 'You did\'t set state'
}
if (parsedUrl.state === this.state) {
this.state = null
this._code = parsedUrl.code
} else {
this.state = null
throw `Wrong state: ${parsedUrl.state}`
}
}
}
get code () {
if (this._code === null) {
throw 'Not get the code from wechat server!'
}
// console.log(this)
// console.log('this._code: ' + this._code)
let code = this._code
this._code = null
// console.log('code: ' + code)
return code
}
}
const vueWechatAuthPlugin = new VueWechatAuthPlugin()
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(VueWechatAuthPlugin)
}
export default vueWechatAuthPlugin
2.main.js中導入
import wechatAuth from './plugins/wechatAuth'//微信登錄插件
const qs= require('qs');
Vue.use(wechatAuth, {appid: XXXXXXXXX});
3.路由鉤子中可以進行相關(guān)操作
router.beforeEach((to, from, next) => {
if (store.state.loginStatus == 0) {
//微信未授權(quán)登錄跳轉(zhuǎn)到授權(quán)登錄頁面
let url = window.location.href;
//解決重復登錄url添加重復的code與state問題
let parseUrl = qs.parse(url.split('?')[1]);
let loginUrl;
if (parseUrl.code && parseUrl.state) {
delete parseUrl.code;
delete parseUrl.state;
loginUrl = `${url.split('?')[0]}?${qs.stringify(parseUrl)}`;
} else {
loginUrl = url;
}
wechatAuth.redirect_uri = loginUrl;
store.dispatch('setLoginStatus', 1);
window.location.href = wechatAuth.authUrl
} else if (store.state.loginStatus == 1) {
try {
wechatAuth.returnFromWechat(to.fullPath);
} catch (err) {
store.dispatch('setLoginStatus', 0)
next()
}
store.dispatch('loginWechatAuth', wechatAuth.code).then((res) => {
if (res.status == 1) {
store.dispatch('setLoginStatus', 2)
} else {
store.dispatch('setLoginStatus', 0)
}
next()
}).catch((err) => {
next()
})
}else {
next()
}
});
2018.8.31更新
更新微信授權(quán)登錄vue-cli 3.x與2.x的demo vue-wechat-login,查看對應分支即可。
2019.7.23更新
代碼進行了相關(guān)重構(gòu) vue-wechat-login
以上這篇vue項目中微信登錄的實現(xiàn)操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
VUE項目實現(xiàn)全屏顯示功能之screenfull用法
這篇文章主要介紹了VUE項目實現(xiàn)全屏顯示功能之screenfull用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
關(guān)于element中el-cascader的使用方式
這篇文章主要介紹了關(guān)于element中el-cascader的使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08
element ui提交表單返回成功后自動清空表單的值的實現(xiàn)代碼
這篇文章主要介紹了elementui提交表單返回成功后自動清空表單的值,本文通過兩種方法結(jié)合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
vue實現(xiàn)動態(tài)路由的方法及路由原理解析
這篇文章主要介紹了路由原理及vue實現(xiàn)動態(tài)路由,Vue Router 提供了豐富的 API,可以輕松地實現(xiàn)路由功能,并支持路由參數(shù)、查詢參數(shù)、命名路由、嵌套路由等功能,可以滿足不同應用程序的需求,需要的朋友可以參考下2023-06-06

