什么是 MIP ACCESS

MIP ACCESS 由百度 MIP 團隊開發的一種頁面訪問權限控制機制，能夠允許網頁發布者在頁面元素中定義內容標記，并結合用戶訪問情況進行綜合評價，從而展現或隱藏頁面中內容，直至用戶登錄、訂閱或付費后才能夠查看隱藏內容的一種全新閱讀模式。

優勢在哪里？

• 方式新穎：頁面中任何元素都能加入權限控制標記，并根據標記解析情況進行展示或隱藏，打破了傳統閱讀只展示前 n 字的模式。
• 形式多樣：頁面內容可以是任何元素，包括純文本、圖片、視頻等。
• 數據驅動：內容展現與否直接與發布者配置的數據相關聯，根據解析情況決定是否展示相應元素。
• 配置靈活：發布者可以根據不同的需求配置不同接口，如數據請求接口、訪問記錄接口、登錄頁面、登出頁面等。

DEMO 演示

在說具體實現和細節之前，我們從完整 DEMO 里截取了四個片段，和大家一起認識 ACCESS 到底是一個怎樣的存在！

• DEMO1 演示了 ACCESS 的基本功能，該案例提供了 1 篇首次點擊免費文章和 3 篇免費文章，首次點擊免費是指在第一次訪問該域名下具有 ACCESS 功能的頁面時免費查看的功能；如果訪問文章數目超過 4 篇時，頁面中部分內容將會隱藏，登錄后方可查看全部。

• DEMO2 演示的是登錄功能，案例制定的策略是登錄后所有文章均免費查看。

• DEMO3 演示了 ACCESS 登出功能，登出后恢復到原狀態，不可訪問的文章依然無法訪問，需登陸后方可獲得權限。

• DEMO4 演示了重置數據的功能，重置會刪除后端記錄的數據，頁面刷新后恢復到第一次訪問的狀態。

名詞解釋

在講具體細節之前，大家先熟悉熟悉這些專有名詞吧！
- Access Runtime: MIP Access Javascript 運行環境。
- Access Content Markup: html 中以屬性形式定義的，規定訪問權限的標示。
- Authorization endpoint: 授權接口，返回 markup 解析所需要的數據。
- Pingback endpoint: 計量接口，存儲訪問相關信息。

使用方式

• 開發者實現接口：所有接口的請求都依據 cors 方案，包括 Authorization 接口 (返回解析 DOM 元素展示與否的數據)、Pingback 接口，登陸登出接口。

• 引入 mip 腳本。

  <script type="text/javascript" src="https://c.mipcdn.com/static/v1/mip.js"></script> <script type="text/javascript" src="https://c.mipcdn.com/static/v1/mip-access/mip-access.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} } </script>
  • authorization：授權接口，返回 MIP Access 表達式中需要進行計算的數據。
  • pingback：計量接口，每次訪問頁面之后，通過該 url 發送請求到開發者服務器，由其對數據進行管理，如每訪問一次計數減 1。
  • noPingback：是否允許計量。

  • login：登陸相關接口，可以是一個 map，如下:

    "login": {"login": "https://publisher.com/login.html?rid={READER_ID}","logout": "https://publisher.com/logout.html?rid={READER_ID}" }

  • authorizationFallbackResponse：如果 Authorization 接口請求失敗，需要在這里配置相關接口參數作為后備。

    "authorizationFallbackResponse": {"error": true,"access": false }

  • authorizationTimeout：Authorization 接口請求超時時間，默認為 3s。

• 以 mip-access 屬性來書寫表達式。

  <div mip-access="access AND subscriber">…</div>

實現細節

上圖為純前端方式實現 Access 的時序圖，下面就以這個引子來說一下 ACCESS 的工作流程吧！
- 用戶在訪問頁面時，第一時間從服務器下載到 html 文檔并展示在瀏覽器上，而不是先通過 ACCESS 機制處理后再進行展示，這樣做的目的為了讓用戶能夠第一時間看到頁面，縮短頁面展現的白屏時間。
- 在頁面加載完成之后（DOM Ready 階段），MIP Access 運行環境自動執行，并將頁面中以 mip-access-hide 屬性標記的所有 DOM 元素篩選出來并隱藏，同時根據開發者提供的 Authorization 接口發起請求（該請求地址由開發者在頁面指定的 script 中進行配置），接口的主要作用是拿到解析 mip-access 表達式的數據。
- Authorization 接口如果請求成功，篩選出頁面中使用 mip-access 屬性定義的元素，并根據 mip-access 中的表達式進行解析，解析結果為布爾值，如果結果為 true 則展示元素，否則隱藏；如果請求失敗，MIP 運行環境會尋找配置信息中的 authorizationFallbackResponse 字段，其值為一個 JSON 字符串，將該字符串進行 JSON 解析后作為解析 mip- access 表達式的數據；如果 authorizationFallbackResponse 未定義則解析失敗。
- 最后一步是待頁面加載完成后發起 Pingback 請求（該請求地址同樣是由開發者在頁面指定的 script 中進行配置），這一步的主要目的是記錄頁面訪問信息到開發者后端數據庫，并通過訪問信息決定下一個頁面的展示策略。如果開發者配置了 noPingback: true 的選項，則不會發起 Pingback 請求；否則發起請求并將數據傳遞給開發者服務器進行保存，待下次訪問文章時根據存儲的狀態返回相應的數據以決定頁面展示策略。

適用范圍

目前來說，純前端的 ACCESS 實現方案適用與一些不涉及用戶信息和收費業務相關的簡單頁面，通過該方式可以自由化的配置頁面中元素的展現方式；出于安全考慮和后續的需要，我們后續也會根據需求量來以前端 + server 的處理方式處理 html 文檔；

寫在最后

查看 mip-access 組件的 demo 請 點擊這里 。
有任何問題可以到?github issues?提問。

文章作者：Jackson
轉發自：itoss.me

總結

以上是生活随笔為你收集整理的MIP ACCESS细节剖析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。