Adding user login functionality

Note. If your site uses the Wordpress CMS, view the example of enabling authorization.

Turbo pages now offer a user login and logout function. The login button is in the menu. The user has to be logged in to add a new comment. Unauthorized users can't leave comments. For more information about comments, see the Adding commenting section.

The steps for adding login functionality are described below.

  1. Step 1. Create an HTML page with the login form
  2. Step 2. Create a resource that checks authorization
  3. Step 3. Create a resource that performs logout
  4. Step 4. Add user login functionality

Step 1. Create an HTML page with the login form

How it works

When the user clicks the Log in button on the Turbo page, it opens your HTML page with the login form. The user ID in the TURBO_ID query parameter is passed to it. If the user logged in successfully, you can associate it with the user.

Note. Authorization can use cookies. However, some browsers may not send cookies. In this case, you need to use TURBO_ID.

Example of a request sent by a Turbo page:

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

TURBO_ID is a unique user ID in the Yandex.Turbo system. TURBO_ID is reserved for the user for a long time. However, if the user logs in in incognito mode, the ID may be lost.

What you need to do
Create an HTML page with the login and registration form, for example, https://my-domain.ru/api/login. Allow opening it on the domain yandex.*. Header example: 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;
Copied to clipboard

If login was successful, the page should send a message:

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

Sample HTML page is available on GitHub.

Step 2. Create a resource that checks authorization

Attention. For Turbo pages to interact with the authorization API, allow Cross-Origin requests for *.yandex.*, *.turbopages.org.
How it works

When a user visits a Turbo page, it sends a GET request to your resource that verifies authorization. The unique user ID is passed in the TURBO_ID query parameter. The resource processes the request and returns the validation result.

Example of a request sent by a Turbo page:
CORS GET https://my-domain.ru/api/auth?TURBO_ID={TURBO_ID}

TURBO_ID is a unique user ID in the Yandex.Turbo system. TURBO_ID is reserved for the user for a long time. However, if the user logs in in incognito mode, the ID may be lost.

What you need to do
Create a resource that processes the request and checks the user's authorization with TURBO_ID or cookie and returns the result. Allow Cross-Origin requests for the resource from *. yandex.*, *.turbopages.org.
Note. The resource must be accessible over HTTPS.
Expected resource response
The resource should return:
If the user is logged in
HTTP response code: 200.
JSON:
{
    "login": "user@email.tld"
}
Copied to clipboard
Otherwise
HTTP response code: 401.

Resource example is available on GitHub.

Step 3. Create a resource that performs logout

Attention. For Turbo pages to interact with the authorization API, allow Cross-Origin requests for *.yandex.*, *.turbopages.org.
How it works
When the user clicks the Log out button, the Turbo page sends a GET request to your logout resource. It passes a unique user ID that the resource should use to log out.

Example of a request sent by a Turbo page:

CORS GET https://my-domain.ru/api/logout?TURBO_ID={TURBO_ID}
TURBO_ID is a unique user ID in the Yandex.Turbo system. TURBO_ID is reserved for the user for a long time. However, if the user logs in in incognito mode, the ID may be lost.
What you need to do
Create a resource that performs user logout with TURBO_ID or cookie. Allow Cross-Origin requests for the resource from *. yandex.*, *.turbopages.org.

Resource example is available on GitHub.

Step 4. Add user login functionality

To add user login:
  1. In Yandex.Webmaster, open the Turbo pages → Settings → Authorization page.
  2. Specify links to resources:
    • The URL of the page with the login form, for example, https://my-domain.ru/api/login.
    • The URL to verify the authorization, such as https://my-domain.ru/api/auth;
    • A logout URL, such as https://my-domain.ru/api/logout.
  3. Save changes.
  4. See how authentication works on the sample Turbo page.