Подключение авторизации

Примечание. Если ваш сайт создан на CMS Wordpress, ознакомьтесь с примером подключения авторизации.

На Турбо‑страницах появилась возможность авторизации и выхода пользователя. Кнопка авторизации находится в меню. Авторизация необходима, чтобы пользователь мог добавить новый комментарий. Неавторизованные пользователи не могут оставлять комментарии. Подробнее о комментариях в разделе подключение комментариев.

Обучающее видео. Подключение авторизации и комментариев на Турбо‑страницах.
Посмотреть видео

00:00 Введение

00:33 Особенности комментариев на Турбо‑страницах

01:16 Пример работы комментариев и авторизации

03:17 Как работает авторизация

04:34 Особенности, которые нужно учесть при создании ресурсов

05:24 Создание формы входа

08:38 Создание ресурса проверки авторизации

10:34 Создание ресурса для выхода

11:31 Подключение ресурсов авторизации в Вебмастере

13:15 Как работает ресурс списка комментариев

14:45 Создание ресурса списка комментариев

16:00 Как работает ресурс добавления комментария

17:08 Создание ресурса добавления комментария

18:58 Подключение ресурсов комментариев в Вебмастере

20:13 Заключение

Обучающее видео. Подключение авторизации и комментариев на Турбо‑страницах.
Посмотреть видео

00:00 Введение

00:33 Особенности комментариев на Турбо‑страницах

01:16 Пример работы комментариев и авторизации

03:17 Как работает авторизация

04:34 Особенности, которые нужно учесть при создании ресурсов

05:24 Создание формы входа

08:38 Создание ресурса проверки авторизации

10:34 Создание ресурса для выхода

11:31 Подключение ресурсов авторизации в Вебмастере

13:15 Как работает ресурс списка комментариев

14:45 Создание ресурса списка комментариев

16:00 Как работает ресурс добавления комментария

17:08 Создание ресурса добавления комментария

18:58 Подключение ресурсов комментариев в Вебмастере

20:13 Заключение

Ниже описаны этапы подключения авторизации:

  1. Шаг 1. Создайте HTML-страницу с формой входа
  2. Шаг 2. Создайте ресурс, который проверяет авторизацию
  3. Шаг 3. Создайте ресурс, который совершает выход
  4. Шаг 4. Подключите авторизацию

Шаг 1. Создайте HTML-страницу с формой входа

Как работает

Когда пользователь нажимает кнопку Войти, на Турбо‑странице открывается ваша HTML-страница с формой входа. В нее передается идентификатор пользователя в query-параметре TURBO_ID. При успешной авторизации его можно связать с авторизованным пользователем.

Примечание. Для авторизации можно использовать Cookie. Но некоторые браузеры могут не отправлять Сookie. В таких случаях нужно использовать TURBO_ID.

Пример запроса, который отправляет Турбо‑страница:

GET https://my-domain.ru/api/login?TURBO_ID={id}

TURBO_ID — уникальный идентификатор пользователя в системе Яндекс.Турбо. TURBO_ID сохраняется за пользователем долгое время. Но если пользователь заходит в режиме инкогнито, то идентификатор может быть потерян.

Что надо сделать
Создайте HTML-страницу с формой входа и регистрации, например, https://my-domain.ru/api/login. Для нее необходимо разрешить открытие на домене yandex.*. Пример заголовка Content-Security-Policy:
Content-Security-Policy: frame-ancestors yandex.com.tr yandex.com yandex.net yandex.uz yandex.fr yandex.kz yandex.ru yandex.by yandex.ua *.yandex.com.tr *.yandex.com *.yandex.net *.yandex.uz *.yandex.fr *.yandex.kz *.yandex.ru *.yandex.by *.yandex.ua *.turbopages.org;
Скопировано

Если вход произошел успешно, страница должна отправить сообщение:

window.parent.postMessage({
  action: 'login',
  login: userLogin,
  success: true
}, '*');

Пример HTML-страницы доступен на GitHub.

Шаг 2. Создайте ресурс, который проверяет авторизацию

Внимание. Чтобы Турбо‑страницы могли взаимодействовать с API авторизации, разрешите Cross-Origin запросы для *.yandex.*, *.turbopages.org.
Как работает

Когда пользователь заходит на Турбо‑страницу, она отправляет GET-запрос на ваш ресурс проверки авторизации. Уникальный идентификатор пользователя передается в query-параметре TURBO_ID. Ресурс обрабатывает запрос и возвращает результат проверки.

Пример запроса, который отправляет Турбо‑страница:
CORS GET https://my-domain.ru/api/auth?TURBO_ID={TURBO_ID}

TURBO_ID — уникальный идентификатор пользователя в системе Яндекс.Турбо. TURBO_ID сохраняется за пользователем долгое время. Но если пользователь заходит в режиме инкогнито, то идентификатор может быть потерян.

Что надо сделать
Создайте ресурс, который обрабатывает запрос и проверяет авторизацию пользователя по TURBO_ID или Cookie и возвращает результат. Для ресурса необходимо разрешить Cross-Origin запросы с *.yandex.*, *.turbopages.org.
Примечание. Ресурс должен быть доступен по HTTPS-протоколу.
Ожидаемый ответ ресурса
Ресурс должен возвращать:
Если пользователь авторизован
Код HTTP-ответа: 200.
JSON:
{
    "login": "user@email.tld"
}
Скопировано
В ином случае
Код HTTP-ответа: 401.

Пример ресурса доступен на GitHub.

Шаг 3. Создайте ресурс, который совершает выход

Внимание. Чтобы Турбо‑страницы могли взаимодействовать с API авторизации, разрешите Cross-Origin запросы для *.yandex.*, *.turbopages.org.
Как работает
Когда пользователь нажимает кнопку Выйти, Турбо‑страница отправляет GET-запрос на ваш ресурс выхода. В нем передается уникальный идентификатор пользователя, по которому ресурс должен выполнить выход.

Пример запроса, который отправляет Турбо‑страница:

CORS GET https://my-domain.ru/api/logout?TURBO_ID={TURBO_ID}
TURBO_ID — уникальный идентификатор пользователя в системе Яндекс.Турбо. TURBO_ID сохраняется за пользователем долгое время. Но если пользователь заходит в режиме инкогнито, то идентификатор может быть потерян.
Что надо сделать
Создайте ресурс, в котором происходит выход пользователя по TURBO_ID или Cookie. Для ресурса необходимо разрешить Cross-Origin запросы с *.yandex.*, *.turbopages.org.

Пример ресурса доступен на GitHub.

Шаг 4. Подключите авторизацию

Чтобы подключить авторизацию:
  1. В Вебмастере перейдите на страницу Турбо‑страницы для контентных сайтов → Настройки → Авторизация.
  2. Укажите ссылки на ресурсы:
    • URL страницы с формой входа, например, https://my-domain.ru/api/login;
    • URL проверки авторизации, например, https://my-domain.ru/api/auth;
    • URL для выхода, например, https://my-domain.ru/api/logout.
  3. Сохраните изменения.
  4. Проверьте работу авторизации в примере Турбо‑страницы.