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}}！

登录

注销