Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
JA
English Deutsch Français العربية Español Italiano Indonesia 한국어 Português Русский Türkçe 中文 Polski Tiếng việt
  • websites

OAuth2 Login

デモを表示する Playground で開く

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.

<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 でサンプルを編集する