Подключение и инициализация JavaScript SDK

Обновлено 14 ноября 2024

Подключение

Подключите на страницу скрипт

<head>
    <script src="https://id.sber.ru/sdk/web/sberid-sdk.production.js"></script>
</head>

Добавьте вызов скрипта

  new SberidSDK({
    oidc: {
      client_id: '9868c1be-0779-4bb3-93e1-f227aa387a43',
      client_type: 'PRIVATE',
      nonce: 'McTTOAYUkH3ye-X9hhD67N3Kc6lIiSz3unUq54M1s0s',
      redirect_uri: 'https://www.sberbank.ru/ru/person',
      state: 'af0ifjsldkj',
      scope: 'openid name',
      response_type: 'code',
      name: 'Название вашего приложения'
    },
    container: '.sberIdButton' // селектор контейнера куда будет встраиваться кнопка
  })
    .init()
    .then((sdk) => {
        // завершена инициализация sdk, ваш код если необходимо
    });

Параметры инициализации SberidSDK

oidc (Object)(обязательный):

client_id (String)(обязательный): идентификатор системы Партнера, выданный Партнеру при регистрации его системы в Банке (получено в письме от банка с адреса «support@ecom.sberbank.ru» с темой «Сбербанк Профиль»)
client_type (String)(обязательный): Поддерживаемое значение только 'PRIVATE'
nonce (String)(обязательный): значение используемое для привязки клиентского сеанса к идентификационному токену и для предотвращения повторных атак
state (String)(обязательный): значение генерируемое случайным образом уникальное значение, предназначен для предотвращения CSRF, максимальная длина строки 96 символов
scope (String)(обязательный): наименование групп данных, на которые подписана система Партнера (выдается при регистрации системы в Банке). Значение openid является обязательным и располагается на первой позиции. Разделитель – пробел. Полный перечень параметров доступен в разделе Перечень допустимых параметров Scope
redirect_uri (String)(обязательный): адрес страницы Партнера, на которую будет перенаправлен клиент после успешной аутентификации в системе Банка
response_type (String)(обязательный): Поддерживаемое значение только 'code'
name (String)(необязательный): название сервиса партнера
login_hint (String)(необязательный): Функционал позволяющий передавать номер телефона пользователя для сокращения шага ввода номера телефона и сразу перехода на экран подтверждения входа по смс

personalization (Boolean)(необязательный): включить персонализацию кнопки \ container (String)(необязательный): селектор контейнера куда будет встраиваться кнопка "Войти по Сбер ID" \ baseUrl (String)(необязательный): позволяет менять домен на котором располагается скрипт, например для отладки на тестовых стендах \ debug (Boolean)(необязательный): включить отладочные сообщения \ utmProxyDisabled (Boolean)(необязательный): отключить передачу utm меток на страницу входа \ display (String)(необязательный): режим отображения страницы авторизации по Сбер ID

popup: всплывающее окно, работает только в desktop
page: в текущем окне

buttonProps (Object)(необязательный): настройки отображения кнопки входа

logo (Boolean)(необязательный): отображать логотип на кнопке
changeUser (Boolean)(необязательный): добавить на кнопку возможность смены пользователя
mainText (String)(необязательный): вариант отображаемого текста на кнопке
- default: Войти по Сбер ID
- resume: Продолжить со Сбер ID
- login: Сбер ID
- fill: Заполнить со Сбер ID
- register: Зарегистрироваться по Сбер ID
- start: Начать со Сбер ID
personalText (String)(необязательный): вариант отображаемого текста на персонализированной кнопке
- default: Войти как {{userName}}
- resume: Продолжить как {{userName}}
- login: Войти как {{userName}}
theme (String)(необязательный): выбор темы кнопки
- light: светлая кнопка
- default: зеленая кнопка
size (String)(необязательный): размер кнопки
- xxl: height: 64px
- xl: height: 56px
- lg: height: 48px
- md: height: 40px
- sm: height: 32px
- xs: height: 28px

enable (Boolean)(необязательный): включить Быстрый вход
timeout (Number)(необязательный): ограничение по времени в мс на попытку выполнить быстрый вход
mode (String)(необязательный): режим Быстрого входа
- default: запуск сценария входа стартует после нажатия кнопки Войти по Сбер ID
- auto: запуск сценария входа стартует сразу после инициализации SDK
onErrorAutoMode (Function)(необязательный): callback функция вызываемая если не удалось осуществить быстрый вход в режиме auto
onErrorDefaultMode (Function)(необязательный): callback функция вызываемая если не удалось осуществить быстрый вход в режиме default, возвращает boolean значение указывающее необходимость продолжить вход по ссылке

notification (Object)(необязательный): настройки баннера

enable (Boolean)(необязательный): включить отображение баннера
position (String)(необязательный): расположение баннера на экране, учитывается только для desktop
- top-right: верхний правый угол экрана
- bottom-right: нижний правый угол экрана
- top-left: верхний левый угол экрана
- bottom-left: нижний левый угол экрана
autoClose (Boolean)(необязательный): включить автоматическое закрытие баннера, только для мобильных браузеров
autoCloseDelay (Number)(необязательный): через сколько сек автоматически закрывать баннер, только для мобильных браузеров
serviceName (String)(необязательный): позволяет указать название сервиса в персонализированном баннере, ограничение 15 символов, иначе используется значение по умолчанию "сервис"
textOfferExtension (String)(необязательный): дополнить текст соглашения
theme (String)(необязательный): выбор темы баннера
- white: светлая тема
- dark: темная тема
onNotificationBannerClose (Function)(необязательный): callback функция на закрытие баннера
onNotificationBannerOpen (Function)(необязательный): callback функция на открытие баннера

deeplink (Object)(необязательный): настройки входа через deeplink

enable (Boolean): включить вход с попощью deeplink
mode (String): режим входа
- manual: запуск сценария входа стартует после нажатия кнопки Войти по Сбер ID
- auto: запуск сценария входа стартует сразу после инициализации SDK
allowSberIDRedirects (Array[String]): Список разрешенных приложений для авторизации, если задан пустой, то разрешено запускать любое приложение

onSuccessCallback (Function)(необязательный): callback функция вызываемая при успешной аутентификации пользователя, если вход осуществлялся через fastLogin или модальное окно \ onErrorCallback (Function)(необязательный): callback функция вызываемая при ошибке аутентификации пользователя, если вход осуществлялся через модальное окно \ onButtonClick (Function)(необязательный): callback функция вызываемая при клике по кнопке \ onPersonalizationStatus (Function)(необязательный): callback функция вызываемая после проверки возможности отобразить персонализированную кнопку, отработает только если параметр personalization имеет значение true

Параметры управлением SberidSDK

getLink (Function) : функция возвращает ссылку для перехода на страницу Сбер ID \ getDeeplink (Function) : функция возвращает deeplink для авторизации через СБОЛ \ disable (Function) : функция блокирует кнопку входа по Сбер ID \ enable (Function) : функция разблокирует кнопку входа по Сбер ID \ notification (Object) : управление баннером

hide (Function): вызов функции скрывает баннер
show (Function): вызов функции отображает баннер
getIsHide (Function): вызов функции возвращает состояние отображения баннера, скрыт баннер или нет
setPosition (Function): вызов функции устанавливает баннера, только для desktop
getPosition (Function): вызов функции возвращает текущую позицию баннера, только для desktop
setTheme (Function): вызов функции устанавливает цветовую тему баннера
getTheme (Function): вызов функции возвращает текущую цветовую тему баннера

Примеры настройки способов входов

Настройки входа по кнопке
Настройки входа по кнопке с открытием формы авторизации в модальном окне
Настройка быстрого входа по персонализированной кнопке
Настройки входа через баннер
Настройка входа кнопка + баннер
Настройка автоматического входа
Настройка входа по ссылке
Настройка подогрева куки

Подключение и инициализация JavaScript SDK