Adding user login functionality
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.
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 clipboardIf 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
*.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
*.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:
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.CORS GET https://my-domain.ru/api/logout?TURBO_ID={TURBO_ID}
- 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
- In Yandex.Webmaster, open thepage.
- 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
.
- Save your changes.
- See how authentication works on the sample Turbo page.