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

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

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

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

1、下載組件 wxlogin

npm install vue-wxlogin --save

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

3、重定向的url應(yīng)該是微信登錄官網(wǎng)中的微信授權(quán)作用域

4、如果url里面有端口號(hào),微信授權(quán)作用里面也要有

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

6、微信登錄成功后,會(huì)自動(dòng)重定向到新地址,此時(shí)的地址欄中就有code參數(shù)

7、如果報(bào)錯(cuò)說(shuō)不能從組件跳到頁(yè)面,那就找到wxlogin組件里面的iframe標(biāo)簽,加上這個(gè)屬性:sandbox=“allow-scripts allow-top-navigation allow-same-origin”

報(bào)錯(cuò)內(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ǔ)充知識(shí):vue移動(dòng)端微信授權(quán)登錄插件封裝

1.新建wechatAuth.js文件

const qs = require(’qs’)//應(yīng)用授權(quán)作用域,snsapi_base (不彈出授權(quán)頁(yè)面,直接跳轉(zhuǎn),只能獲取用戶openid),snsapi_userinfo (彈出授權(quán)頁(yè)面,可通過(guò)openid拿到昵稱(chēng)、性別、所在地。并且,即使在未關(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)登錄頁(yè)面 let url = window.location.href; //解決重復(fù)登錄url添加重復(fù)的code與state問(wèn)題 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,查看對(duì)應(yīng)分支即可。

2019.7.23更新

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

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

標(biāo)簽: 微信
相關(guān)文章:
主站蜘蛛池模板: 成都亚克力制品,PVC板,双色板雕刻加工,亚克力门牌,亚克力标牌,水晶字雕刻制作-零贰捌广告 | 无菌实验室规划装修设计-一体化实验室承包-北京洁净净化工程建设施工-北京航天科恩实验室装备工程技术有限公司 | 医院专用门厂家报价-医用病房门尺寸大全-抗菌木门品牌推荐 | 悬浮拼装地板_篮球场木地板翻新_运动木地板价格-上海越禾运动地板厂家 | 菲希尔FISCHER测厚仪-铁素体检测仪-上海吉馨实业发展有限公司 | 电力测功机,电涡流测功机,磁粉制动器,南通远辰曳引机测试台 | 柔软云母板-硬质-水位计云母片组件-首页-武汉长丰云母绝缘材料有限公司 | 车充外壳,车载充电器外壳,车载点烟器外壳,点烟器连接头,旅行充充电器外壳,手机充电器外壳,深圳市华科达塑胶五金有限公司 | 美国PARKER齿轮泵,美国PARKER柱塞泵,美国PARKER叶片泵,美国PARKER电磁阀,美国PARKER比例阀-上海维特锐实业发展有限公司二部 | 网优资讯-为循环资源、大宗商品、工业服务提供资讯与行情分析的数据服务平台 | 整车VOC采样环境舱-甲醛VOC预处理舱-多舱法VOC检测环境仓-上海科绿特科技仪器有限公司 | 品牌策划-品牌设计-济南之式传媒广告有限公司官网-提供品牌整合丨影视创意丨公关活动丨数字营销丨自媒体运营丨数字营销 | 二手色谱仪器,十万分之一分析天平,蒸发光检测器,电位滴定仪-湖北捷岛科学仪器有限公司 | 全自动定氮仪-半自动凯氏定氮仪厂家-祎鸿仪器 | 厦门网站建设_厦门网站设计_小程序开发_网站制作公司【麦格科技】 | 温州食堂承包 - 温州市尚膳餐饮管理有限公司 | 洗地机-全自动/手推式洗地机-扫地车厂家_扬子清洁设备 | 蜘蛛车-高空作业平台-升降机-高空作业车租赁-臂式伸缩臂叉装车-登高车出租厂家 - 普雷斯特机械设备(北京)有限公司 | 灌装封尾机_胶水灌装机_软管灌装封尾机_无锡和博自动化机械制造有限公司 | 钢制暖气片散热器_天津钢制暖气片_卡麦罗散热器厂家 | 云南成人高考_云南成考网| J.S.Bach 圣巴赫_高端背景音乐系统_官网 | 中国产业发展研究网 - 提供行业研究报告 可行性研究报告 投资咨询 市场调研服务 | 2-羟基泽兰内酯-乙酰蒲公英萜醇-甘草查尔酮A-上海纯优生物科技有限公司 | 广东青藤环境科技有限公司-水质检测| UV固化机_UVLED光固化机_UV干燥机生产厂家-上海冠顶公司专业生产UV固化机设备 | 中空玻璃生产线,玻璃加工设备,全自动封胶线,铝条折弯机,双组份打胶机,丁基胶/卧式/立式全自动涂布机,玻璃设备-山东昌盛数控设备有限公司 | 北京开源多邦科技发展有限公司官网| 大功率金属激光焊接机价格_不锈钢汽车配件|光纤自动激光焊接机设备-东莞市正信激光科技有限公司 定制奶茶纸杯_定制豆浆杯_广东纸杯厂_[绿保佳]一家专业生产纸杯碗的厂家 | 杭州厂房降温,车间降温设备,车间通风降温,厂房降温方案,杭州嘉友实业爽风品牌 | 压接机|高精度压接机|手动压接机|昆明可耐特科技有限公司[官网] 胶泥瓷砖胶,轻质粉刷石膏,嵌缝石膏厂家,腻子粉批发,永康家德兴,永康市家德兴建材厂 | 818手游网_提供当下热门APP手游_最新手机游戏下载 | 岛津二手液相色谱仪,岛津10A液相,安捷伦二手液相,安捷伦1100液相-杭州森尼欧科学仪器有限公司 | 气动绞车,山东气动绞车,气动绞车厂家-烟台博海石油机械有限公司 气动隔膜泵厂家-温州永嘉定远泵阀有限公司 | 安规_综合测试仪,电器安全性能综合测试仪,低压母线槽安规综合测试仪-青岛合众电子有限公司 | 企业微信营销_企业微信服务商_私域流量运营_艾客SCRM官网 | pH污水传感器电极,溶解氧电极传感器-上海科蓝仪表科技有限公司 | 扬尘监测_扬尘监测系统_带证扬尘监测设备 - 郑州港迪科技有限公司 | RS系列电阻器,RK_RJ启动调整电阻器,RQ_RZ电阻器-上海永上电器有限公司 | 广东健伦体育发展有限公司-体育工程配套及销售运动器材的体育用品服务商 | 智能电表|预付费ic卡水电表|nb智能无线远传载波电表-福建百悦信息科技有限公司 |