I would like to use amp-access in an AMP page to show or hide content based on whether the user is logged in.
When looking at the example(s) provided by the AMP project:
... it only shows how this would work with an existing externally hosted OAuth provider. It does not provide an example on how this would work in an environment where credentials are not stored in a 3rd party system - which makes it rather difficult to validate.
What I have so far (to keep this as simple as possible), is the following structure on the server :
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>
login/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>
logout/index.php
Currently empty.
login/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
)
);
The above code validates, no CORS error, and when you click the 'Login' link on the first page (index.html), it opens the login window, similar to the example.
When logging in, it validates, but I do not see a cookie being set ampid, and I am unable to force index.html to reload.
After manually reloading index.html the previous login, appears to have no effect.
If you look at the source for auth/index.php you will also note I am always sending back the equivalent of "Yes, you are logged in" json data.
What am I overlooking and how can I get this to work with my own authentication system (without using OAuth or similar external hosted credential services.). I have supplied a very basic example of an authentication system, so getting AMP to do it's magic with this, would be fantastic.
