摘要：步入正題吧身份認證網(wǎng)頁授權(quán)登陸企業(yè)微信提供了的授權(quán)登陸方式，可以讓從企業(yè)微信終端打開網(wǎng)頁獲取成員的身份信息，從而避免登陸環(huán)節(jié)。

在開發(fā)之前，最好先過一遍官方的API，不然很難往下進行。企業(yè)微信API

先介紹幾個基本的概念：

cropid

每個企業(yè)都擁有一個唯一的cropid，要獲取次信息可在管理后臺“我的企業(yè)”-“企業(yè)信息”下查看“企業(yè)ID”（這個需要管理員權(quán)限的）

userid

每個成員都有一個唯一的userid，其實就是賬號，在管理后臺-“通訊錄”-點某個成員的詳情頁就可以看到了

部門id

每個部門的唯一id，在管理后臺-“通訊錄”-“組織結(jié)構(gòu)”-點擊某個部門右邊的小圓點可以看到

tagid

每個標(biāo)簽都有一個唯一的id，在管理后臺-“通訊錄”-“標(biāo)簽”，選中某個標(biāo)簽，在右上角有個“標(biāo)簽詳情”按鈕，就可以看到了。

agentid

每個應(yīng)用都有一個唯一的id，在管理后臺-“應(yīng)用與小程序”-“應(yīng)用”，點擊某個應(yīng)用，就可以看到了。

appid

appid就是開發(fā)者id，是開發(fā)的識別碼，配合開發(fā)者密碼，可調(diào)用公眾號的接口能力。

secret

secret是企業(yè)應(yīng)用里面用于保障數(shù)據(jù)安全的“鑰匙”，每一個應(yīng)用都有一個獨立的訪問秘鑰，為了保證數(shù)據(jù)的安全，secret務(wù)必不能泄露。

access_token

access_token是企業(yè)后臺去企業(yè)微信的后臺獲取信息時的重要票據(jù)，由cropid和secret產(chǎn)生，所有的接口在通信時候都需攜帶此信息用于驗證接口的訪問權(quán)限。(access_token
請求地址： https://qyapi.weixin.qq.com/c...
返回結(jié)果前端會拿到access_token ，結(jié)果如下：
{
"errcode": 0,
"errmsg": "ok",
"access_token": "accesstoken000001",
"expires_in": 7200
}

首先，獲取access_token是調(diào)用企業(yè)微信API接口的第一步，相當(dāng)于創(chuàng)建一個登陸憑證，其他業(yè)務(wù)API接口，多需要依賴access_token來鑒權(quán)調(diào)用者身份。因此，開發(fā)者在使用業(yè)務(wù)接口前，要明確access_token的頒發(fā)來源，使用正確的access_token。

步入正題吧

身份認證

網(wǎng)頁授權(quán)登陸：企業(yè)微信提供了OAuth的授權(quán)登陸方式，可以讓從企業(yè)微信終端打開網(wǎng)頁獲取成員的身份信息，從而避免登陸環(huán)節(jié)。企業(yè)應(yīng)用中的URL鏈接（包括自定義菜單或者消息中心中的鏈接），均可通過OAuth2.0驗證接口來獲取成員的UserId身份信息。

在進入我們開發(fā)的項目之前， 我們需要先訪問第三方服務(wù)構(gòu)造的OAuth2鏈接（參數(shù)包括當(dāng)前第三方服務(wù)的身份ID，以及重定向URL），將用戶引導(dǎo)到認證服務(wù)器的授權(quán)頁面。這里建議企業(yè)應(yīng)用中的URL鏈接直接填寫自己企業(yè)的頁面地址。成員操作跳轉(zhuǎn)到企業(yè)頁面時，企業(yè)后臺校驗是否有標(biāo)識識別成員身份的信息，根據(jù)獲取的信息在進入相應(yīng)的頁面。
下面貼一下獲取用戶信息的方法：
第一步需要構(gòu)造如下鏈接來獲取code參數(shù)，我這邊貼一下我實際開發(fā)中構(gòu)造的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`
}

說明一下各個參數(shù)代表什么意思。
appid：企業(yè)的cropid
redirect_uri：授權(quán)后重定向的回調(diào)鏈接地址，要使用urlencode對連接進行處理
response_type：返回類型，此時固定為：code
scope：應(yīng)用授權(quán)作用域，企業(yè)自建應(yīng)用固定填寫：snsapi_base
state：重定向后會帶上state參數(shù)，企業(yè)可填寫a-zA-Z0-9的參數(shù)值，長度不可超過128個字節(jié)
wechat_redirect：終端使用此參數(shù)判斷是否需要帶上身份信息

當(dāng)員工點擊后，頁面將跳轉(zhuǎn)至redirect_uri?code=CODE&state=STATE,這時候企業(yè)可根據(jù)拿到的code獲得員工的userid。

下面是進入之前的登陸判斷：

enterWxAuthor () {
        //獲取用戶token
        var _this = this;
        var wxUserInfo = sessionStorage.getItem("userToken");
        var code = GetQueryString("code");
        if (!wxUserInfo) {
          if (code) {
            _this.getTokenKey();
          } else {
            //沒有微信用戶信息，沒有授權(quán)-->> 需要授權(quán)，跳轉(zhuǎn)授權(quán)頁面
            getToken()
          }
        } else {
        //初始化頁面
          _this.init();
        }
      },

getTokenKey方法：

      getTokenKey: function () {
        //獲取用戶信息，token 權(quán)限
        var _this = this;
        //通過code獲得用戶token
        var url = "api/....";
        //這里的code就是我們上面構(gòu)造的OAuth鏈接的code參數(shù)
        var code = GetQueryString("code");
        ajax(url, {
          WXTicket: code
        }, "").then(function (res) {
          //  ?去除url中code，目的是為了避免重復(fù)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;
}

這里要注意一下處理微信端的一些問題。有的用戶喜歡把微信的默認字體設(shè)置的很大，這就會引起頁面布局錯亂，下面是把重寫設(shè)置網(wǎng)頁字體大小的方法：

    // 禁止微信瀏覽器縮放
    (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() {
        // 設(shè)置網(wǎng)頁字體為默認大小
        WeixinJSBridge.invoke("setFontSizeCallback", {"fontSize": 0});
        // 重寫設(shè)置網(wǎng)頁字體大小的事件
        WeixinJSBridge.on("menu:setfont", function () {
          WeixinJSBridge.invoke("setFontSizeCallback", {"fontSize": 0});
        });
      }
    })();

大致的流程就是這樣?？偨Y(jié)一下就是：進入系統(tǒng)之前要先走一下微信的OAuth鏈接，拿到code，再憑借code獲取用戶的token。
后面就隨便玩了。