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>
如果此页面上的说明未能涵盖您的所有问题,欢迎与其他 AMP 用户取得联系,讨论您的具体用例。
前往 Stack Overflow 一项无法解释的功能?AMP 项目强烈鼓励您参与并做出贡献!我们希望您能成为我们开放源代码社区的持续参与者,但我们也欢迎您对所热衷问题做出一次性贡献。
编辑 GitHub 上的示例-
Written by @fstanis