---
metadata:
- name: generator
content: Diplodoc Platform v5.44.0
alternate:
- https://yandex.com/dev/id/doc/en/suggest/script-sdk-suggest.md
- https://yandex.com/dev/id/doc/ru/suggest/script-sdk-suggest.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/dev/id/doc/ru/llms.txt
# Настройка скрипта sdk-suggest.js для страницы авторизации
На странице, где пользователь будет осуществлять авторизацию, подключите одну из версий скрипта:
{% list tabs %}
- Версия с полифилами (рекомендовано)
```html
```
См. также:
* [Полифилы](https://ru.wikipedia.org/wiki/Полифил)
- Базовая версия
```html
```
{% endlist %}
## Синтаксис и параметры{#sdk-suggest-syntax}
```javascript
YaAuthSuggest.init(oauthQueryParams, tokenPageOrigin, [suggestParams])
```
{% note warning %}
Группа параметров `suggestParams` применяется только для кнопки. Если вы используете виджет, не указывайте эти параметры.
{% endnote %}
Пример вызова:
{% list tabs %}
- Для виджета "Мгновенный вход"
```javascript
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('Сообщение с токеном', data))
.catch(error => console.log('Обработка ошибки', error));
```
- Для кнопки авторизации
```javascript
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('Сообщение с токеном', data))
.catch(error => console.log('Обработка ошибки', error));
```
{% endlist %}
См. также [Пример использования скрипта на странице HTML](#example)
Описание параметров:
#|
|| **Параметр** | **Обязательный** | **Тип** | **Описание** | **_oauthQueryParams_** — содержит query-параметры, с которыми будет открыта страница OAuth-авторизации (см. список всех [query-параметров](https://yandex.com/dev/id/doc/ru/codes/code-url.md#code)) |
||
|| `client_id` | Да | `string` | Идентификатор OAuth-приложения, который был получен после [регистрации](https://yandex.com/dev/id/doc/ru/register-client.md) ||
|| `response_type` | Да | `string` | Тип запроса ||
|| `redirect_uri` | Нет | `string` | URL вспомогательной страницы, принимающей токен. Должен совпадать с адресом, который вы указали в поле **Redirect URI** OAuth-приложения с данным `client_id`. Используется для передачи результата авторизации. Если параметр не указан, то будет использовано первое из значений поля **Redirect URI** | **_tokenPageOrigin_** — параметр для взаимодействия страницы авторизации со вспомогательной страницей посредством `postMessage` |
||
|| Указывается только значение параметра | Да | `string` | Origin вспомогательной страницы, которая принимает токен. Значение параметра должно быть всегда заполнено и не должно содержать символ `*` | **_suggestParams_** — параметры для выбора внешнего вида кнопки. Указываются, только если в качестве блока авторизации используется кнопка, для виджета эта группа параметров не используется. Подобрать нужные значения параметров можно с помощью [конструктора кнопок](#buttons-constructor) |
||
|| `view` | Да | `string` | Параметр для отображения кнопки со значением `button` ||
|| `parentId` | Нет | `string` | Значение атрибута `id` контейнера, в который нужно встроить кнопку. Если `id` не найден, кнопка будет встроена в `body` ||
|| `buttonView` | Нет | `string` | Тип кнопки. По умолчанию — `main`. Возможные значения:
* `main` — основная версия: черная кнопка с фирменным знаком Яндекса и текстом. Кнопка становится белой при смене темы кнопки (`buttonTheme`) на темную
* `additional` — дополнительная версия: кнопка с обводкой по периметру. Отличается от основной тем, что контрастным к теме является не фон кнопки, а обводка
* `icon` — квадратная кнопка-иконка с фирменным знаком Яндекса на красном фоне. Границы кнопки можно скруглять
* `iconBG` — квадратная кнопка-иконка с фирменным знаком Яндекса (буква "Я" в красном круге) на сером фоне с серой обводкой по периметру. Цвет фона, цвет и ширину обводки можно изменять, а границы кнопки скруглять ||
|| `buttonTheme` | Нет | `string` | Тема кнопки. Параметр необходимо изменять при смене темы страницы вашего сайта или приложения, чтобы кнопка не сливалась с цветом фона. По умолчанию — `light`. Возможные значения:
* `light` — светлая тема
* `dark` — темная тема ||
|| `buttonSize` | Нет | `string` | Размер кнопки, указывающий на базовую высоту, минимальную ширину и переключение на сокращенный вид. По умолчанию — `m`. Возможные значения:
* `xs` \| `s` \| `m` \| `l` \| `xl` \| `xxl` ||
|| `buttonBorderRadius` | Нет | `number` | Радиус скругления границ кнопки (значение `border-radius` css-свойства в px). По умолчанию — 0 ||
|| `buttonIcon` | Нет | `string` | Языковой вариант логотипа на кнопке. По умолчанию — `ya`. Возможные значения:
* `ya` — русскоязычный вариант
* `yaEng` — англоязычный вариант ||
|| `customBgColor` | Нет | `string` | Цвет фона подложки кнопки-иконки. Задается в любом из форматов, поддерживаемых в CSS. Актуально только для кнопки с типом `iconBG` ||
|| `customBgHoveredColor` | Нет | `string` | Цвет фона подложки кнопки-иконки под курсором. Задается в любом из форматов, поддерживаемых в CSS. Актуально только для кнопки с типом `iconBG` ||
|| `customBorderColor` | Нет | `string` | Цвет обводки кнопки-иконки. Задается в любом из форматов, поддерживаемых в CSS. Актуально только для кнопки с типом `iconBG` ||
|| `customBorderHoveredColor` | Нет | `string` | Цвет обводки кнопки-иконки под курсором. Задается в любом из форматов, поддерживаемых в CSS. Актуально только для кнопки с типом `iconBG` ||
|| `customBorderWidth` | Нет | `number` | Толщина обводки кнопки-иконки. Актуально только для кнопки с типом `iconBG` ||
|#
### Конструктор кнопок {#buttons-constructor}
Выберите нужные значения параметров, и конструктор отрисует внешний вид кнопки и выведет код скрипта с этими параметрами.
Скопируйте готовый код из конструктора и вставьте его на страницу. Во вставленном коде замените:
* `oauthQueryParams` — на блок
```javascript
{
client_id: 'c46f0c53093440c39f12eff95a9f2f93',
response_type: 'token',
redirect_uri: 'https://examplesite.com/suggest/token'
}
```
В блоке подставьте нужные значения параметров:
* в параметр `client_id` — идентификатор зарегистрированного на [Этапе 1](https://yandex.com/dev/id/doc/ru/register-client.md) OAuth-приложения;
* в параметр `redirect_uri` — URL вспомогательной страницы, который вы указали в поле **Redirect URI** OAuth-приложения с данным `client_id` (если параметр не указан, то будет использовано первое из значений поля **Redirect URI**).
* `tokenPageOrigin` — на origin вспомогательной страницы, которая принимает токен.
## Возвращаемое значение {#sdk-suggest-return-value}
{% list tabs %}
- Успешный ответ
```javascript
{
status: 'ok',
handler: handler,
}
```
- Ошибка
```javascript
{
status: 'error',
code: '...'
}
```
{% endlist %}
Параметры ответа:
#|
|| **Параметр** | **Описание** ||
|| `status` | Статус ответа:
* `ok` — успешен;
* `error` — завершен ошибкой. ||
|| `handler` | Функция, которая возвращает Promise в виде iframe с кнопкой или виджетом, если `status=ok`. ||
|| `code` | Код ошибки, если `status=error`. ||
|#
## Пример использования на странице HTML {#example}
На страницу подключается виджет "Мгновенный вход" или кнопка авторизации:
* Чтобы подключить кнопку авторизации, используйте представленный ниже код целиком.
* Для подключения виджета используйте представленный код без дополнительных параметров `suggestParams`, определяющих внешний вид кнопки.
```html
```