当前位置:首页 >> 网络编程

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"color: #ff0000">补充知识: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"htmlcode">
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('"_blank" href="https://github.com/wkl007/vue-wechat-login">vue-wechat-login,查看对应分支即可。

2019.7.23更新

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

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