中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue項目中如何實現一個微信登錄功能

發布時間:2020-11-04 16:32:32 來源:億速云 閱讀:1197 作者:Leah 欄目:開發技術

vue項目中如何實現一個微信登錄功能?針對這個問題,這篇文章詳細介紹了相對應的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

1、下載組件 wxlogin

npm install vue-wxlogin --save

2、引入組件,給組件傳參

3、重定向的url應該是微信登錄官網中的微信授權作用域

4、如果url里面有端口號,微信授權作用里面也要有

5、重定向的url:需要在http://tool.chinaz.com/tools/urlencode.aspx中轉碼

6、微信登錄成功后,會自動重定向到新地址,此時的地址欄中就有code參數

7、如果報錯說不能從組件跳到頁面,那就找到wxlogin組件里面的iframe標簽,加上這個屬性:sandbox=“allow-scripts allow-top-navigation allow-same-origin”

報錯內容:

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移動端微信授權登錄插件封裝

1.新建wechatAuth.js文件

const qs = require('qs')
//應用授權作用域,snsapi_base (不彈出授權頁面,直接跳轉,只能獲取用戶openid),snsapi_userinfo (彈出授權頁面,可通過openid拿到昵稱、性別、所在地。并且,即使在未關注的情況下,只要用戶授權,也能獲取其信息)
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/oauth3/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.路由鉤子中可以進行相關操作

router.beforeEach((to, from, next) => {
 if (store.state.loginStatus == 0) {
 //微信未授權登錄跳轉到授權登錄頁面
 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()
 }
});

關于vue項目中如何實現一個微信登錄功能問題的解答就分享到這里了,希望以上內容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關注億速云行業資訊頻道了解更多相關知識。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

且末县| 临沂市| 深水埗区| 亳州市| 沭阳县| 白城市| 基隆市| 临高县| 云和县| 南京市| 化州市| 靖江市| 平罗县| 雷波县| 奎屯市| 葫芦岛市| 古丈县| 平乡县| 克什克腾旗| 蒙山县| 墨竹工卡县| 海伦市| 辽阳县| 定陶县| 青浦区| 贡山| 察哈| 兴海县| 安乡县| 东阳市| 本溪| 丰城市| 乾安县| 织金县| 台山市| 临邑县| 台东市| 邵武市| 玛纳斯县| 汶上县| 民乐县|