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

On the page where the user will log in, link one of the following script versions:

Version with polyfills (recommended)

Basic version

<head>
   <script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-with-polyfills-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:

For the instant login widget

For the login button

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));

Parameter descriptions:

Parameter	Required	Type	Description
*oauthQueryParams* stands for "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's ID obtained after registration
`response_type`	Yes	`string`	The request type.
`redirect_uri`	No	`string`	The URL of the auxiliary page receiving 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 the parameter isn't specified, the first value from the Redirect URI field is used.
*tokenPageOrigin* is a parameter needed for interaction between the authorization page and the auxiliary page through a `postMessage`.
Only the parameter value is specified	Yes	`string`	"Origin" of the auxiliary page that receives the token. The value can't be empty or contain the `*` symbol.
*suggestParams* stands for parameters determining 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`	A parameter for displaying the button, with the value `button`.
`parentId`	No	`string`	The `id` attribute's value of the button container. If no `id` is found, the button is placed inside `body`.
`buttonView`	No	`string`	The button type. The default value is `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 outline. Unlike the primary button, what contrasts with the theme is the outline, 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 outline. You can change the background color, outline width and color, and border radius.
`buttonTheme`	No	`string`	The button theme. To avoid the button blending into the background, change this parameter when your website page's or app's theme changes. The default value is `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. The default value is `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). The default value is 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 outline 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 outline 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 outline 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 auxiliary 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 auxiliary page that receives the token.

Return value

Success response

Error

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

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

Response parameters:

Parameter	Description
`status`	The response status: `ok` means success. `error` means an error occurred.
`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>

Was the article helpful?

Installation

The sdk-suggest-token.js script for the auxiliary page