vue中给企业微信自建应用授权（静默授权，手动授权，扫码授权）

2023-08-15 11:26| 来源: 网络整理| 查看: 265

在web开发中，会遇到通过企业微信授权的形式进行免登录或快速登录的需求。

如果该应用是企业微信自建应用，那可以在管理平台获取到相应的appId和agentid等必要参数。

企业微信提供了OAuth的授权登录方式，可以让从企业微信终端打开的网页获取成员的身份信息，从而免去登录的环节。

现在已经搭建好vue的项目并且企业微信应用相关参数也已经获取到，那就开始吧。

一、静默授权与手动授权静默授权：用户点击链接后，页面直接302跳转至 redirect_uri?code=CODE&state=STATE 手动授权：用户点击链接后，会弹出一个中间页，让用户选择是否授权，用户确认授权后再302跳转至 redirect_uri?code=CODE&state=STATE

构造网页授权链接

https://open.weixin.qq.com/connect/oauth2/authorize?appid=CORPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=STATE&agentid=AGENTID#wechat_redirect

示例:

此时会提示在企业微信环境中打开链接，页面将跳转至 redirect_uri?code=CODE&state=STATE，企业可根据code参数获得员工的userid。code长度最大为512字节。

接下来步入正题：在vue项目中配置。

其实vue项目中我们已经做过登录的路由守卫，那现在免登录其实就是对登录逻辑的调整，那就直接载permission.js中修改就行。

在router.beforeEach中进行判断：

1 router.beforeEach((to, from, next) => { 2 const token = getToken() // token 3 const redirectUrl = encodeURIComponent(`${window.location.origin}`) // 重定向url 4 const appId = 'ww****123' // 企业微信ID 5 const scope = 'snsapi_base' // 授权类型，snsapi_base(静默授权)或snsapi_privateinfo（手动授权） 6 const urlState = '123' // 用于防止CSRF攻击，可以是任意字符串 7 const agentid = '123***123' // 企业内应用id 8 const openUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUrl}&response_type=code&scope=${scope}&state=${urlState}&agentid=${agentid}#wechat_redirect` 9 setTimeout(() => { 10 if (token) { // 已登录，有token 11 if (to.path === '/login') { 12 next({ 13 path: '/' 14 }) 15 } else { 16 next() 17 } 18 } else { // 没有token，去授权 19 window.location.href = openUrl 20 } 21 }, 0) 22 })

在 window.location.href = openUrl 后会重定向返回code和state,根据这两个字段来获取用户信息，所以得先判断我们的路由中是否带有这两个字段，如果有要先去除：

1 function delCodeandstate (to) { 2 let path = '' 3 for (const i in to.query) { 4 if (i != 'code' && i != 'state') { 5 path = path + '&' + i + '=' + to.query[i] 6 } 7 } 8 path = path == '' ? '' : path.substring(1, path.length) 9 path = path == '' ? '' : '/?' + path 10 return path 11 }

注意：因为企业微信返回的code和state是固定的，所以避免判断出现混淆，我们在路由切换中避免使用code和state作为传参关键字，清除链接中的code和state避免页面反复跳转。

如果获取到code和state，还要和token一起作为判断条件，判断token是否存在并且是否过期等。

补全完整逻辑：

1 import router from './router' 2 import store from './store' 3 4 import { getToken } from './auth' 5 6 // 去除链接中的code和state 7 function delCodeandstate (to) { 8 let path = '' 9 for (const i in to.query) { 10 if (i != 'code' && i != 'state') { 11 path = path + '&' + i + '=' + to.query[i] 12 } 13 } 14 path = path == '' ? '' : path.substring(1, path.length) 15 path = path == '' ? '' : '/?' + path 16 return path 17 } 18 router.beforeEach((to, from, next) => { 19 var fullPath = to.fullPath 20 // 判断是否存在code 21 if (fullPath.includes('code')) { 22 fullPath = delCodeandstate(to) 23 } 24 const token = getToken() // 获取token 25 const redirectUrl = encodeURIComponent(`${window.location.origin}`) // 授权登陆后的回调地址，需要进行encodeURIComponent处理 26 const appId = 'ww****123' // 企业微信ID 27 const scope = 'snsapi_base' // 授权类型，snsapi_base(静默授权)或snsapi_privateinfo(手动授权) 28 const urlState = '123' // 用于防止CSRF攻击，可以是任意字符串 29 const agentId = '123***123' // 企业内应用id 30 const openUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUrl}&response_type=code&scope=${scope}&state=${urlState}&agentid=${agentId}#wechat_redirect` 31 const code = to.query.code // 链接中code 32 const state = to.query.state // 链接中state 33 const whiteList = ['/login'] // 免登录白名单 34 let isCur = false // 是否免登录 35 setTimeout(() => { 36 // 判断白名单 37 for (const i of whiteList) { 38 if (to.path == i) { 39 isCur = true 40 } 41 } 42 if (isCur) { 43 next() // 白名单内不做登录判断，直接next 44 } else { 45 if (code && state && !token) { 46 // 获得授权后，不存在登录信息 47 const fd = { 48 code: code, 49 state: state 50 } 51 // 接口请求获取登录信息，根据自己逻辑配置 52 store.dispatch('WXCallback', fd).then((res) => { 53 next({ 54 path: '/' 55 }) 56 }).catch(() => { 57 }) 58 } else if (token) { 59 // 已经存在登录信息，有token，判断token是否过期 60 store.dispatch('CheckToken').then((res) => { 61 // 判断token是否过期，以及token过期后清除token的操作可以在request的拦截中进行，也可以在CheckToken中进行 62 if (res.code == 200) { 63 // token未过期，直接登录 64 next({ 65 path: '/' 66 }) 67 } else if (res.code == 401) { 68 // token已过期，重新授权登录 69 window.location.href = openUrl 70 } 71 }).catch(() => { 72 }) 73 } else { // 未登录，没有token，进行授权登录 74 window.location.href = openUrl 75 } 76 } 77 }, 0) 78 })

二、扫码授权

企业微信提供了OAuth的扫码登录授权方式，可以让企业的网站在浏览器内打开时，引导成员使用企业微信扫码登录授权，从而获取成员的身份信息，免去登录的环节。

构造独立窗口登录二维码

https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=CORPID&agentid=AGENTID&redirect_uri=REDIRECT_URI&state=STATE

代码逻辑与网页授权一直，只是授权链接不同：

1 import router from './router' 2 import store from './store' 3 4 import { getToken } from './auth' 5 6 // 去除链接中的code和state 7 function delCodeandstate (to) { 8 let path = '' 9 for (const i in to.query) { 10 if (i != 'code' && i != 'state') { 11 path = path + '&' + i + '=' + to.query[i] 12 } 13 } 14 path = path == '' ? '' : path.substring(1, path.length) 15 path = path == '' ? '' : '/?' + path 16 return path 17 } 18 router.beforeEach((to, from, next) => { 19 var fullPath = to.fullPath 20 // 判断是否存在code 21 if (fullPath.includes('code')) { 22 fullPath = delCodeandstate(to) 23 } 24 const token = getToken() // 获取token 25 const redirectUrl = encodeURIComponent(`${window.location.origin}`) // 授权登陆后的回调地址，需要进行encodeURIComponent处理 26 const appId = 'ww****123' // 企业微信ID 27 const urlState = '123' // 用于防止CSRF攻击，可以是任意字符串 28 const agentId = '123***123' // 企业内应用id 29 const openUrl = `https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=${appId}&agentid=${agentId}&redirect_uri=${redirectUrl}&state=${urlState}` 30 const code = to.query.code // 链接中code 31 const state = to.query.state // 链接中state 32 const whiteList = ['/login'] // 免登录白名单 33 let isCur = false // 是否免登录 34 setTimeout(() => { 35 // 判断白名单 36 for (const i of whiteList) { 37 if (to.path == i) { 38 isCur = true 39 } 40 } 41 if (isCur) { 42 next() // 白名单内不做登录判断，直接next 43 } else { 44 if (code && state && !token) { 45 // 获得授权后，不存在登录信息 46 const fd = { 47 code: code, 48 state: state 49 } 50 // 接口请求获取登录信息，根据自己逻辑配置 51 store.dispatch('WXCallback', fd).then((res) => { 52 next({ 53 path: '/' 54 }) 55 }).catch(() => { 56 }) 57 } else if (token) { 58 // 已经存在登录信息，有token，判断token是否过期 59 store.dispatch('CheckToken').then((res) => { 60 // 判断token是否过期，以及token过期后清除token的操作可以在request的拦截中进行，也可以在CheckToken中进行 61 if (res.code == 200) { 62 // token未过期，直接登录 63 next({ 64 path: '/' 65 }) 66 } else if (res.code == 401) { 67 // token已过期，重新授权登录 68 window.location.href = openUrl 69 } 70 }).catch(() => { 71 }) 72 } else { // 未登录，没有token，进行授权登录 73 window.location.href = openUrl 74 } 75 } 76 }, 0) 77 })

注意：静默授权和扫码授权只能获取用户基本信息，若要用户敏感信息需要手动授权。

基本信息：用户id,座机号，姓名，别名

敏感信息：手机号，性别，邮箱，企业邮箱，头像url，个人二维码，地址

好了到此就是关于静默授权、手动授权、扫码授权的相关操作。

【本文地址】

公司简介

联系我们

vue中 给企业微信自建应用授权（静默授权，手动授权，扫码授权）

vue中给企业微信自建应用授权（静默授权，手动授权，扫码授权）