AMP

登录

第一次进入页面时,您会看到 2 条评论和一个登录按钮。

如果您在代码中查找登录按钮,您将找到

<span amp-access="NOT loggedIn" role="button" tabindex="0" amp-access-hide>
  <h5>Please login to comment</h5>
  <button on="tap:amp-access.login-sign-in" class="button-primary comment-button">Login</button>
</span>

amp-access 相关属性的行为取决于整个页面的 amp-access 配置,在本例中,它是

<script id="amp-access" type="application/json">
  {
    "authorization": "https://ampbyexample.com/samples_templates/comment_section/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
    "noPingback": "true",
    "login": {
      "sign-in": "https://ampbyexample.com/samples_templates/comment_section/login?rid=READER_ID&url=CANONICAL_URL",
      "sign-out": "https://ampbyexample.com/samples_templates/comment_section/logout"
    },
    "authorizationFallbackResponse": {
      "error": true,
      "loggedIn": false
    }
  }
</script>

授权端点是作为 AMPByExample 的一部分部署的。提供此端点是页面发布者的责任。在本示例中,为了简单起见,我们实现了基本逻辑,以便在收到此请求时,服务器读取名为 ABE_LOGGED_IN 的 cookie 的值。如果 cookie 不存在,则返回包含 loggedIn = false 的 JSON 响应。因此,用户第一次进入页面时,此请求将返回 loggedIn = false,并且将显示登录按钮。

再次查看按钮的 HTML 代码,通过使用 on="tap:amp-access.login-sign-in",我们指定一旦用户点击按钮,应使用上面 JSON 中指定的 URL

{
    "login": {
    "sign-in": "https://ampbyexample.com/samples_templates/comment_section/login?rid=READER_ID&url=CANONICAL_URL"
  }
}

注意 – 请注意,可以在登录节点内定义不同的 URL,在本例中,我们定义了 sign-in,稍后我们将定义 sign-out

登录页面是一个非 AMP 页面,为了简单起见,我们在其中填充了登录名和密码值。请注意使用 returnURL 隐藏输入类型,该类型由 AMPByExample 服务器通过服务器端模板填充。服务器从名为 return 的参数读取此值,该参数由 AMP 库自动添加到登录 URL 中。

在下面的示例中,单击登录按钮后,return 参数的值将添加到请求中。您可以使用 Chrome DevTools 控制台并导航到“网络”标签来探索此值。

一旦 AMPByExample 服务器收到来自登录页面的 POST 请求,并且登录名和密码正确,它会将请求重定向到我们上面提到的 returnURL,并附加 #success=true 参数。现在,AMP 运行时可以授权页面,并最终允许您添加评论。

重要的是要了解 AMP 运行时执行的操作以及服务器应该执行的操作,因为服务器的实现是页面发布者的责任。

快速回顾一下

  • AMP 运行时会自动将 return 参数添加到登录 JSON 对象中指定的登录请求
  • AMP 运行时关闭登录页面并重定向到 return URL 参数指定的页面
  • 一旦用户单击登录按钮,服务器应协调响应

提示 – 有关此流程的更详细说明,请参见 amp-access