# 企业微信(第三方应用)扫码登录

# 准备工作

你一共需要准备以下内容:

  1. 注册 Authing 开发者账号
    在创建账号的引导过程中,你会得到一个二级域名,在后面会用到。
  2. 申请一个企业微信服务商账号
  3. 在 Authing 控制台填入企业微信信息

# 在 Authing 控制台找到「企业微信扫码授权登录」

按照下图找到「企业微信扫码授权登录」配置。

企业微信扫码授权登录

之后你需要将相关配置填入下面的表单:

企业微信扫码授权登录相关配置

# 添加 IP 白名单

请将下面这几个 IP 添加到白名单:

175.102.179.59;123.207.175.159;123.206.254.171;123.206.70.134

你可在 服务商信息 - 基本信息 页面进行配置。

# 获取服务商基础配置

你需要提供 CorpID 和 ProviderSecret,可在 应用管理 - 通用开发参数 页面获取:

之后填入上文提示的表单。

# 添加登录授权发起域名

如果你要使用 Guard 登录,请将你在 Authing 的二级域名加入登录授权发起域名列表:

# 配置回调链接 Redirect URL

如果你使用 Guard,可以留空填 「#」。

如果你需要手动接入企业微信扫码登录,需要填写你的业务回调链接,用户授权之后,Authing 将会把用户信息回调给你。

# 开始接入

如果你使用 Authing 自定义登录表单 Guard,不需要进行下面的手动代码接入。

# 拼接扫码登录授权链接

GET
https://core.authing.cn/oauth/wechatwork/:userPoolId/qrconnect-url

获取企业微信扫码授权登录链接,此链接需要在浏览器内访问!

Path Paramter
userPoolId
REQUIRED
string

用户池 ID

200: OK

比如你的用户池 ID 为 5e4cdd055df3df65dc58b97d,则你需要引导你的用户跳转到https://core.authing.cn/oauth/wechatwork/5e4cdd055df3df65dc58b97d/qrconnect-url

你可以在 Web 页面上放置一个可点击的按钮或 Logo 链接到上面的链接以便用户可以点击登录。

在浏览器中访问上述链接,你应该成功可以跳转企业微信扫码登录页面:

# 处理 Authing 回调数据

Authing 为你隐藏了和企业微信服务器的交互过程,你可以直接获取到用户信息。

上一步用户同意授权之后,会先跳转到 Authing 服务器,之后 Authing 会携带用户信息跳转到开发者在 Authing 控制台中配置的业务回调链接,并附带以下 Get 请求参数:

参数 说明
code 错误或成功代码,200 为成功,非 200 为失败
message 成功或错误信息
data userInfo 用户信息,若 code 为非 200 不返回此参数
bindOAuth 是否是登录操作, 无此参数或此参数为0则为登录, 此参数为1则为绑定账号操作, 此时可使用data参数中的数据绑定OAuth

Authing 回调给你的用户信息是经过加工过的,会自动注册到你的用户池,会和企业微信返回的原始数据不一样。

部分浏览器和 Web Server 在 URL 过长的情况下有可能出现 404,如 ASP.NET,这个时候需要修改一下配置,具体方式请见这个 StackOverflow 回答

data (用户信息)示例:

{
  email: '',
  phone: null,
  emailVerified: false,
  username: 'liaozhangjiang',
  nickname: 'LiaoZhangJiang',
  company: '',
  photo: 'http://wework.qpic.cn/bizmail/mKZmqeWl7K57rTUjpictGYYpRgOgv9hMibGFjXqC05RKOkEFoibOrbzCw/0',
  loginsCount: 9,
  registerMethod: 'oauth:wechatwork-qrconnect',
  blocked: false,
  isDeleted: false,
  oauth: '{"corpid":"ww736adab7f131153d","userid":"LiaoZhangJiang","deviceId":"883CBA07-87A3-46B2-94FF-6907D447D398","name":"LiaoZhangJiang","gender":"1","avatar":"http://wework.qpic.cn/bizmail/mKZmqeWl7K57rTUjpictGYYpRgOgv9hMibGFjXqC05RKOkEFoibOrbzCw/0","qr_code":"https://open.work.weixin.qq.com/wwopen/userQRCode?vcode=vcc027dee84b322352"}',
  metadata: '"{}"',
  _id: "5e7efb7ff0dfe6f2ffb64763",
  unionid: 'ww:ww736adab7f131153d:LiaoZhangJiang',
  openid: 'ww:ww736adab7f131153d:LiaoZhangJiang',
  lastIP: '::ffff:127.0.0.1',
  lastLogin: "2020-03-28T10:17:14.764Z",
  signedUp: "2020-03-28T07:23:43.764Z",
  token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7ImVtYWlsIjoiIiwidW5pb25pZCI6Ind3Ond3NzM2YWRhYjdmMTMxMTUzZDpMaWFvWmhhbmdKaWFuZyIsImlkIjoiNWU3ZWZiN2ZmMGRmZTZmMmZmYjY0NzYzIiwiY2xpZW50SWQiOiI1ZTRjZGQwNTVkZjNkZjY1ZGM1OGI5N2QifSwiaWF0IjoxNTg1MzkwNjM0LCJleHAiOjE1ODY2ODY2MzR9.Jt7ovlBgl_Lfb63lK5OWaClFDZypxUFP8J32TerBUDY',
  tokenExpiredAt: 2020-04-12T10:17:14.000Z
}

以下是使用 JavaScript 从 URL 参数中获取用户数据的代码:

// 获取 URL 参数
function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}

// 将 Code 转为 Int 类型,方便判断
const code = parseInt(getQueryString('code'));

if(code !== 200) {
  // 出错了
  const errorMsg = getQueryString('message');
  // 展示 errorMsg 给用户或执行其他业务 ...
  
}else {
  const userInfo = getQueryString('data');
  
  // 将 token 存储到 localStorage 
  // 建议在之后的请求中附带 Token,并由后端验证 Token 合法性
  localStorage.setItem('token', userInfo.token);
}

# 完成接入

恭喜你,此时已经接入了企业微信网页授权登录。获取到用户信息之后,你可以得到登录凭证 token,你可以在后续的 API 请求中携带上此 token, 然后在后端接口中根据此 token 区分不同用户,详情请见验证 token