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

---

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