企業微信端項目登陸、獲取用戶信息流程等

---

在開發之前，最好先過一遍官方的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。
後面就隨便玩了。