Что требуется для использования amp-доступа к существующей системе входа в REST?
Я хотел бы использовать amp-access на странице AMP, чтобы показать или скрыть содержимое в зависимости от того, вошел ли пользователь в систему.
При рассмотрении примеров, предоставленных проектом AMP:
… это только показывает, как это будет работать с существующим OAuth-провайдером, размещенным извне. В нем не приводится пример того, как это будет работать в среде, где учетные данные не хранятся в сторонней системе, что затрудняет проверку.
На данный момент у меня (чтобы это было как можно проще) есть следующая структура на сервере:
index.html
|--auth/index.php
|--login/index.php
|--logout/index.php
<!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>
$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>
В настоящее время пусто.
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 - Вам не нужно перенаправлять или обновлять для доступа к усилителю для обновления
В вашем index.html вы устанавливаете параметр теста amp-access для subscriberпока вы не возвращаете значение true для ключа подписчика. Технически ключ подписчика может быть любым произвольным именем. Однако в вашем случае вы установили его на подписчика.
amp-access автоматически отправляет и получает пары значений авторизации, когда окно входа или выхода закрыто. Следовательно, нет необходимости в перенаправлении или перезагрузке страницы. Кроме того, amp-access автоматически устанавливает cookie-файл со списком клиентов на стороне клиента, который вы можете использовать и использовать в своем коде на стороне сервера.
Другие решения
Других решений пока нет …