Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
  • websites

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.

<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