一、概要
本篇主要介绍两点,相关文档请查阅微信开平台 准备工作 | 微信开放文档
- 微信开放平台的登录授权相关流程
- 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的最终指向
最后,文章比较随意,有哪些地方介绍的不够好的还望路过的大神们指点一二,后续也会不断的完善文章!!!