MIP ACCESS細節剖析

什麼是MIP ACCESS

MIP ACCESS是一種頁面訪問權限控制機制,可以容許網頁發佈者在頁面元素中定義內容標記,並結合用戶訪問狀況進行綜合評價,從而展示或隱藏頁面中內容,直至用戶登陸、訂閱或付費後纔可以查看隱藏內容的一種全新閱讀模式。javascript

優點在哪裏?

  • 方式新穎:頁面中任何元素都能加入權限控制標記,並根據標記解析狀況進行展現或隱藏,打破了傳統閱讀只展現前n字的模式;html

  • 形式多樣:頁面內容能夠是任何元素,包括純文本、圖片、視頻等;前端

  • 數據驅動:內容展示與否直接與發佈者配置的數據相關聯,根據解析狀況決定是否展現相應元素;java

  • 配置靈活:發佈者能夠根據不一樣的需求配置不一樣接口,如數據請求接口、訪問記錄接口、登陸頁面、登出頁面等;git

DEMO演示

在說具體實現和細節以前,咱們列舉了四個DEMO認識一下ACCESS究竟是一個怎樣的存在吧!github

  • DEMO1演示了ACCESS的基本功能,該案例提供了1篇首次點擊免費文章和3篇免費文章,首次點擊免費是指在第一次訪問該域名下具備ACCESS功能的頁面時免費查看的功能;若是訪問文章數目超過4篇時,頁面中配置有ACCESS屬性的模塊將會隱藏,登陸後方可查看所有;
    mip-accessjson

  • DEMO2演示的是登陸功能,案例制定的策略是登陸後全部文章均免費查看;
    mip-access-login後端

  • DEMO3演示了ACCESS登出功能,登出後受到權限限制;
    mip-access-logoutapi

  • DEMO4演示了重置數據的功能,重置會刪除後端數據,由各自策略而定,在重置成功後全部頁面的瀏覽記錄均被刪除;
    mip-access-reset安全

名詞解釋

在講具體細節以前,你們先熟悉熟悉這些專有名詞吧!

  • Access Runtime: MIP Javascript運行環境;

  • Access Content Markup: 模塊中以屬性形式定義的,規定訪問權限的標示;

  • Authorization endpoint: 受權接口,返回markup解析數據;

  • Pingback endpoint: 計量接口,存儲訪問數據;

使用方式

  • 開發者實現接口:全部接口的請求都依據cors方案,包括Authorization接口(返回解析DOM元素展現與否的數據)、Pingback接口,登錄相關接口相關邏輯;

  • 引入mip腳本;

    <script type="text/javascript" src="https://mipcache.bdstatic.com/static/v1/mip.js"></script>
  • 定義script配置標籤,並配置如下信息:

    <script id="mip-access" type="application/json">
    {
      "authorization": "https://publisher.com/mip-access/api/mip-authorization.json?rid=READER_ID&url=CANONICAL_URL",
      "pingback": "https://publisher.com/mip-access/api/mip-pingback?rid=READER_ID",
      "login": "https://publisher.com/mip-access/login/?rid=READER_ID&url=CANONICAL_URL",
      "authorizationFallbackResponse": {
          "error": true,
          "access": false
        },
        "type": "client"
    }
    </script>
- authorization:受權接口,返回mip-access表達式中須要進行計算的數據;<br>
- pingback:計量接口,每次訪問頁面以後,經過該url發送請求到開發者服務器,由其對數據進行管理,如每訪問一次計數減1;<br>
- noPingback:是否容許計量;<br>
- login:登錄相關接口,能夠是一個map,以下:<br>
"login": {
     "login": "https://publisher.com/login.html?rid={READER_ID}",
     "logout": "https://publisher.com/logout.html?rid={READER_ID}"
}
- authorizationFallbackResponse:若是Authorization接口請求失敗,須要在這裏配置相關接口參數做爲backup;
"authorizationFallbackResponse": {
    "error": true,
    "access": false
}
- authorizationTimeout:Authorization接口請求超時時間,默認爲3s;
  • mip-access屬性來書寫表達式

    <div mip-access=「access AND subscriber」>…</div>

實現細節



上圖爲純前端方式實現ACCESS的時序圖,下面就以這個引子來講一下ACCESS的工做流程吧!

  • 首先用戶在訪問頁面時,請求會發送到CDN(頁面嵌套在Super Frame中)或者開發者(單個MIP頁面)本身的服務器上,此時返回html文檔給用戶,這樣作是爲了讓用戶可以第一時間看到頁面,縮短請求的白屏時間;

  • html文檔返回以後啓動MIP Runtime服務,並將頁面中以mip-access-hide屬性標記的全部DOM元素隱藏起來,同時根據開發中提供的Authorization接口發起請求;

  • Authorization接口若是請求成功,則經過其返回的數據解析html文檔中的markup,解析結果爲true則展現元素,不然隱藏;若是請求失敗,MIP Runtime會尋找html文檔中以mip-access爲標示的script,獲取其中定義好的JSON數據,並以authorizationFallbackResponse字段中的內容做爲解析須要的數據;若是authorizationFallbackResponse未定義則解析失敗;

  • 頁面加載完成後若是開發者配置了noPingback: true的選項,則不會發起Pingback(該請求主要爲了讓server記錄訪問數據)請求;不然發起請求並將數據傳遞給開發者server進行保存,待下次訪問根據狀態返回相應的數據;

適用範圍

目前來講,純前端的ACCESS實現方案適用與一些不涉及用戶信息和收費業務相關的簡單頁面,經過該方式能夠自由化的配置頁面中元素的展示方式;出於安全考慮和後續的須要,咱們也會根據需求量來之前端+server的處理方式過濾html文檔;

寫在最後

有任何問題能夠到 github issues 提問。

相關文章
相關標籤/搜索