Настройка скрипта sdk-suggest.js для страницы авторизации

На странице, где пользователь будет осуществлять авторизацию, подключите одну из версий скрипта:

<head>
   <script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-with-polyfills-latest.js"></script>
</head>

См. также:

<head>
   <script src="https://yastatic.net/s3/passport-sdk/autofill/v1/sdk-suggest-latest.js"></script>
</head>

Синтаксис и параметры

YaAuthSuggest.init(oauthQueryParams, tokenPageOrigin, [suggestParams])

Важно

Группа параметров suggestParams применяется только для кнопки. Если вы используете виджет, не указывайте эти параметры.

Пример вызова:

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

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

См. также Пример использования скрипта на странице HTML

Описание параметров:

Параметр

Обязательный

Тип

Описание

oauthQueryParams — содержит query-параметры, с которыми будет открыта страница OAuth-авторизации (см. список всех query-параметров)

client_id

Да

string

Идентификатор OAuth-приложения, который был получен после регистрации

response_type

Да

string

Тип запроса

redirect_uri

Нет

string

URL вспомогательной страницы, принимающей токен. Должен совпадать с адресом, который вы указали в поле Redirect URI OAuth-приложения с данным client_id. Используется для передачи результата авторизации. Если параметр не указан, то будет использовано первое из значений поля Redirect URI

tokenPageOrigin — параметр для взаимодействия страницы авторизации со вспомогательной страницей посредством postMessage

Указывается только значение параметра

Да

string

Origin вспомогательной страницы, которая принимает токен. Значение параметра должно быть всегда заполнено и не должно содержать символ *

suggestParams — параметры для выбора внешнего вида кнопки. Указываются, только если в качестве блока авторизации используется кнопка, для виджета эта группа параметров не используется. Подобрать нужные значения параметров можно с помощью конструктора кнопок

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

Конструктор кнопок

Выберите нужные значения параметров, и конструктор отрисует внешний вид кнопки и выведет код скрипта с этими параметрами.

Скопируйте готовый код из конструктора и вставьте его на страницу. Во вставленном коде замените:

  • oauthQueryParams — на блок

    {
   client_id: 'c46f0c53093440c39f12eff95a9f2f93',
   response_type: 'token',
   redirect_uri: 'https://examplesite.com/suggest/token'
}

    В блоке подставьте нужные значения параметров:

    • в параметр client_id — идентификатор зарегистрированного на Этапе 1 OAuth-приложения;
    • в параметр redirect_uri — URL вспомогательной страницы, который вы указали в поле Redirect URI OAuth-приложения с данным client_id (если параметр не указан, то будет использовано первое из значений поля Redirect URI).

  • tokenPageOrigin — на origin вспомогательной страницы, которая принимает токен.

Возвращаемое значение

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

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

Параметры ответа:

Параметр

Описание

status

Статус ответа:

  • ok — успешен;
  • error — завершен ошибкой.

handler

Функция, которая возвращает Promise в виде iframe с кнопкой или виджетом, если status=ok.

code

Код ошибки, если status=error.

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

На страницу подключается виджет "Мгновенный вход" или кнопка авторизации:

  • Чтобы подключить кнопку авторизации, используйте представленный ниже код целиком.
  • Для подключения виджета используйте представленный код без дополнительных параметров suggestParams, определяющих внешний вид кнопки.
<!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('Сообщение с токеном: ', data);
               document.body.innerHTML += `Сообщение с токеном: ${JSON.stringify(data)}`;
            })
            .catch(function(error) {
               console.log('Что-то пошло не так: ', error);
               document.body.innerHTML += `Что-то пошло не так: ${JSON.stringify(error)}`;
            });
      };
   </script>
</body>

</html>
Предыдущая
Подключение
Следующая
Скрипт sdk-suggest-token.js для вспомогательной страницы
В этой статье: