OAuth2 Login
Introduction
This sample showcases how to use amp-access to allow an OAuth2-based login flow on your AMP pages, such as Google, Facebook and GitHub sign-in.
Setup
We need to import the amp-access
component.
<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>
amp-access
requires the definition of 3 endpoints as documented here.
This sample allows an user to login and logout using an OAuth2-based flow. Logout is implemented by configuring a second endpoint in the login property sign-out
, find more here.
<script id="amp-access" type="application/json">
{
"authorization": "/documentation/examples/personalization/oauth2_login/status?_=RANDOM",
"noPingback": "true",
"login": {
"facebook-sign-in": "/documentation/examples/personalization/oauth2_login/login/facebook",
"google-sign-in": "/documentation/examples/personalization/oauth2_login/login/google",
"github-sign-in": "/documentation/examples/personalization/oauth2_login/login/github",
"sign-out": "/documentation/examples/personalization/oauth2_login/logout"
},
"authorizationFallbackResponse": {
"error": true,
"loggedIn": false
}
}
</script>
Implementation
We use amp-access
to integrate an OAuth2-based login and to show and hide the login button depending on whether the user is logged in.
on="tap:amp-access.login-google-sign-in"
specifies which action should be taken when clicking on the login button:
login
defines the property inside the amp-access
json configuration, while google-sign-in
defines the endpoint.
Please login to view content
<div amp-access="NOT loggedIn"
amp-access-hide>
<h3>Please login to view content</h3>
<button on="tap:amp-access.login-google-sign-in">Google Login</button>
<button on="tap:amp-access.login-facebook-sign-in">Facebook Login</button>
<button on="tap:amp-access.login-github-sign-in">GitHub Login</button>
</div>
When logged in, we use amp-access-template
to display information returned from the authorization endpoint, in this case the user's name.
Hello {{name}}! You are logged in.
<div amp-access="loggedIn"
amp-access-hide>
<template amp-access-template
type="amp-mustache">
<p>Hello {{name}}! You are logged in.</p>
</template>
</div>
We specify the logout via a login endpoint to be able to use the return URL
environment variable.
<button amp-access="loggedIn"
amp-access-hide
on="tap:amp-access.login-sign-out">Logout</button>
Se le spiegazioni riportate in questa pagina non rispondono a tutte le tue domande, non esitare a contattare altri utenti AMP per discutere il tuo caso d'uso specifico.
Vai a Stack Overflow Ci sono funzioni non descritte?Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.
Modifica esempio in GitHub-
Written by @fstanis