企业微信端项目登陆、获取用户信息流程等

在开发之前，最好先过一遍官方的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。
后面就随便玩了。

企业微信端项目登陆、获取用户信息流程等

相关推荐