Вход

При первом заходе на страницу вы увидите 2 комментария и кнопку входа.

Вот как выглядит код кнопки входа на странице:

<span amp-access="NOT loggedIn" role="button" tabindex="0" amp-access-hide>

  <h5>Please login to comment</h5>
  <button on="tap:amp-access.login-sign-in" class="button-primary comment-button">Login</button>
</span>

Поведение атрибутов, связанных с компонентом amp-access, определяется конфигурацией компонента amp-access в масштабе всей страницы; в нашем случае она такова:

<script id="amp-access" type="application/json">
  {
    "authorization": "https://ampbyexample.com/samples_templates/comment_section/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
    "noPingback": "true",
    "login": {
      "sign-in": "https://ampbyexample.com/samples_templates/comment_section/login?rid=READER_ID&url=CANONICAL_URL",
      "sign-out": "https://ampbyexample.com/samples_templates/comment_section/logout"
    },
    "authorizationFallbackResponse": {
      "error": true,
      "loggedIn": false
    }
  }
</script>

Конечная точка авторизации разворачивается в рамках AMPByExample. Предоставлять эту конечную точку должен издатель страницы, однако в нашем примере с целью его упрощения мы реализовали базовую логику, чтобы при получении запроса сервер считывал содержимое cookie-файла под названием ABE_LOGGED_IN. Если cookie-файл отсутствует, мы возвращаем ответ в формате JSON с содержимым loggedIn = false. Поэтому, когда пользователь в первый раз заходит на страницу, запрос возвращает ответ loggedIn = false, в результате чего показывается кнопка входа.

Теперь вернемся к HTML-коду кнопки: при помощи свойства on="tap:amp-access.login-sign-in" мы указываем, что, как только пользователь коснется кнопки, необходимо перейти по URL-адресу, указанному в приведенном выше JSON:

{
"login": {
"sign-in": "https://ampbyexample.com/samples_templates/comment_section/login?rid=READER_ID&url=CANONICAL_URL"
}
}

Страница входа — это не-AMP страница, которую мы для простоты используем для заполнения значений логина и пароля. Обратите внимание на использование скрытого поля ввода returnURL, значение которого заполняется на сервере AMPByExample при помощи серверного шаблона. Сервер считывает это значение из параметра return, автоматически добавляемого библиотекой AMP к URL-адресу для входа.

В нижеприведенном примере значение параметра return добавляется к запросу после нажатия на кнопку входа. Посмотреть это значение можно при помощи консоли Инструментов разработчика Chrome (вкладка «Сеть»).

Получив POST-запрос со страницы входа и удостоверившись в правильности логина и пароля, сервер AMPByExample перенаправляет запрос на адрес returnURL, о котором говорилось ранее, добавляя к нему параметр #success=true. Теперь среда выполнения AMP может авторизовать страницу и наконец разрешить вам добавление комментариев.

Важно понимать, за какие задачи отвечает среда выполнения AMP, а какие должен выполнять сервер, так как реализация сервера является обязанностью издателя страницы.

Итак, резюмируя:

• Среда выполнения AMP автоматически добавляет параметр return к запросу для входа, передаваемому в JSON-объекте login
• Среда выполнения AMP закрывает страницу входа и выполняет перенаправление на страницу, указанную в параметре URL-адреса возврата
• Как только пользователь нажимает на кнопку входа, сервер генерирует ответ