Je voudrais utiliser amp-access dans une page AMP pour afficher ou masquer le contenu selon que l'utilisateur est connectéQu'est-ce qui est requis pour utiliser l'accès par ampli avec un système de connexion REST existant?
Lorsque l'on regarde l'exemple (s) par le projet AMP.
... il montre seulement comment thi s fonctionnerait avec un fournisseur OAuth hébergé en externe existant. Il ne fournit pas d'exemple sur la façon dont cela fonctionnerait dans un environnement où les informations d'identification ne sont pas stockées dans un système tiers, ce qui le rend plutôt difficile à valider.
Ce que j'ai jusqu'à présent (pour garder ce aussi simple que possible), est la structure suivante sur le serveur:
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>
fermeture de session/index.php
Actuellement vide.
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
)
);
Le code ci-dessus valide, aucune erreur CORS, et lorsque vous cliquez sur le lien 'Connexion' sur la première page (index.html), il ouvre la fenêtre de connexion, similaire à l'exemple.
Lors de la connexion, il valide, mais je ne vois pas de cookie réglé ampid, et je suis incapable de forcer index.html à recharger.
Après avoir manuellement rechargé index.html, la connexion précédente semble n'avoir aucun effet.
Si vous regardez la source pour auth/index.php, vous noterez également que je renvoie toujours l'équivalent des données json "Oui, vous êtes connecté". Que dois-je faire pour que cela marche avec mon propre système d'authentification (sans utiliser OAuth ou des services d'accréditation hébergés externes similaires?). J'ai fourni un exemple très basique d'un système d'authentification, donc obtenir AMP pour faire de la magie avec ceci, serait fantastique.
En tant qu'éditeur de ce site, j'ai publié une démonstration fonctionnelle sur comment cela peut être fait ici: https://www.onezeroless.com/google-amp-and-amp-access-over-rest/. Merci Scriptonomy pour votre aide. –