MIP ACCESS细节分析

什么是MIP ACCESS

MIP ACCESS凡同一种页面访问权限决定机制,能够允许网页发布者在页面元素被定义内容标记,并组成用户访问情况进行归纳评价,从而表现或隐藏页面被内容,直至用户登录、订阅或付费后才能够查阅隐藏内容之均等种植新阅读模式。

优势于乌?

  • 法时:页面被另外因素都能在权限决定标记,并因标记解析情况开展亮或隐匿,打破了传统阅读只是展示前n字的模式;
  • 形式多样:页面内容可以是任何因素,包括纯文本、图片、视频等;
  • 多少让:内容展现与否直接跟发布者配置的数额交互关联,根据分析情况控制是否出示相应元素;
  • 布局灵活:发布者可以因不同之急需安排不同接口,如数据要接口、访问记录接口、登录页面、登出页面等;

DEMO演示

当游说现实贯彻同细节之前,我们列举了季单DEMO认一下ACCESS到底是一个哪些的存在吧!

  • DEMO1演示了ACCESS的基本功能,该案例提供了1首首次点击免费文章与3首免费文章,首浅点击免费是靠当第一破造访该域名下持有ACCESS职能的页面时免费查看的功用;如果访问文章数超过4篇时,页面被配置有ACCESS性能的模块将会躲,登录后可以查看所有;

    mip-access

  • DEMO2以身作则的凡登录功能,案例制定的方针是登录后所有文章都免费查看;

    mip-access-login

  • DEMO3演示了ACCESS登出成效,登出后备受权限限制;

    mip-access-logout

  • 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表达式中需要开展计算的数量;

    • 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接口请求失败,需要以此地配置相关接口参数作为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
提问。

相关文章