电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

vue項(xiàng)目中微信登錄的實(shí)現(xiàn)操作

瀏覽:125日期:2022-06-11 16:10:41

1、下載組件 wxlogin

npm install vue-wxlogin --save

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

3、重定向的url應(yīng)該是微信登錄官網(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標(biāo)簽,加上這個屬性: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.```

補(bǔ)充知識:vue移動端微信授權(quán)登錄插件封裝

1.新建wechatAuth.js文件

const qs = require(’qs’)//應(yīng)用授權(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中導(dǎo)入

import wechatAuth from ’./plugins/wechatAuth’//微信登錄插件const qs= require(’qs’);Vue.use(wechatAuth, {appid: XXXXXXXXX});

3.路由鉤子中可以進(jìn)行相關(guān)操作

router.beforeEach((to, from, next) => { if (store.state.loginStatus == 0) { //微信未授權(quán)登錄跳轉(zhuǎn)到授權(quán)登錄頁面 let url = window.location.href; //解決重復(fù)登錄url添加重復(fù)的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,查看對應(yīng)分支即可。

2019.7.23更新

代碼進(jìn)行了相關(guān)重構(gòu) vue-wechat-login

以上這篇vue項(xiàng)目中微信登錄的實(shí)現(xiàn)操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: 微信
相關(guān)文章:
主站蜘蛛池模板: 执业药师报名条件,考试时间,考试真题,报名入口—首页 | 考勤系统_考勤管理系统_网络考勤软件_政企|集团|工厂复杂考勤工时统计排班管理系统_天时考勤 | cnc精密加工_数控机械加工_非标平键定制生产厂家_扬州沃佳机械有限公司 | 专注提供国外机电设备及配件-工业控制领域一站式服务商-深圳市华联欧国际贸易有限公司 | 闸阀_截止阀_止回阀「生产厂家」-上海卡比阀门有限公司 | 粉末包装机-给袋式包装机-全自动包装机-颗粒-液体-食品-酱腌菜包装机生产线【润立机械】 | 贴板式电磁阀-不锈钢-气动上展式放料阀-上海弗雷西阀门有限公司 工业机械三维动画制作 环保设备原理三维演示动画 自动化装配产线三维动画制作公司-南京燃动数字 | 超细|超微气流粉碎机|气流磨|气流分级机|粉体改性机|磨粉机|粉碎设备-山东埃尔派粉体科技 | 铁艺,仿竹,竹节,护栏,围栏,篱笆,栅栏,栏杆,护栏网,网围栏,厂家 - 河北稳重金属丝网制品有限公司 山东太阳能路灯厂家-庭院灯生产厂家-济南晟启灯饰有限公司 | 耳模扫描仪-定制耳机设计软件-DLP打印机-asiga打印机-fitshape「飞特西普」 | 杰福伦_磁致伸缩位移传感器_线性位移传感器-意大利GEFRAN杰福伦-河南赉威液压科技有限公司 | 蓄电池回收,ups电池后备电源回收,铅酸蓄电池回收,机房电源回收-广州益夫铅酸电池回收公司 | 立式_复合式_壁挂式智能化电伴热洗眼器-上海达傲洗眼器生产厂家 理化生实验室设备,吊装实验室设备,顶装实验室设备,实验室成套设备厂家,校园功能室设备,智慧书法教室方案 - 东莞市惠森教学设备有限公司 | 湖州织里童装_女童男童中大童装_款式多尺码全_织里儿童网【官网】-嘉兴嘉乐网络科技有限公司 | 物流之家新闻网-最新物流新闻|物流资讯|物流政策|物流网-匡匡奈斯物流科技 | 安规_综合测试仪,电器安全性能综合测试仪,低压母线槽安规综合测试仪-青岛合众电子有限公司 | 精密机械零件加工_CNC加工_精密加工_数控车床加工_精密机械加工_机械零部件加工厂 | 密封无忧网 _ 专业的密封产品行业信息网 | 滁州高低温冲击试验箱厂家_安徽高低温试验箱价格|安徽希尔伯特 | 福州时代广告制作装饰有限公司-福州广告公司广告牌制作,福州展厅文化墙广告设计, | 电主轴-高速精密电主轴-高速电机厂家-瑞德沃斯品牌有限公司 | PU树脂_水性聚氨酯树脂_聚氨酯固化剂_聚氨酯树脂厂家_宝景化工 | 兰州牛肉面加盟,兰州牛肉拉面加盟-京穆兰牛肉面 | 中红外QCL激光器-其他连续-半导体连续激光器-筱晓光子 | 玉米深加工机械,玉米加工设备,玉米加工机械等玉米深加工设备制造商-河南成立粮油机械有限公司 | 瓶盖扭矩仪(扭力值检测)-百科| 谷歌关键词优化-外贸网站优化-Google SEO小语种推广-思亿欧外贸快车 | 船用锚链|专业锚链生产厂家|安徽亚太锚链制造有限公司 | 运动木地板_体育木地板_篮球馆木地板_舞台木地板-实木运动地板厂家 | 数显水浴恒温振荡器-分液漏斗萃取振荡器-常州市凯航仪器有限公司 | 东莞画册设计_logo/vi设计_品牌包装设计 - 华略品牌设计公司 | 蜘蛛车-高空作业平台-升降机-高空作业车租赁-臂式伸缩臂叉装车-登高车出租厂家 - 普雷斯特机械设备(北京)有限公司 | 标准件-非标紧固件-不锈钢螺栓-非标不锈钢螺丝-非标螺母厂家-三角牙锁紧自攻-南京宝宇标准件有限公司 | 影合社-影视人的内容合作平台| 数显恒温油浴-电砂浴-高温油浴振荡器-常州迈科诺仪器有限公司 | 全自动五线打端沾锡机,全自动裁线剥皮双头沾锡机,全自动尼龙扎带机-东莞市海文能机械设备有限公司 | 天津货架厂_穿梭车货架_重型仓储货架_阁楼货架定制-天津钢力仓储货架生产厂家_天津钢力智能仓储装备 | 杭州公司变更法人-代理记账收费价格-公司注销代办_杭州福道财务管理咨询有限公司 | 水厂自动化|污水处理中控系统|水利信息化|智慧水务|智慧农业-山东德艾自动化科技有限公司 | 道达尔润滑油-食品级润滑油-道达尔导热油-合成导热油,深圳道达尔代理商合-深圳浩方正大官网 | 注浆压力变送器-高温熔体传感器-矿用压力传感器|ZHYQ朝辉 |