企业微信网页授权登录

网页授权登录

概述

从企业微信终端打开的网页获取成员的身份信息，从而免去登录的环节。
企业应用中的URL链接（包括自定义菜单或者消息中的链接），均可通过OAuth2.0验证接口来获取成员的UserId身份信息。

设置“可信域名”

URL的域名，必须匹配企业应用设置项中的“可信域名”，否则跳转时会提示“redirect_uri参数错误”(匹配规则请看可信检验规则)。因此需要先配置应用的可信域名。

企业微信截图_00.png

登录到企业管理端后台，选择“企业应用”选项卡，进入需要使用网页授权的应用并编辑“可信域名”表单项，此选项将用于网页OAuth2.0授权的时候进行安全验证。请注意，这里填写的是域名，而不是URL，因此请勿加 http:// 等协议头。

前端流程

• 调用后端接口获取构造链接，JS打开构造链接，获取code
• 调用后端接口根据code参数获得员工的userid

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

// 打开链接，页面将跳转至
redirect_uri?code=CODE&state=STATE
例如：
https://vi.com/home?code=bQIyNHUkJenaDKD9OJH3TB-Jva1_4JHBeGvDEUUfuYXmE&state=STATE

项目案例：

async created(){
   // 用户首次打开链接没有 code，调接口获取 OAuth2 链接
   if (!this.$route.query.code) {
      this.getOAuth()
   }
   // OAuth2 链接带 code
   else {
      // 没有UserId，使用code获取UserId
      if (!localStorage.UserId) {
        await this.getUserID()
      }
      // 有token，再去请求其它接口
      this.getList() 
   }
},
methods:{
    /* 获取OAuth2链接，打开 */
    getOAuth() {
      const urlHref = location.href
      // 传当前 url 给后端
      getOAuth(urlHref).then(res => {
        const url = res.asstokenUrl
        // 跳转到构造链接
        url && (location.href = url)
      })
    },
    /* 根据构造链接的 code 获取 UserId */
    getUserID() {
      return new Promise(resolve => {
        getUserID({
          code: this.$route.query.code
        }).then(res => {
          if (res.errcode == 0) {
            localStorage.UserId = res.UserId
            resolve()
          }
          // 获取 UserId 出错
          else {
            Toast({
              type: 'fail',
              message: '认证过期！',
              duration: 3000
            })
          }
        })
      })
    },
}