amp-access

简介

amp-access 组件增加了对身份验证和授权的支持，允许您限制对 AMP 页面某些部分的访问，并为登录用户显示自定义内容。它还允许实现浏览量统计、付费墙和订阅。有关示例 amp-access 服务器端点，请参阅 amp-publisher-sample 项目。

设置

在头部导入 amp-access 组件。

<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>

amp-access 需要同时导入 amp-analytics。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

可选地，使用 amp-mustache 组件来显示从授权响应中替换了值的文本

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

添加 authorization 和 login 端点的配置。我们提供两个登录端点，一个用于登录，一个用于退出。如果授权失败，也可以使用 authorizationFallbackResponse 属性创建备用响应。

当用户查看文档时，会调用Pingback 端点，可以用来更新计量信息。此功能在本示例中未使用。

<script id="amp-access" type="application/json">
  {
      "authorization": "/documentation/examples/api/amp-access/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
      "pingback": "/documentation/examples/api/amp-access/pingback?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
      "login": {
        "sign-in": "/documentation/examples/api/amp-access/login?rid=READER_ID&url=CANONICAL_URL",
        "sign-out": "/documentation/examples/api/amp-access/logout"
      },
      "authorizationFallbackResponse": {
          "error": true,
          "loggedIn": false,
          "powerUser": false
      }
  }
</script>

控制可见性

此部分对所有用户可见。在这种情况下，不需要特殊的标记。

欢迎来到网站！此部分对所有人可见。

<section>
  Welcome to the website! This section is visible to all.
</section>

使用 amp-access 属性来控制每个组件的可见性。表达式必须评估为布尔值。如果评估为 TRUE，则会显示该部分。

我们使用服务器响应中的 loggedIn 属性来确定用户是否已登录。

此部分仅在您登录时可见。欢迎回来！

<section amp-access="loggedIn">
  This section is only visible if you're logged in. Welcome back!
</section>

服务器的响应可用于传达有关登录用户的更多信息。在这种情况下，除了已登录的用户之外，我们还会区分设置了 powerUser 属性的用户。

此部分仅在您登录且被分类为“高级用户”时可见。

<section amp-access="loggedIn AND powerUser">
  This section is only visible if you're logged in <em>and</em> classified as "power user".
</section>

如果 loggedIn 属性具有默认值 false，我们可以假设用户未登录。

此部分仅在您未登录时可见。

<section amp-access="NOT loggedIn">
  This section is only visible if you're not logged in.
</section>

组合 amp-access 和 amp-mustache 以显示从授权请求返回的信息。在这种情况下，我们显示在身份验证响应中返回的电子邮件。

<section amp-access="loggedIn">
  <template amp-access-template type="amp-mustache">
    <h3>Hello {{email}}!</h3>

    {{#powerUser}}
    <p>You are a power user.</p>
    {{/powerUser}}
  </template>
</section>

使用 on="tap:amp-access.login-sign-in" 在单击元素时打开登录对话框。这只是打开一个弹出窗口，将用户带到顶部配置中定义的 URL。如果 amp-access 表达式评估为 TRUE，则 amp-access-hide 将使组件默认为隐藏状态，并在稍后启用。

<button amp-access="NOT loggedIn" amp-access-hide on="tap:amp-access.login-sign-in">
  Login
</button>

退出

退出链接应仅对已登录的订阅者显示。我们在这里使用了一个技巧：退出是一个登录操作，直接重定向回原始 URL。这样做的好处是页面会更新而无需重新加载。

<button amp-access="loggedIn" amp-access-hide on="tap:amp-access.login-sign-out">
  Logout
</button>

查看官方 amp-access 示例，了解首次点击免费和浏览量统计的演示。

需要进一步解释吗？

如果此页面上的解释未能涵盖您的所有问题，请随时与其他 AMP 用户联系以讨论您的确切用例。

转到 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的长期参与者，但我们也欢迎您为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例

由 @andreban 编写

amp-access

简介

设置

控制可见性

您好，{{email}}！

登录

退出