MIP ACCESS 实现方案

Author Avatar
墨冥 1月 11, 2017
  • 在其它设备中阅读本文章

作者寄语:这是一套基于Google AMP Access的解决方案,其中example代表开发方,如AMP,可以参考改方案进行细节实施!

一、前言


h3-ACCESS能够允许发布者对页面内容进行访问权限的控制,通过内容标记和用户访问情况进行综合评价,从而实现对付费墙和订阅功能的支持。

二、名词解释

  • Reader: 访客,浏览example文档的用户
  • Publisher: 发布商
  • Access Runtime: 执行文档的javascript运行环境
  • Access Content Markup: 模块中以属性形式定义的,规定访问权限的标示
  • Authorization endpoint: 授权端点
  • Pingback endpoint: 计量系统调用(类似统计)的端点
  • Example: 表示开发方

三、方案解读

  • 开发者

    • 实现接口,所有接口的请求方式走cors,可参见请求方案。包括授权接口(返回需要用到的markup)、计量接口(统计访问信息),登陆接口(将访客id与用户id对应,从而记录注册用户数据)相关逻辑;
    • 引入example定义的脚本;
    • 定义script配置标签,并配置以下信息:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <script id="example-access" type="application/json">
      {
      "authorization": "https://rocky-sierra-1919.herokuapp.com/example-access/api/example-authorization.json?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
      "pingback": "https://rocky-sierra-1919.herokuapp.com/example-access/api/example-pingback?rid=READER_ID&ref=DOCUMENT_REFERRER&url=CANONICAL_URL",
      "login": "https://rocky-sierra-1919.herokuapp.com/example-access/login/?rid=READER_ID&url=CANONICAL_URL",
      "authorizationFallbackResponse": {
      "error": true,
      "access": false
      },
      "type": "client"
      }
      </script>

      1.authorization:授权接口,返回example-access表达式中需要进行计算的数据;
      2.pingback:计量接口,每次访问页面之后,通过该url发送请求到开发者服务器,由其对数据进行管理,如每访问一次计数减1;
      3.noPingback:是否允许计量;
      4.login:登陆相关接口,可以是一个map,如下;

      1
      2
      3
      4
      ”login": {
      "signin": "https://publisher.com/signin.html?rid={READER_ID}",
      "signup": "https://publisher.com/signup.html?rid={READER_ID}"
      }

      5.authorizationFallbackResponse:如果授权接口请求失败,需要在这里配置相关接口参数作为backup;

      1
      2
      3
      4
      "authorizationFallbackResponse": {
      "error": true,
      "access": false
      }

      6.authorizationTimeout:授权接口请求超时时间,默认为3s;

    • 以example-access属性来书写表达式
      <div example-access=“expression”>…</div>
  • example前端

    • 计量系统:负责每个模块展示策略统计数据的操作;在每次访问页面后,待页面加载完成,登录/登出后调用站长配置的pingback接口,将数据发送给站长服务器,由其控制计数的变化,如果计数达到站长要求的情况,则用户需登录,付费或进行其他操作,并满足要求之后才能继续访问页面,或页面中的模块;
    • 登录系统:目前只支持站长提供登录地址自行管理数据的方式,后续会调研登录的整套流程和标准,加以扩充;
  • example后端

    • 解析系统:负责expression解析。
    • example后端需要在用户请求后返回一个过滤了example-access元素的文档,使得页面第一时间展示,过滤具体方案参照文档merge方案
    • 然后example后端调用授权接口获取相关数据,通过markup和数据共同决定是否要展示html元素,并将需要展示的返回给前端,前端进行替换加入到当前页面;

四、总体流程

  • 1.整体时序图(如果是付费页面,通过后端数据标示,必须做到登录强相关)

    • 用户访问cache页面;
    • cache拿到的document会被server抓取到;
    • server所要做的第一件事就是替换所有通过example-access定义的dom元素,然后返回给前端进行展示,这样做的目的是为了能让用户第一时间看到页面;
    • server所要做的第二件事是请求站长提供的授权接口authorization,根据返回授权数据和文档中的markup共同决定哪些模块需要显示,计算markup方式可参见解析支持方案。并把需要显示的组装成html文档返回给前端,然后access runtime将其进行merge进当前页,具体merge方式可参见文档merge方案
    • 页面加载完成后access runtime调用计量接口,将相应访问统计数据进行操作,该操作策略由站长决定,如访问次数减1,目的是再次访问该站点页面时是否有权限访问,如果没有需要通过登录,付费等操作来继续访问。整个页面的事件方案可参见事件分析方案
    • 登录:用户点击登录之后会调用站长提供的登录页面,如果登录成功则回调给access runtime,并刷新当前页面,页面逻辑从第一步开始;
  • 2.流程图

  • 3.ID系统(ID不会重复,ID是针对某个站点整站来说的)

  • 4.计量系统

  • 5.解析系统
    获取所有example-access属性的dom,然后根据自定义的表达式进行展示和隐藏。

五、请求方案

  • 通过cors方式进行所有请求,目前百度有流量的浏览器都支持该协议;
  • 请求
    • 通过http header中的origin判断必须是百度cdn域名或者publisherorigin;
    • 如果http origin不存在,example提供example-Same-origin: true来标示当前请求来自于同域名下的请求(同域名下请求不带origin);如果该字段存在则允许,否则禁止访问;
    • __example_source_origin参数为同域名下url,可以通过其来替代http header origin不存在的情况;
  • 返回
    • Access-Control-Allow-Origin:<origin>,允许哪些网站进行请求;不建议设置为*;
    • example-Access-Control-Allow-Source-Origin: <source-origin>,允许source-origin读取authorization response,通过__example_source_origin定义,他用来决定是否能够读取授权接口;
    • Access-Control-Expose-Headers:example-Access-Control-Allow-Source-Origin,允许http返回中包含该字段;

六、解析支持方式


参见amp方式

七、文档merge方案

  • 首先server返回首屏html文档时,将example-access标记的元素替换为example定义的一个空元素,并在元素中加入section_id属性作为标记,为的是之后合并匹配;
  • 同时server将替换前的dom元素保存在后端,并发起授权请求接口;
  • 拿到授权接口后执行markup表达式,将需要显示的元素组装成文档,返回给前端;
  • 拿到需要merge的文档后前端通过便利这些dom并通过section_id进行匹配,匹配到的话就将其替换为返回的新dom节点,从而达到更新的效果;

八、事件分析


参考AMP Analytics