vue项目中微信登录的实现操作

这篇文章主要介绍了vue项目中微信登录的实现操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 1、下…

这篇文章主要介绍了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/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.路由钩子中可以进行相关操作

 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() } });

2018.8.31更新

更新微信授权登录vue-cli 3.x与2.x的demo vue-wechat-login,查看对应分支即可。

2019.7.23更新

代码进行了相关重构 vue-wechat-login

以上这篇vue项目中微信登录的实现操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持www.cfluntan.cn。

以上就是vue项目中微信登录的实现操作的详细内容,更多请关注www.cfluntan.cn其它相关文章!

为您推荐

返回顶部