H5自建企微应用，企业微信获取用户信息（网页如何拿到code,后端如何根据code获得UserId)

原创

徐同保的博客 2022-12-27 23:59:57 博主文章分类：web前端 ©著作权

文章标签 前端 javascript html 微信第三方服务 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者徐同保的博客的原创作品，请联系作者获取转载授权，否则将追究法律责任

开始开发

最后更新：2019/08/08

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

OAuth2简介

OAuth2的设计背景，在于允许用户在不告知第三方自己的帐号密码情况下，通过授权方式，让第三方服务可以获取自己的资源信息。
详细的协议介绍，开发者可以参考RFC 6749。

下面简单说明OAuth2中最经典的Authorization Code模式，流程如下：

流程图中，包含四个角色。

ResourceOwner为资源所有者，即为用户
User-Agent为浏览器
AuthorizationServer为认证服务器，可以理解为用户资源托管方，比如企业微信服务端
Client为第三方服务

调用流程为：
A) 用户访问第三方服务，第三方服务通过构造OAuth2链接（参数包括当前第三方服务的身份ID，以及重定向URI），将用户引导到认证服务器的授权页
B) 用户选择是否同意授权
C) 若用户同意授权，则认证服务器将用户重向到第一步指定的重定向URI，同时附上一个授权码。
D) 第三方服务收到授权码，带上授权码来源的重定向URI，向认证服务器申请凭证。
E) 认证服务器检查授权码和重定向URI的有效性，通过后颁发AccessToken（调用凭证）

D)与E)的调用为后台调用，不通过浏览器进行

企业微信OAuth2接入流程

图1 企业微信OAuth2流程图

H5自建企微应用，企业微信获取用户信息（网页如何拿到code,后端如何根据code获得UserId)_微信

H5自建企微应用，企业微信获取用户信息（网页如何拿到code,后端如何根据code获得UserId)_第三方服务_02

H5自建企微应用，企业微信获取用户信息（网页如何拿到code,后端如何根据code获得UserId)_微信_03

H5自建企微应用，企业微信获取用户信息（网页如何拿到code,后端如何根据code获得UserId)_微信_04

H5自建企微应用，企业微信获取用户信息（网页如何拿到code,后端如何根据code获得UserId)_前端_05

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wwd70ee88af370290f&redirect_uri=http://yuying-api.xutongbao.top/index1.html&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wwd70ee88af370290f&redirect_uri=http://yuying-api.xutongbao.top/index1.html&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect

参考链接：

构造网页授权链接 - 接口文档 - 企业微信开发者中心

H5自建企微应用，企业微信获取用户信息（网页如何拿到code,后端如何根据code获得UserId)_前端_06

index1.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script
      src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"
      referrerpolicy="origin"
      ref
    ></script>
    <script src="lib/axios.min.js"></script>
  </head>
  <body>
    <div>
      <div>信息</div>
      <div>用户ID:<span id="m-user-id"></span></div>
      <div>群ID:<span id="m-chat-id"></span></div>
    </div>
    <script src="lib/vconsole.min.js"></script>
    <script>
      // VConsole will be exported to `window.VConsole` by default.
      var vConsole = new window.VConsole()
    </script>
    <script>
      console.log(location.href)
      axios({
        url: `http://yuying-api.xutongbao.top/api/light/tools/qiWeToken`,
        method: 'post',
        data: {
          url: location.href,
        },
      }).then((res) => {
        console.log(res)

        const agentFun = () => {
          const { timestamp, noncestr, signature } = res.data.data.agentData

          wx.agentConfig({
            corpid: 'wwd70ee88af370290f', // 必填，企业微信的corpid，必须与当前登录的企业一致
            agentid: '1000004', // 必填，企业微信的应用id （e.g. 1000247）
            timestamp, // 必填，生成签名的时间戳
            nonceStr: noncestr, // 必填，生成签名的随机串
            signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
            jsApiList: ['getCurExternalChat'], //必填，传入需要使用的接口名称
            success: function (res) {
              console.log(666, res)

              wx.invoke('getCurExternalChat', {}, function (res) {
                console.log(777, res)
                if (res.err_msg == 'getCurExternalChat:ok') {
                  let chatId = res.chatId //返回当前外部群的群聊ID
                  document.getElementById('m-chat-id').innerHTML = chatId
                } else {
                  //错误处理
                }
              })
              // 回调
            },
            fail: function (res) {
              console.log(res)
              if (res.errMsg.indexOf('function not exist') > -1) {
                alert('版本过低请升级')
              }
            },
          })

          console.log(timestamp, noncestr, signature)
        }

        agentFun()
        getUserInfo({
          access_token: res.data.data.corpData.tokenData.access_token,
        })
      })

      const parseQueryString = (url) => {
        let params = {}
        let arr = url.split('?')
        if (arr.length <= 1) {
          return params
        }
        arr = arr[1].split('&')
        for (let i = 0, l = arr.length; i < l; i++) {
          let a = arr[i].split('=')
          params[a[0]] = a[1]
        }
        return params
      }

      const getUserInfo = ({ access_token }) => {
        let qs = parseQueryString(location.href)
        let code = qs.code
        axios({
          url: `http://yuying-api.xutongbao.top/api/light/tools/qiWeUserInfo`,
          method: 'post',
          data: {
            code,
          },
        }).then((res) => {
          console.log(res)
          if (res.data.code === 200) {
            document.getElementById('m-user-id').innerHTML = res.data.data.UserId
          }
        })
      }
    </script>
  </body>
</html>

const toolsQiWeUserInfo = async (req, res) => {
  const { code } = req.body
  axios({
    url: 'https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=wwd70ee******0290f&corpsecret=JrPSfOHlNz*********HwAxyUdUDu8',
  }).then((resData) => {
    let access_token = resData.data.access_token

    axios({
      url: `https://qyapi.weixin.qq.com/cgi-bin/user/getuserinfo`,
      params: {
        access_token,
        code,
        debug: 1,
      },
    }).then((resData) => {
      console.log(res)
      res.send({
        code: 200,
        data: resData.data,
        message: '成功',
      })
    })
  })
}