Вход с помощью баннера

Обновлено 25 августа 2026

Для доступности SberidSDK подключите скрипт https://id.sber.ru/sdk/web/sberid-sdk.production.js на все страницы

Для корректной работы отображения баннера, представленный ниже конфиг должен вызываться на всех страницах не авторизованной зоны, кроме страницы авторизации, где уже есть кнопка для входа

  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: 'Название вашего приложения'
    },
    notification: {
      // включаем отображение баннера
      enable: true, 

      // возможные значения: 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left'
      position: 'bottom-right', // 'bottom-right' - значение по умолчанию

      // возможные значения: 'white' | 'dark'
      theme: 'white', // 'white' - значение по умолчанию
    },
    // данная функцию будет вызвана если получится сделать авторизацию без перехода на страницу Сбер ID
    onSuccessCallback: ({state, code} = {}) => {
      if(state && code){
        // проверка и отправка данных state, code для завершения авторизации
      } else {
        // обработка ошибки
      }
    }
  })
  .init()
  .then(() => {
      // завершена инициализация sdk, ваш код если необходимо
  });

Программное управление баннером

После инициализации SDK управление баннером доступно через объект notification.

Метод	Описание
hide()	Скрывает баннер.
show()	Отображает баннер.
getIsHide()	Возвращает состояние отображения баннера: true, если баннер скрыт, и false, если он отображается.
setPosition(position)	Устанавливает позицию баннера. Доступно только для desktop.
getPosition()	Возвращает текущую позицию баннера. Доступно только для desktop.
setTheme(theme)	Устанавливает цветовую тему баннера.
getTheme()	Возвращает текущую цветовую тему баннера.

Пример использования

new SberidSDK(config)
  .init()
  .then((sdkInst) => {
    if (!sdkInst.notification) {
      return;
    }

    // Устанавливаем позицию баннера (только для desktop)
    sdkInst.notification.setPosition('bottom-right');

    // Получаем текущую позицию баннера
    const position = sdkInst.notification.getPosition();

    // Устанавливаем цветовую тему баннера
    sdkInst.notification.setTheme('dark');

    // Получаем текущую цветовую тему баннера
    const theme = sdkInst.notification.getTheme();

    // Переключаем видимость баннера в зависимости от его текущего состояния
    if (sdkInst.notification.getIsHide()) {
      sdkInst.notification.show();
    } else {
      sdkInst.notification.hide();
    }
  });

Возможности кастомизации баннера

Баннер поддерживает настройку следующих элементов:

• радиус скругления баннера;
• логотип;
• название сервиса;
• описание;
• радиус скругления кнопки;
• цвет кнопки и анимированной границы баннера — см. ниже.

Стандартный вариант

Цветовые варианты

Баннер можно адаптировать под фирменный стиль сервиса, изменив его цвет.