注意:当前时间为2022-07-01, 企业微信文档更新很快,但是基本逻辑不变,本文仅供参考 [email protected]

一: 管理员权限(这一步前后端都可以操作)

让你的公司给你添加超级管理员权限, 这里一定不要用微信没绑定的手机号添加,尽量用微信号直接添加 , 可以在登录之后找到我的企业-微信插件-添加成员进行添加,
添加完管理员权限之后,登录 ==企业微信官网==,找到应用管理,最下面的自建,点击创建应用之后,填写 logo\名称\可见范围等信息,
创建完成之后,

注意这些信息, 先填写你的应用主页,注意一定要填写域名,不要写ip,接着打开你的hosts文件(一般在你的 C:\Windows\System32\drivers\etc 文件夹下), 添加形如 127.0.0.1 nh5.xtotoro.com 这样的代码

这是为了将你本地服务器代理到你填写的域名上在这里插入图片描述

往下找到 开发者接口中的网页授权及JS-SDK,设置可信域名填写主页的域名即可

设置可信域名

填写完你的域名之后,点击下载文件

设置可信域名

将你刚刚下载的文件放到服务器根目录下我这里放到了本地服务器根目录,打包发布时,不会将这个文件打包进去,所以发布时要将这个文件也丢进根目录

在这里插入图片描述

网页授权及JS-SDK授权完成之后,将旁边的企业微信授权登录和可信ip也设置一下

企业微信授权登录这里的ip写后端服务器的ip 在这里插入图片描述

二: 微信插件

这一步是为了你可以在微信开发者工具中方便调试,

登录之后找到我的企业-微信插件-邀请关注,使用 ==你绑定的微信(不是企业微信)== 扫描二维码关注你公司的账号,

邀请关注

再找到 我的企业-微信插件-开发者工具 将其勾选上

三:查看文档

如何获取应用接口凭证, 此时我们可以跟着教程走,拿到 corpid 和 secret ,corpid就是你的企业id,secret就是你刚刚创建的应用secret,同时你需要注意 secret上面的 agentid 待会可能会用到
教程中需要前端做的不多,但是文档中前端做的就很多,教程中前端只要做一件事, 构造网页授权链接
教程中我们可以看到,有很多的url链接
- 应用主页 URL: 这个就是你一开始填写的url,点开创建的应用就进入的页面(伪页面),用来做跳转
- 授权链接 URL:这个需要你自己手动构造一个 url,下一章节会讲到
- 重定向 URL: 这个就是你真正的首页,例如我填写的应用主页是 nh5.xtotoro.com/index ,但实际上这个页面只是用来跳转的, nh5.xtotoro.com/home 才是我真正的主页
教程中有很多迷惑的地方,就是前端后端都放在一起,导致我们不知道那块是前端做的,那块是后端做的, 例如
- access_token: 这个是后端拿到 corpid(企业ID) 和 secret(应用密钥)之后,跟腾讯获取的,不需要前端做,
- code: 这个才是前端需要做的,是通过 构造网页授权链接 获取的code,传给后端
- 于是后端拿到上面两个东西就可以跟腾讯换取用户信息(userId,deviceId之类)

四:构造网页授权链接(前端核心)

const appId = process.env.VITE_APPID // 此处换成你的 corpId(企业ID)
const agentid = process.env.VITE_AGENTID  // 此处换成你的 agentId(应用ID)
const redirect_uri = encodeURI(process.env.VITE_REDIRECT_URI) 
// const redirect_uri = encodeURI("https://nh5.xtotoro.com/home") // 重定向URL:真正的主页

/**
 * @param {string} scope 应用授权作用域
 * @param snsapi_base  静默授权，可获取成员的基础信息（UserId与DeviceId）
 * @param snsapi_privateinfo  手动授权，可获取成员的详细信息，包含头像、二维码等敏感信息 (***启用时需要加上agentid***)
 */

const createUrl = (scope) => { // 构造网页授权链接
  const baseURL = 'https://open.weixin.qq.com/connect/oauth2/authorize'
  let end
  if (scope === 'snsapi_privateinfo') { // 手动授权 需要 agentid
    end = `&response_type=code&scope=${scope}&state=STATE&agentid=${agentid}#wechat_redirect`
  } else {
    end = `&response_type=code&scope=${scope}&state=STATE#wechat_redirect`
  }
  const url = `${baseURL}?appid=${appId}&redirect_uri=${redirect_uri}${end}`
  return url
}

const getAuth = (scope = 'snsapi_privateinfo') => {
  location.href = createUrl(scope)
}
getAuth()

这里的 scope 授权作用域就是前面提到的,手动授权(snsapi_privateinfo)时需要用到agentid的地方!!!

根据文档显示在需要获取用户信息时,会使用到这个 scope 字段 , 它有静默授权(snsapi_base) 和手动授权(snsapi_privateinfo)的情况,静默授权没有弹窗也能获取用户信息,但获取的信息较少, 而手动授权获取的信息就相对多一点,但是使用手动授权的时候需要加上你的 agentid ,

获取用户授权如果你使用了手动授权,就会弹出这个界面,点击同意,就能重定向到真正的主页 nh5.xototoro.com/home 此时它会在链接后面拼上code值

得到code值

你可以从路由参数里面解析出来code值

function getCode() {
  const urlParams = new URLSearchParams(window.location.search)
  if (urlParams.get('code')) { // 如果能获取到code值就将其 return 出去
    return urlParams.getAll('code')[urlParams.getAll('code').length - 1]
  } else { // 如果获取不到,就重新跳转授权链接获取code
    return getAuth()
  }
}
// 获取完code 就可以调后端的接口 把 code 传过去

下文讲获取微信签名

企业微信自建应用-前端流程

一: 管理员权限(这一步前后端都可以操作)

二: 微信插件

三:查看文档

四:构造网页授权链接(前端核心)

猜你喜欢