我想在 AMP 页面中使用 amp-access 根据用户是否登录来显示或隐藏内容。
在查看 AMP 项目提供的示例时:
...它仅显示了如何与现有的外部托管 OAuth 提供程序一起使用。它没有提供示例说明在凭证未存储在第 3 方系统中的环境中如何工作 - 这使得验证变得相当困难。
到目前为止(为了尽可能简单)，服务器上的结构如下:
index.html
|--auth/index.php
|--login/index.php
|--logout/index.php
index.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 来做这件事很神奇，那就太棒了。
最佳答案
您的代码基本上是正确的。但是，有几个问题:
- 在您的授权代码中，您没有返回
subscriber: true - 您无需重定向或刷新 amp-access 即可更新
在您的 index.html 中，您将 amp-access 测试参数设置为 subscriber，但您并未为订阅者键返回 true 值。从技术上讲，订阅者 key 可以是任意名称。但是，在您的情况下，您已将其设置为订阅者。
amp-access 在登录或注销窗口关闭时自动发布和检索授权值对。因此，无需重定向或重新加载页面。 amp-access 还会在客户端自动设置一个带有 rid 的 cookie，您可以在服务器端代码中访问和使用它。
关于php - 针对现有 REST 登录系统使用 amp-access 需要什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46677058/