vue3接入微信扫码授权登录流程

一、概要

本篇主要介绍两点，相关文档请查阅微信开平台准备工作 | 微信开放文档

微信开放平台的登录授权相关流程

vue3如何接入微信开放平台的微信授权登录功能

二、微信开放平台的登录授权相关流程

第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；

通过code参数加上AppID和AppSecret等，通过API换取access_token；

通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作

流程一
流程二

三、vue3如何接入微信开放平台的微信授权登录功能

前端获取二维码的方法

网页外链跳转方式

网页内嵌二维码方式

1.1 网页外链跳转展示二维码相关代码展示

/**
 * 
 * 页面跳转外链
 * 1. pc端直接点开链接 https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
 * 2. 前端发送请求给后端，后端返回二维码链接地址
 * 
 * 以下的代码展示主要是介绍第二点，这边以vue3为例
 */
<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { api } from '/@/api/wechat/index.ts'
const state = reactive({
  wechat: {
    url: ''
  }
});

// 获取微信登录二维码
const getWechatCode = () => {
  api().then((res: any) => {
    if (res.code == 200) {
      state.wechat.url = res.data.url
    }
  });
}

// 页面挂载时
onMounted(() => {
  getWechatCode();
});
</script>

2.1 网页内嵌二维码相关代码展示

/**
 * 
 * 网页内嵌二维码
 * 在需要使用微信登录的地方实例以下js对象
 */
<script setup lang="ts">
import { onMounted } from 'vue'

// 页面挂载时
onMounted(() => {
  setWxerwma();
});

// 实例微信js对象
const setWxerwma = () => {
  const s = document.createElement('script')
  s.type = 'text/javascript'
  s.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
  const wxElement = document.body.appendChild(s)
  wxElement.onload = function () {
    var obj = new WxLogin({
      id: '', // 需要显示的容器id
      appid: '', // 公众号appid wx*******
      scope: 'snsapi_login', // 网页默认即可
      redirect_uri: encodeURIComponent(''), // 授权成功后回调的url
      state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
      style: 'black', // 提供"black"、"white"可选。二维码的样式
      href: '' // 外部css文件url，需要https
    })
  }
}
</script>

2.2 使用第三方插件网页内嵌二维码

项目安装第三方插件

npm install vue-wxlogin --save-dev

封装微信二维码组件

<template>
  <div class="wxLogin">
    <span class="title">微信扫一扫登录</span>
    <div class="main_wx">
      <wxlogin
        v-if="state.weChat.appid && state.weChat.redirect_uri"
        :appid="state.weChat.appid"
        scope="snsapi_login"
        :redirect_uri="state.weChat.redirect_uri"
        :href="state.weChat.href"
        :state="state.weChat.state"
        :style="state.weChat.style"
      ></wxlogin>
    </div>
    <p>
      请使用微信扫描二维码登录
    </p>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import api from '@api/weChat/index'
interface State {
  weChat: {
    appid: string;
    redirect_uri: string;
    state: string;
    style: stirng;
    href: string;
  }
}
const state = reactive<State>({
  weChat: {
    appid: '', // 是开发者在微信开房平台提交申请后，获得appid和一个秘钥
    redirect_uri: '', // 这个是扫码后要跳转的页面，这个路径要urlEncode转码的，转码地址为  https://tool.chinaz.com/tools/urlencode.aspx 注意，要跳转的地址必须在申请的域名下面。
    state: Math.ceil(Math.random() * 1000),
    style: '' // 代表二维码的样式，有black和white可选，
    href: '' // 自定义样式链接
  }
});

// 获取微信appid和回调地址redirect_uri，指定内嵌的路由地址weChatLogin
const getWeChatUrl = () => {
  api.wachatQrUrl().then((res: any) => {
    if (res && res.code == 200) {
      state.weChat.appid = res.data.appId
      state.weChat.redirect_uri = res.data.wxCallbackUrl + 'weChatLogin'
    }
  })
}

// 页面挂载
onMounted(() => {
  getWeChatUrl();
})
</script>

当用户打开上面的二维码并扫码授权确认时，第三方应用跳转中间路由拿到微信返回的code参数，这时通过router.beforeEach函数中进行拦截判断，获取url中的code，根据code调用接口进行登录验证

import api from '@api/index';

router.beforeEach((to, from, next) => {
  let code = null
  if (to.name === '指定你项目中微信登陆页面的当前路由名称') {
    code = to.query.code || null
  }
  // 微信授权登陆
  if (code) {
    let params = {
      code,
      state:'',
    }
    // 调用后端接口将参数code传给后端，让后端根据code，appid，AppSecret等相关参数去微信平台换取access_token
    api.wechatLogin(params).then(res => {
      if (res.code == 200) {
        //返回参数如果绑定微信返回token正常存储登录未绑定账号返回unionid绑定当然也可以以微信信息为主题自动生成账号
        // 登录成功，并提示,跳转到用户主页面
        Message({
          type: 'success',
          message: '登录成功'
        })
        router.push({ path: '跳转指定页面' })
      }
    })
  } else {
    next()
  }
})

用户微信扫码授权登录

通过redirect_uri用户扫码向微信平台拉取重定向地址并返回给第三方应用code参数；

用户确认授权后通过后端API将code传给后端，后端通过拿到的code加上AppID和AppSecret等通过微信相关的API换取access_token，然后后端再进一步微信绑定操作，最后将相关用户信息和access_token返回给前端

获取access_token相关代码展示

<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import api from '/@/api/index.ts'

interface Params {
  code: string;
  state: string;
}
interface State {
  accessToken: string;
}

const router = useRouter();
const route = useRoute();
const state = reactive<State>({
  accessToken: ''
});

// 点击相关按钮向后端发起请求
const getAccessToken = () => {
  let params = <Params>{
    code: route.query.code,
    state: route.query.state
  }
  api.getAccessToken(params).then((res: any) => {
    if (res.code == 200) {
      state.accessToken = res.data.accessToken;
      // 登录成功，并提示,跳转到用户主页面
      Message({
        type: 'success',
        message: '登录成功'
      })
      router.push({ path: '跳转指定页面' })
    }
  })
}
</script>

注意：这里涉及到redirect_uri参数，用户扫码完成后微信拉取重定向地址都是根据redirect_uri参数拉取的，所以前端要配置好redirect_uri的最终指向

最后，文章比较随意，有哪些地方介绍的不够好的还望路过的大神们指点一二，后续也会不断的完善文章！！！