企业微信自建应用开发详细教程，如何获取授权链接？如何使用js-sdk?

前言

最近做了一个需求，那就是把原有的一个h5项目迁移到企业微信里面，这是我之前没有做过的，特意来写一篇文章记录一下开发过程中遇到的一些坑，别说，坑是真不少，废话少说，直接上实操和代码。

可信域名

这是第一个坑，要调试的话，必须得先设置可信域名，在企业微信管理后台设置可信域名，先下载一个文件，放在你的域名能访问的根目录下，就能设置好可信域名了。

如何获取code？

企业微信提供了一个授权链接的方式，去获取code，简而言之，就是把自己的地址加密一下，通过传参的方式传给企业微信，而它则通过跳转路由的方式给你带过来code。
这个授权链接分为两种，一种是手动授权链接，一种是静默授权链接，建议使用手动授权链接。
手动授权链接可以拿到用户的个人敏感信息包括：企业微信头像、手机号、邮箱。
相关代码如下：

const getCode = () => {let url = encodeURIComponent(location.href);const urls = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=snsapi_privateinfo&agentid=${agentid}&state=highSeas#wechat_redirect`;let code = getUrlParam('code');if (!code) {window.location.href = urls;} else {if (!sessionStorage.getItem('token')) {// 没有token的，调用登录接口去获取tokenqiweiLogin(code as string);} else {// 有token的话就证明已经登录成功了}}
}// 获取url参数
const getUrlParam = (name: string) => {const res: any = {};if (location.search.indexOf('?') == -1) return;const search = location.search.split('?')[1]; // #前面的参数 返回类似于 a=10&b=20&c=30const paramArr = search.split('&');paramArr.forEach((item) => {const itemArr = item.split('=');const key = itemArr[0];const value = itemArr[1];res[key] = value;});return res[name] !== undefined ? res[name] : null;
};

如何注册js-sdk？

首先，要生成js-sdk签名，这就要看JS-SDK 签名算法，还要让后端配合去调用获取企业 jsapi_ticket的接口，可以在调用登录接口的时候，后端拿到token，然后让后端调用一下这个接口，把jsapi_ticket在登录接口一块返回给你。它和token的失效时间是一致的，我是统一把他们存在session里面了。
拿到这个票据之后，就好说了。

第一步下载包

npm install @wecom/jssdk
npm install crypto-js

第二步引用包

import * as ww from '@wecom/jssdk'
import CryptoJS from 'crypto-js';

第三步注册js-sdk

  // 注册jsApiconst registerApi = () => {ww.register({corpId: '你的企业id', // 必填，当前用户企业所属企业IDagentId: 你的应用id(数字类型), // 必填，当前应用的AgentIDjsApiList: ['hideOptionMenu'], // 必填，需要使用的JSAPI列表getConfigSignature, // 必填，根据url生成企业签名的回调函数});// 测试隐藏菜单ww.hideOptionMenu();};const getConfigSignature = async () => {// 根据 url 生成企业签名// 生成方法参考 https://developer.work.weixin.qq.com/document/14924let timestamp = Math.floor(Date.now() / 1000);let nonceStr = Math.random().toString(36).substr(2);let url = location.href.split('#')[0];let jsapi_ticket = sessionStorage.getItem('jsapi_ticket') || '';let string1 = `jsapi_ticket=${jsapi_ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${url}`;let signature = CryptoJS.SHA1(string1).toString();return { timestamp, nonceStr, signature };};

记住registerApi 方法一定要在登录完成以后，保存好jsapi_ticket之后调用哦。

疑难杂症

这个里面有一个监听页面返回的事件ww.onHistoryBack(callback)，试了好多次都没有触发，有实现的，希望大佬指点一下。

总结

虽然，总结下来没有几步，看起来挺简单的，但是在开发过程中是有很多坑的，希望通过这篇文章可以帮助大家避坑。

关注我，不迷路。
不定时分享前端相关问题以及解决方案。
希望能帮助每个在开发类似功能的小伙伴。