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

在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

示例:

const redirectUrl = encodeURIComponent(`${window.location.origin}/callback`);  
const state = '123'; // 用于防止CSRF攻击，可以是任意字符串
const appId = 'your_app_id'; // 企业微信应用ID
const scope = 'snsapi_base'; // 授权类型，snsapi_base或snsapi_privateinfo
const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUrl}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
window.location.href = url;

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

 

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

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

在router.beforeEach中进行判断：

router.beforeEach((to, from, next) => {
  const token = getToken() // token
  const redirectUrl = encodeURIComponent(`${window.location.origin}`) // 重定向url
  const appId = 'ww****123' // 企业微信ID
  const scope = 'snsapi_base' // 授权类型，snsapi_base(静默授权)或snsapi_privateinfo（手动授权）
  const urlState = '123' // 用于防止CSRF攻击，可以是任意字符串
  const agentid = '123***123' // 企业内应用id
  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`
  setTimeout(() => {
    if (token) { // 已登录，有token
      if (to.path === '/login') {
        next({
          path: '/'
        })
      } else {
        next()
      }
    } else { // 没有token，去授权
      window.location.href = openUrl
    }
  }, 0)
})

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

function delCodeandstate (to) {
  let path = ''
  for (const i in to.query) {
    if (i != 'code' && i != 'state') {
      path = path + '&' + i + '=' + to.query[i]
    }
  }
  path = path == '' ? '' : path.substring(1, path.length)
  path = path == '' ? '' : '/?' + path
  return path
}

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

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

补全完整逻辑：

import router from './router'
import store from './store'

import { getToken } from './auth'

// 去除链接中的code和state
function delCodeandstate (to) {
  let path = ''
  for (const i in to.query) {
    if (i != 'code' && i != 'state') {
      path = path + '&' + i + '=' + to.query[i]
    }
  }
  path = path == '' ? '' : path.substring(1, path.length)
  path = path == '' ? '' : '/?' + path
  return path
}
router.beforeEach((to, from, next) => {
  var fullPath = to.fullPath
  // 判断是否存在code
  if (fullPath.includes('code')) {
    fullPath = delCodeandstate(to)
  }
  const token = getToken() // 获取token
  const redirectUrl = encodeURIComponent(`${window.location.origin}`) // 授权登陆后的回调地址，需要进行encodeURIComponent处理
  const appId = 'ww****123' // 企业微信ID
  const scope = 'snsapi_base' // 授权类型，snsapi_base(静默授权)或snsapi_privateinfo(手动授权)
  const urlState = '123' // 用于防止CSRF攻击，可以是任意字符串
  const agentId = '123***123' // 企业内应用id
  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`
  const code = to.query.code // 链接中code
  const state = to.query.state // 链接中state
  const whiteList = ['/login'] // 免登录白名单
  let isCur = false // 是否免登录
  setTimeout(() => {
    // 判断白名单
    for (const i of whiteList) {
      if (to.path == i) {
        isCur = true
      }
    }
    if (isCur) {
      next() // 白名单内不做登录判断，直接next
    } else {
      if (code && state && !token) {
        // 获得授权后，不存在登录信息
        const fd = {
          code: code,
          state: state
        }
        // 接口请求获取登录信息，根据自己逻辑配置
        store.dispatch('WXCallback', fd).then((res) => {
          next({
            path: '/'
          })
        }).catch(() => {
        })
      } else if (token) {
        // 已经存在登录信息，有token，判断token是否过期
        store.dispatch('CheckToken').then((res) => {
          // 判断token是否过期，以及token过期后清除token的操作可以在request的拦截中进行，也可以在CheckToken中进行
          if (res.code == 200) {
            // token未过期，直接登录
            next({
              path: '/'
            })
          } else if (res.code == 401) {
            // token已过期，重新授权登录
            window.location.href = openUrl
          }
        }).catch(() => {
        })
      } else { // 未登录，没有token，进行授权登录
        window.location.href = openUrl
      }
    }
  }, 0)
})

 

二、扫码授权

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

 

构造独立窗口登录二维码

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

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

import router from './router'
import store from './store'

import { getToken } from './auth'

// 去除链接中的code和state
function delCodeandstate (to) {
  let path = ''
  for (const i in to.query) {
    if (i != 'code' && i != 'state') {
      path = path + '&' + i + '=' + to.query[i]
    }
  }
  path = path == '' ? '' : path.substring(1, path.length)
  path = path == '' ? '' : '/?' + path
  return path
}
router.beforeEach((to, from, next) => {
  var fullPath = to.fullPath
  // 判断是否存在code
  if (fullPath.includes('code')) {
    fullPath = delCodeandstate(to)
  }
  const token = getToken() // 获取token
  const redirectUrl = encodeURIComponent(`${window.location.origin}`) // 授权登陆后的回调地址，需要进行encodeURIComponent处理
  const appId = 'ww****123' // 企业微信ID
  const urlState = '123' // 用于防止CSRF攻击，可以是任意字符串
  const agentId = '123***123' // 企业内应用id
 const openUrl = `https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=${appId}&agentid=${agentId}&redirect_uri=${redirectUrl}&state=${urlState}`
  const code = to.query.code // 链接中code
  const state = to.query.state // 链接中state
  const whiteList = ['/login'] // 免登录白名单
  let isCur = false // 是否免登录
  setTimeout(() => {
    // 判断白名单
    for (const i of whiteList) {
      if (to.path == i) {
        isCur = true
      }
    }
    if (isCur) {
      next() // 白名单内不做登录判断，直接next
    } else {
      if (code && state && !token) {
        // 获得授权后，不存在登录信息
        const fd = {
          code: code,
          state: state
        }
        // 接口请求获取登录信息，根据自己逻辑配置
        store.dispatch('WXCallback', fd).then((res) => {
          next({
            path: '/'
          })
        }).catch(() => {
        })
      } else if (token) {
        // 已经存在登录信息，有token，判断token是否过期
        store.dispatch('CheckToken').then((res) => {
          // 判断token是否过期，以及token过期后清除token的操作可以在request的拦截中进行，也可以在CheckToken中进行
          if (res.code == 200) {
            // token未过期，直接登录
            next({
              path: '/'
            })
          } else if (res.code == 401) {
            // token已过期，重新授权登录
            window.location.href = openUrl
          }
        }).catch(() => {
        })
      } else { // 未登录，没有token，进行授权登录
        window.location.href = openUrl
      }
    }
  }, 0)
})

 

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

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

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

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