Set up the sdk-suggest.js script for the authorization page

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 and parameters

YaAuthSuggest.init(oauthQueryParams, tokenPageOrigin, [suggestParams])

Warning

The suggestParams group of parameters is only applicable to the button. When using the widget, don't specify those parameters.

A call example:

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

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(({
      handler
   }) => handler())
   .then(data => console.log('Message with a token', data))
   .catch(error => console.log('Error handling', error));

See also Example of usage on an HTML page

Parameter descriptions:

Parameter

Required

Type

Description

oauthQueryParams contains query parameters that are used when opening the OAuth authorization page (see the full list of query parameters).

client_id

Yes

string

The OAuth app ID received after registration.

response_type

Yes

string

The request type.

redirect_uri

No

string

The URL of the callback page that receives the token. Must match the address you entered in the Redirect URI field for the OAuth app with this client_id. This URL is used for passing the authorization result. If you haven't specified this parameter, the first value from the Redirect URI field is used.

tokenPageOrigin is a parameter that enables the authorization page to communicate with the callback page via postMessage.

Only the parameter value is specified.

Yes

string

"Origin" of the callback page that receives the token. This parameter can't be unspecified or contain the * symbol.

suggestParams contains parameters that determine the button's appearance. They're only specified when the authorization component is a button. They don't apply to a widget. There is a button generator to help you tweak the parameter values.

view

Yes

string

Parameter for displaying the button with the button value.

parentId

No

string

The id attribute of the container where the button will be embedded. If no ID is found, the button fills the body.

buttonView

No

string

The button type. By default — main. Possible values:

  • main is the primary black button with a Yandex brand icon and text. The button turns white when its theme (buttonTheme) is switched to the dark one.
  • additional is an alternative button with a border. Unlike the primary button, what contrasts with the theme is the border, not the button background.
  • icon is a square icon button with a Yandex brand icon on a red background. You can change the border radius for rounded corners.
  • iconBG is a square icon button with a Yandex brand icon (the letter "Y" in a red circle) that has a gray background and a gray border. You can change the background color, border width and color, and border radius.

buttonTheme

No

string

Button theme. To avoid the button blending into the background, change this parameter when your website page's or app's theme changes. By default — light. Possible values:

  • light is the light theme.
  • dark is the dark theme.

buttonSize

No

string

The button size that determines its height, width, and switching to the minimized or maximized appearances. By default: m. Possible values:

  • xs | s | m | l | xl | xxl

buttonBorderRadius

No

number

The button's border radius (the value of the border-radius CSS property in px). By default — 0

buttonIcon

No

string

The language of the logo on the button. The default value is ya. Possible values:

  • ya for the Russian version.
  • yaEng for the English version.

customBgColor

No

string

The background color of the icon button. Can be specified in any format supported by CSS. This parameter is only applicable to the iconBG button.

customBgHoveredColor

No

string

The background color of the icon button on hover. Can be specified in any format supported by CSS. This parameter is only applicable to the iconBG button.

customBorderColor

No

string

The border color of the icon button. Can be specified in any format supported by CSS. This parameter is only applicable to the iconBG button.

customBorderHoveredColor

No

string

The border color of the icon button on hover. Can be specified in any format supported by CSS. This parameter is only applicable to the iconBG button.

customBorderWidth

No

number

The border width of the icon button. This parameter is only applicable to the iconBG button.

Button generator

Select parameter values that suit your needs. The generator will render the button and produce the code with the same parameters.

Copy the generated code and paste it into the page. In the code, substitute:

  • oauthQueryParams with the strings below.

    {
   client_id: 'c46f0c53093440c39f12eff95a9f2f93',
   response_type: 'token',
   redirect_uri: 'https://examplesite.com/suggest/token'
}

    Use the following parameter values in these strings:

    • For client_id — the ID of the OAuth app registered in Step 1.
    • For redirect_uri — the URL of the callback page you entered in the Redirect URI field for the OAuth app that has this client_id (if you don't specify any URL, the first value from the Redirect URI field will be used).

  • tokenPageOrigin with the "origin" of the callback page that receives the token.

Return 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 a Promise as an iframe with the login button or widget when status=ok.

code

The error code when status=error.

Example of usage on an HTML page

An instant login widget or a login button is added to the page:

  • To add a login button, use the whole code below.
  • To add a widget, use the code below after excluding the additional suggestParams parameters that determine the login button's appearance.
<!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 a token: ', data);
               document.body.innerHTML += `Message with a 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>
Previous
Connection
Next
The sdk-suggest-token.js script for the callback page