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

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

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

Код на странице, где необходимо отобразить кнопку

Для доступности 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: false,
    },
    display: 'popup', // указываем что хотим поднимать форму входа в модальном окне
    container: '.sberIdButton', // селектор контейнера куда будет встраиваться кнопка
    onSuccessCallback: ({state, code} = {}) => {
      if(state && code){
        // проверка и отправка данных state, code для завершения авторизации
      } else {
        // обработка ошибки
      }
    },
    onErrorCallback: () => {
      // обработка ошибки
    },
})
    .init()
    .then(() => {
        // завершена инициализация sdk, ваш код если необходимо
    });

Код на странице, после успешной аутентификации по Сбер ID

На странице указанной в параметре redirect_uri, необходимо вызвать следующий код, в случае успешной аутентификации пользователя будет вызвана функция onSuccessCallback, переданными туда параметрами state и code, в случае ошибки будет вызвана функция onErrorCallback, а так же произойдет закрытие модального окна.

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

// проверяем что это модальное окно
  if(window.opener) {
    createSberidSDK.successWindowListener();
  }