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

前言
可信域名
如何获取code？
如何注册js-sdk？
总结

前言

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

可信域名

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

如何获取code？

企业微信提供了一个授权链接的方式，去获取code，简而言之，就是把自己的地址加密一下，通过传参的方式传给企业微信，而它则通过跳转路由的方式给你带过来code。

这个授权链接分为两种，一种是手动授权 链接，一种是静默授权 链接，建议使用手动授权 链接。

手动授权链接可以拿到用户的个人敏感信息 包括：企业微信头像、手机号、邮箱。

相关代码如下：

javascript 复制代码

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的，调用登录接口去获取token
	        qiweiLogin(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=30
	 const 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里面了。

拿到这个票据之后，就好说了。

第一步下载包

javascript 复制代码

npm install @wecom/jssdk
npm install crypto-js

第二步引用包

javascript 复制代码

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

第三步注册js-sdk

javascript 复制代码

  // 注册jsApi
  const registerApi = () => {
    ww.register({
      corpId: '你的企业id', // 必填，当前用户企业所属企业ID
      agentId: 你的应用id(数字类型), // 必填，当前应用的AgentID
      jsApiList: ['hideOptionMenu'], // 必填，需要使用的JSAPI列表
      getConfigSignature, // 必填，根据url生成企业签名的回调函数
    });
    // 测试隐藏菜单
    ww.hideOptionMenu();
  };
  const getConfigSignature = async () => {
    // 根据 url 生成企业签名
    // 生成方法参考 https://developer.work.weixin.qq.com/document/14924
    let 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)，试了好多次都没有触发，有实现的，希望大佬指点一下。

总结

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

关注我，不迷路。

不定时分享前端相关问题以及解决方案。

希望能帮助每个在开发类似功能的小伙伴。