首页 >> js开发 >> jsvue项目中微信登录的实现操作js大全

jsvue项目中微信登录的实现操作js大全

发布时间: 2021年1月13日 | 浏览: | 分类:js开发

1、下载组件 wxlogin
npm install vue-wxlogin --save
npm install vue-wxlogin --save2、引入组件，给组件传参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.```
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移动端微信授权登录插件封装补充知识：补充知识：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
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 vueWechatAuthPlugin2.main.js中导入
import wechatAuth from './plugins/wechatAuth'//微信登录插件
const qs= require('qs');
Vue.use(wechatAuth, {appid: XXXXXXXXX});
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()
}
});
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()
}
});2021.8.31更新2021.8.31更新更新微信授权登录vue-cli 3.x与2.x的demo vue-wechat-login，查看对应分支即可。vue-wechat-login2021.7.23更新2021.7.23更新代码进行了相关重构 vue-wechat-loginvue-wechat-login以上这篇vue项目中微信登录的实现操作就是小编分享给大家的全部内容了，希望能给大家一个参考。

原文地址：http://www.chinasgp.cn/article/3595.html

上一条：« js代码JavaScript对象访问器Getter及Setter原理解析

下一条：jsVue实现附件上传功能js大全 »

标签:

vue项目 vue js 微信

jsvue项目中微信登录的实现操作js大全-js开发