Instant authorization script

Use the instant authorization technology to enable users to log in to your website with their Yandex account. The user can authorize via the Instant login widget or personal button:

  • If the user is already logged in to their Yandex account on the current device, the widget or button will show their profile picture and name to continue authorizing on your website.
  • If the user isn't logged in to their Yandex account yet, they can authorize using the widget or button.

The Instant login widget is a popup window on your website where the user can log in with their Yandex account.

  • If the user is authorized:

  • If the user isn't authorized:

A personal button is an element for logging in to Yandex ID quickly that looks like a button. You can place the button on your website page:

  • If the user is authorized:

  • If the user isn't authorized:

After confirming the login, the user is redirected to the OAuth authorization screen with a list of data it grants your app access to.

Connecting

To set up instant authorization:

  1. Prepare the page that will be receiving the OAuth token. The page will be displayed for a few milliseconds, so you can leave it white. Connect the sdk-suggest-token.js script on the page.

  2. Register the OAuth app:

    1. At the Creating an app stage, choose Web services in the Platforms section.

    2. At the Data access stage, choose the data your app will need to access.

    3. At the App platforms stage, specify the link to the page that will be accepting an OAuth token in theRedirect URI field.

  3. Prepare a page with the button or widget. Connect the sdk-suggest.js script on the page.

    Note

    You can customize the personal button appearance using the suggestParams parameter. Customizing the widget appearance is not supported.

Limitations

Instant authorization won't work if at least one of the following parameters is set up in the user's browser:

  • The iframe is blocked.

  • Third-party cookies are blocked.

  • Cookies are completely disabled. In this case, an error is returned when calling YaAuthSuggest.init.

  • Javascript support is disabled.

Sdk-suggest.js script

Enable one of the script versions on the user authorization page:

<head>
   <script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-with-polyfills-latest.js"></script>
</head>

See Also

<head>
   <script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-latest.js"></script>
</head>

Syntax

YaAuthSuggest.init(oauthQueryParams, tokenPageOrigin)

Call example for the widget:

YaAuthSuggest.init({
         client_id: 'c46f0c53093440c39f12eff95a9f2f93',
         response_type: 'token',
         redirect_uri: 'https://example.com/suggest/token'
      },
      'https://example.com'
   )
   .then(({
      handler
   }) => handler())
   .then(data => console.log('Message with the token', data))
   .catch(error => console.log('Error processing', error));

YaAuthSuggest.init(oauthQueryParams, tokenPageOrigin, suggestParams)

Call example for the personal button:

YaAuthSuggest.init({
         client_id: 'c46f0c53093440c39f12eff95a9f2f93',
         response_type: 'token',
         redirect_uri: 'https://example.com/suggest/token'
      },
      'https://example.com', {
         view: 'button',
         parentId: 'container',
         buttonView: 'main',
         buttonTheme: 'light',
         buttonSize: 'm',
         buttonBorderRadius: 0
         }
   )
   .then(({
      handler
   }) => handler())
   .then(data => console.log('Message with the token', data))
   .catch(error => console.log('Error processing', error));

Parameters

Parameter

Description

oauthQueryParams

Contains the query parameters that the OAuth authorization page will be opened with:

  • client_id: The OAuth app ID received after registration. Required parameter.
  • response_type: The request type. Required parameter.
  • redirect_uri: The URI for passing the authorization result. Additional parameter.
    If several redirect url are added to the app with this client_id, the user will be redirected to the first in the list by default.

See the list of all query parameters.

tokenPageOrigin

The origin of the page that accepts the token and that the user will be redirected to from OAuth. Needed to enable the page with the widget or button to interact with the page that accepts the token via postMessage. Required parameter.
The parameter value must always be filled in and can't contain the * character.

suggestParams

Parameter for choosing button appearance:

  • view (string): Parameter for displaying the button with the button value. Required parameter.
  • parentId (string): The attribute ID value of the container the button should fill. If no ID is found, the button fills the body.
  • buttonView (string): Button appearance. Possible values:
    • main | additional. By default: main.
  • buttonTheme (string): Button theme. Possible values:
    • light | dark. By default: light.
  • buttonSize (string): The button size that refers to the basic height, minimum width, and switching to customized appearance. Possible values: xs | s | m | l | xl | xxl. By default: m.
  • buttonBorderRadius (number). The value of the border-radius css property in px. By default = 0.

Returned value

{
   status: 'ok',
   handler: handler,
}

{
   status: 'error',
   code: '...'
}

Response parameters

Parameter

Description

status

Response status:

  • ok: Success.
  • error: Ends in an error.

handler

The function that returns Promise as iframe with a button or widget if status=ok.

code

Error code if status=error.

Sdk-suggest-token.js script

Enable one of the sdk-suggest-token.js script versions on the page that will accept an OAuth token:

<head>
   <script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-token-with-polyfills-latest.js"></script>
</head>

See Also

<head>
   <script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-token-latest.js"></script>
</head>

Syntax

YaSendSuggestToken(origin, extraData)

Call example for the widget or personal button:

YaSendSuggestToken(
   'https://example.com', {
      flag: true
   }
)

Parameters

Parameter

Description

origin

Origin of the page with the button or widget that a postMessage with the token will be sent to. The parameter value must always be filled in and can't contain the * character.

extraData

Additional data sent to the page with the suggestion. Must be a valid JSON object.

Returned value

The function receives information about the token from location.search and location.hash and then sends a postMessage with the information to the page with the widget or button and closes the current window. Doesn't return anything.

Usage example

Note

To connect a personal button, specify the additional suggestParams parameters:

  • view.
  • parentId.
  • buttonView.
  • buttonTheme.
  • buttonSize.
  • buttonBorderRadius.

To connect a personal button, use the code below. To connect the widget, use the provided code without the additional suggestParams parameters.

<!doctype html>
<html lang="ru">

<head>
<meta charSet="utf-8" />
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, shrink-to-fit=no, viewport-fit=cover'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<style>
   html,
   body {
      background: #eee;
   }
</style>
<script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-with-polyfills-latest.js"></script>
</head>

<body>
   <script>
   window.onload = function() {
      window.YaAuthSuggest.init({
               client_id: 'c46f0c53093440c39f12eff95a9f2f93',
                  response_type: 'token',
                  redirect_uri: 'https://examplesite.com/suggest/token'
               },
               'https://examplesite.com', {
                  view: 'button',
                  parentId: 'container',
                  buttonView: 'main',
                  buttonTheme: 'light',
                  buttonSize: 'm',
                  buttonBorderRadius: 0
               }
            )
            .then(function(result) {
               return result.handler()
            })
            .then(function(data) {
               console.log('Message with the token: ', data);
               document.body.innerHTML += `Message with the token: ${JSON.stringify(data)}`;
            })
            .catch(function(error) {
               console.log('Something went wrong: ', error);
               document.body.innerHTML += `Something went wrong: ${JSON.stringify(error)}`;
            });
      };
   </script>
</body>

</html>

When connecting the widget or personal button on the page that receives the token, use the code:

<!doctype html>
<html lang="ru">

<head>
   <meta charSet="utf-8" />
   <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, shrink-to-fit=no, viewport-fit=cover'>
   <meta http-equiv='X-UA-Compatible' content='ie=edge'>
   <style>
      html,
      body {
         background: #eee;
      }
   </style>
   <script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-token-with-polyfills-latest.js"></script>
</head>

<body>
   <script>
      window.onload = function() {
         window.YaSendSuggestToken("https://examplesite.com", {
            "kek": true
         });
      };
   </script>
</body>

</html>
Previous
Personal account Yandex OAuth
Next
Requesting an OAuth token using the confirmation code
In this article: