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

Примечание. Если ваш сайт создан на 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. Создайте HTML-страницу с формой входа

Как работает

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

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

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

GET https://example.ru/api/login?TURBO_ID={id}

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

Что надо сделать

Создайте HTML-страницу с формой входа и регистрации, например, https://example.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://example.ru/api/auth?TURBO_ID={TURBO_ID}

Что надо сделать

Создайте ресурс, который обрабатывает запрос и проверяет авторизацию пользователя по TURBO_ID или Cookie и возвращает результат. Для ресурса необходимо разрешить Cross-Origin запросы с *.yandex.*, *.turbopages.org.

Примечание. Ресурс должен быть доступен по HTTPS-протоколу.

Ожидаемый ответ ресурса

Ресурс должен возвращать:

Если пользователь авторизован

Код HTTP-ответа: 200.

JSON:

{
    "login": "user@email.tld"
}
Скопировано

В ином случае

Код HTTP-ответа: 401.

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

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

Как работает

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

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

CORS GET https://example.ru/api/logout?TURBO_ID={TURBO_ID}

Что надо сделать

Создайте ресурс, в котором происходит выход пользователя по TURBO_ID или Cookie. Для ресурса необходимо разрешить Cross-Origin запросы с *.yandex.*, *.turbopages.org.

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

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

Чтобы подключить авторизацию:

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

Написать в службу поддержки