我想amp-access在 AMP 页面中根据用户是否登录来显示或隐藏内容。
查看 AMP 项目提供的示例时：
...它仅显示了这将如何与现有的外部托管 OAuth 提供程序一起使用。它没有提供一个示例，说明这将如何在凭据未存储在第 3 方系统中的环境中工作——这使得验证变得相当困难。
到目前为止，我所拥有的（为了尽可能简单）是服务器上的以下结构：
index.html
|--auth/index.php
|--login/index.php
|--logout/index.php
索引.html
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="index.html">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script id="amp-access" type="application/json">
{
"authorization": "https://yoursite.com/auth/?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
"pingback": "https://yoursite.com/auth/?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
"login": {
"sign-in": "https://yoursite.com/login/?rid=READER_ID&url=CANONICAL_URL",
"sign-out": "https://yoursite.com/logout"
},
"authorizationFallbackResponse": {
"error": true,
"access": false,
"subscriber": false
}
}
</script>
</head>
<body>
<section amp-access="subscriber">
<h2>Access Granted</h2>
<a on="tap:amp-access.login-sign-out">Logout</a>
</section>
<section amp-access="NOT subscriber">
<h2>Permission Required</h2>
<a on="tap:amp-access.login-sign-in">Login</a>
</section>
</body>
</html>
登录/index.php
$error = false;
if($_POST) {
if($_POST['username'] == 'test' && $_POST['password'] == 'test') {
//login successful
setcookie('ampid', $_POST['ampid'], time()+3600);
header('location:' + $_POST['redirect']);
exit();
}
$error = true;
}
if(!isset($_REQUEST['rid'])) {
?>
<script type="text/javascript">
window.close();
</script>
<?php
}
echo ($error ? "<h2>Invalid Credentials</h2>" : "");
?>
<h3>Login Form</h3>
<form method="post" action="/login">
<label for="username">Username</label><br>
<input type="text" value="test" name="username"><hr>
<label for="password">Password</label><br>
<input type="password" value="test" name="password"><hr>
<input type="hidden" value="<?= $_REQUEST['ref']; ?>" name="redirect">
<input type="hidden" value="<?= $_REQUEST['rid']; ?>" name="ampid">
<input type="submit">Login</input>
</form>
注销/index.php
目前为空。
登录/index.php
header('AMP-Access-Control-Allow-Source-Origin: https://yoursite.com');
header('Content-type: application/json');
echo json_encode(
array(
'success'=>true,
'access'=>true,
'error'=>false
)
);
上面的代码验证，没有 CORS 错误，当您单击第一页 (index.html) 上的“登录”链接时，它会打开登录窗口，类似于示例。
登录时，它会验证，但我没有看到设置 cookie ampid，我无法强制index.html重新加载。
手动重新加载index.html上一次登录后，似乎没有任何效果。
如果您查看源代码，auth/index.php您还会注意到我总是发回相当于“是的，您已登录”的 json 数据。
我忽略了什么以及如何让它与我自己的身份验证系统一起使用（不使用 OAuth 或类似的外部托管凭证服务。）。我已经提供了一个非常基本的身份验证系统示例，所以让 AMP 来实现它的魔力，这将是非常棒的。