共计 3654 个字符，预计需要花费 10 分钟才能阅读完成。
在开发之前，最好先过一遍官方的 API，不然很难往下进行。企业微信 API
先介绍几个基本的概念：
- cropid
每个企业都拥有一个唯一的 cropid，要获取次信息可在管理后台“我的企业”-“企业信息”下查看“企业 ID”（这个需要管理员权限的）
- userid
每个成员都有一个唯一的 userid，其实就是账号，在管理后台 -“通讯录”- 点某个成员的详情页就可以看到了
- 部门 id
每个部门的唯一 id，在管理后台 -“通讯录”-“组织结构”- 点击某个部门右边的小圆点可以看到
- tagid
每个标签都有一个唯一的 id，在管理后台 -“通讯录”-“标签”，选中某个标签，在右上角有个“标签详情”按钮，就可以看到了。
- agentid
每个应用都有一个唯一的 id，在管理后台 -“应用与小程序”-“应用”，点击某个应用，就可以看到了。
- appid
appid 就是开发者 id，是开发的识别码，配合开发者密码，可调用公众号的接口能力。
- secret
secret 是企业应用里面用于保障数据安全的“钥匙”，每一个应用都有一个独立的访问秘钥，为了保证数据的安全，secret 务必不能泄露。
- access_token
access_token 是企业后台去企业微信的后台获取信息时的重要票据，由 cropid 和 secret 产生，所有的接口在通信时候都需携带此信息用于验证接口的访问权限。(access_token
请求地址：https://qyapi.weixin.qq.com/c…
返回结果前端会拿到 access_token，结果如下：
{
“errcode”: 0,
“errmsg”: “ok”,
“access_token”: “accesstoken000001”,
“expires_in”: 7200
}
首先，获取 access_token 是调用企业微信 API 接口的第一步，相当于创建一个登陆凭证，其他业务 API 接口，多需要依赖 access_token 来鉴权调用者身份。因此，开发者在使用业务接口前，要明确 access_token 的颁发来源，使用正确的 access_token。
步入正题吧
- 身份认证
网页授权登陆：企业微信提供了 OAuth 的授权登陆方式，可以让从企业微信终端打开网页获取成员的身份信息，从而避免登陆环节。企业应用中的 URL 链接（包括自定义菜单或者消息中心中的链接），均可通过 OAuth2.0 验证接口来获取成员的 UserId 身份信息。
在进入我们开发的项目之前，我们需要先访问第三方服务构造的 OAuth2 链接（参数包括当前第三方服务的身份 ID，以及重定向 URL），将用户引导到认证服务器的授权页面。这里建议企业应用中的 URL 链接直接填写自己企业的页面地址。成员操作跳转到企业页面时，企业后台校验是否有标识识别成员身份的信息，根据获取的信息在进入相应的页面。
下面贴一下 获取用户信息的方法 ：
第一步需要构造如下链接来获取 code 参数，我这边贴一下我实际开发中构造的 url：
function getToken(str) {
const appId = Env.appId
const redirectUrl = encodeURIComponent(`${Env.url}?str=${str||0}`)
const agentId = Env.agentId
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_base&agentid=${agentId}&state=STATE#wechat_redirect`
}说明一下各个参数代表什么意思。
appid：企业的 cropid
redirect_uri：授权后重定向的回调链接地址，要使用 urlencode 对连接进行处理
response_type：返回类型，此时固定为：code
scope：应用授权作用域，企业自建应用固定填写：snsapi_base
state：重定向后会带上 state 参数，企业可填写 a -zA-Z0- 9 的参数值，长度不可超过 128 个字节
wechat_redirect：终端使用此参数判断是否需要带上身份信息
当员工点击后，页面将跳转至 redirect_uri?code=CODE&state=STATE, 这时候企业可根据拿到的 code 获得员工的 userid。
下面是进入之前的登陆判断：
enterWxAuthor () {
// 获取用户 token
var _this = this;
var wxUserInfo = sessionStorage.getItem("userToken");
var code = GetQueryString("code");
if (!wxUserInfo) {if (code) {_this.getTokenKey();
} else {
// 没有微信用户信息，没有授权 -->> 需要授权，跳转授权页面
getToken()}
} else {
// 初始化页面
_this.init();}
},getTokenKey 方法：
getTokenKey: function () {
// 获取用户信息，token 权限
var _this = this;
// 通过 code 获得用户 token
var url = 'api/....';
// 这里的 code 就是我们上面构造的 OAuth 链接的 code 参数
var code = GetQueryString("code");
ajax(url, {WXTicket: code}, '').then(function (res) {
// 去除 url 中 code，目的是为了避免重复 code
if (window.history.replaceState) {
window.history.replaceState('','', window.location.href.replace(/&code=.*?(?=[&#\/])|code=.*?(?=[&#\/])&?/, ''));
} else {if (/code=/.test(window.location.href)) {window.location.href = window.location.href.replace(/&code=.*?(?=[&#\/])|code=.*?(?=[&#\/])&?/,
'');
}
}
_Set('tokenStr', res.data)
if (res.data.Data) {sessionStorage.setItem('userToken', res.data.Data.Token)
}
_this.init()})
},GetQueryString 方法：
function GetQueryString(name) {let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
let r = window.location.search.substr(1).match(reg)
if (r !== null) return unescape(r[2])
return null;
}
这里要注意一下处理微信端的一些问题。有的用户喜欢把微信的默认字体设置的很大，这就会引起页面布局错乱，下面是把重写设置网页字体大小的方法：
// 禁止微信浏览器缩放
(function () {if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {handleFontSize();
} else {if (document.addEventListener) {document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
} else if (document.attachEvent) {document.attachEvent("WeixinJSBridgeReady", handleFontSize);
document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
}
}
function handleFontSize() {
// 设置网页字体为默认大小
WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});
// 重写设置网页字体大小的事件
WeixinJSBridge.on('menu:setfont', function () {WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});
});
}
})();
大致的流程就是这样。总结一下就是：进入系统之前要先走一下微信的 OAuth 链接，拿到 code，再凭借 code 获取用户的 token。
后面就随便玩了。
