Подключение авторизации
Примечание
Если ваш сайт создан на 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 Заключение |
Ниже описаны этапы подключения авторизации:
Шаг 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
— уникальный идентификатор пользователя в системе Яндекс.Турбо.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://example.ru/api/logout?TURBO_ID={TURBO_ID}
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
.
-
-
Сохраните изменения.
-
Проверьте работу авторизации в примере Турбо‑страницы.
Узнайте больше
- Подключение комментариев
- Пример подключения авторизации на WordPress
- Пример подключения комментариев на WordPress