Adding user login functionality

Turbo pages now feature user login and logout functionality. 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 it to open on the yandex.{ru, br, fr, tr, com.tr} domain.

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

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

When the user visits the 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.
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

How it works
When a 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.

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;
    • An logout URL, such as https://my-domain.ru/api/logout.
  3. Save changes.
  4. Check how the authorization works on the sample Turbo page.