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 プロジェクトでは皆さんの参加と貢献を強くお勧めしています!当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。
GitHub でサンプルを編集する-
Written by @fstanis