什么是MIP ACCESS

MIP ACCESS是一種頁面訪問權(quán)限控制機制，能夠允許網(wǎng)頁發(fā)布者在頁面元素中定義內(nèi)容標(biāo)記错负，并結(jié)合用戶訪問情況進行綜合評價了袁，從而展現(xiàn)或隱藏頁面中內(nèi)容朗恳，直至用戶登錄、訂閱或付費后才能夠查看隱藏內(nèi)容的一種全新閱讀模式载绿。

優(yōu)勢在哪里粥诫？

• 方式新穎：頁面中任何元素都能加入權(quán)限控制標(biāo)記，并根據(jù)標(biāo)記解析情況進行展示或隱藏崭庸，打破了傳統(tǒng)閱讀只展示前n字的模式怀浆；
• 形式多樣：頁面內(nèi)容可以是任何元素，包括純文本怕享、圖片执赡、視頻等；
• 數(shù)據(jù)驅(qū)動：內(nèi)容展現(xiàn)與否直接與發(fā)布者配置的數(shù)據(jù)相關(guān)聯(lián)函筋，根據(jù)解析情況決定是否展示相應(yīng)元素沙合；
• 配置靈活：發(fā)布者可以根據(jù)不同的需求配置不同接口，如數(shù)據(jù)請求接口跌帐、訪問記錄接口首懈、登錄頁面、登出頁面等谨敛；

DEMO演示

在說具體實現(xiàn)和細(xì)節(jié)之前究履，我們列舉了四個DEMO認(rèn)識一下ACCESS到底是一個怎樣的存在吧！

• DEMO1演示了ACCESS的基本功能脸狸，該案例提供了1篇首次點擊免費文章和3篇免費文章最仑，首次點擊免費是指在第一次訪問該域名下具有ACCESS功能的頁面時免費查看的功能；如果訪問文章數(shù)目超過4篇時炊甲，頁面中配置有ACCESS屬性的模塊將會隱藏泥彤，登錄后方可查看全部；
  
  mip-access

• DEMO2演示的是登錄功能卿啡，案例制定的策略是登錄后所有文章均免費查看全景；
  
  mip-access-login

• DEMO3演示了ACCESS登出功能，登出后受到權(quán)限限制牵囤；
  
  mip-access-logout

• DEMO4演示了重置數(shù)據(jù)的功能爸黄，重置會刪除后端數(shù)據(jù)，由各自策略而定揭鳞，在重置成功后所有頁面的瀏覽記錄均被刪除炕贵；
  
  mip-access-reset

名詞解釋

在講具體細(xì)節(jié)之前，大家先熟悉熟悉這些專有名詞吧野崇！

• Access Runtime: MIP Javascript運行環(huán)境称开；
• Access Content Markup: 模塊中以屬性形式定義的，規(guī)定訪問權(quán)限的標(biāo)示；
• Authorization endpoint: 授權(quán)接口鳖轰，返回markup解析數(shù)據(jù)清酥；
• Pingback endpoint: 計量接口，存儲訪問數(shù)據(jù)蕴侣；

使用方式

• 開發(fā)者實現(xiàn)接口：所有接口的請求都依據(jù)cors方案焰轻，包括Authorization接口(返回解析DOM元素展示與否的數(shù)據(jù))、Pingback接口昆雀，登陸相關(guān)接口相關(guān)邏輯辱志；

• 引入mip腳本；

  <script type="text/javascript" src="https://mipcache.bdstatic.com/static/v1/mip.js"></script>
  

• 定義script配置標(biāo)簽狞膘，并配置以下信息：

  <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：授權(quán)接口揩懒，返回mip-access表達式中需要進行計算的數(shù)據(jù)；
    

  • pingback：計量接口挽封，每次訪問頁面之后已球，通過該url發(fā)送請求到開發(fā)者服務(wù)器，由其對數(shù)據(jù)進行管理辅愿，如每訪問一次計數(shù)減1智亮；
    

  • noPingback：是否允許計量；
    

  • login：登陸相關(guān)接口渠缕，可以是一個map，如下:
    

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

  • authorizationFallbackResponse：如果Authorization接口請求失敗褒繁，需要在這里配置相關(guān)接口參數(shù)作為backup亦鳞；

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

  • authorizationTimeout：Authorization接口請求超時時間，默認(rèn)為3s棒坏；

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

  <div mip-access=“access AND subscriber”>…</div>
  

實現(xiàn)細(xì)節(jié)

• 首先用戶在訪問頁面時坝冕，請求會發(fā)送到CDN（頁面嵌套在Super Frame中）或者開發(fā)者（單個MIP頁面）自己的服務(wù)器上徒探，此時返回html文檔給用戶，這樣做是為了讓用戶能夠第一時間看到頁面喂窟，縮短請求的白屏?xí)r間测暗；
• 在html文檔返回之后啟動MIP Runtime服務(wù)，并將頁面中以mip-access-hide屬性標(biāo)記的所有DOM元素隱藏起來磨澡，同時根據(jù)開發(fā)中提供的Authorization接口發(fā)起請求碗啄；
• Authorization接口如果請求成功，則通過其返回的數(shù)據(jù)解析html文檔中的markup稳摄，解析結(jié)果為true則展示元素稚字，否則隱藏；如果請求失敗，MIP Runtime會尋找html文檔中以mip-access為標(biāo)示的script胆描，獲取其中定義好的JSON數(shù)據(jù)瘫想，并以authorizationFallbackResponse字段中的內(nèi)容作為解析需要的數(shù)據(jù)；如果authorizationFallbackResponse未定義則解析失敳病国夜；
• 頁面加載完成后如果開發(fā)者配置了noPingback: true的選項，則不會發(fā)起Pingback（該請求主要為了讓server記錄訪問數(shù)據(jù)）請求剧蚣；否則發(fā)起請求并將數(shù)據(jù)傳遞給開發(fā)者server進行保存支竹，待下次訪問根據(jù)狀態(tài)返回相應(yīng)的數(shù)據(jù)；

適用范圍

目前來說鸠按，純前端的ACCESS實現(xiàn)方案適用與一些不涉及用戶信息和收費業(yè)務(wù)相關(guān)的簡單頁面礼搁，通過該方式可以自由化的配置頁面中元素的展現(xiàn)方式；出于安全考慮和后續(xù)的需要目尖，我們也會根據(jù)需求量來以前端+server的處理方式過濾html文檔馒吴；

寫在最后

有任何問題可以到 github issues 提問。