Справочник по входу с помощью Google HTML API

На этой странице справки описывается API HTML-атрибутов данных «Войти через Google». Вы можете использовать этот API для отображения запроса «Войти одним нажатием» или кнопки «Войти через Google» на своих веб-страницах.

Элемент с идентификатором "g_id_onload"

Атрибуты данных «Войти через Google» можно добавлять в любые видимые и невидимые элементы, например, <div> и <span> . Единственное требование — идентификатор элемента должен быть установлен как g_id_onload . Не добавляйте этот идентификатор к нескольким элементам.

Атрибуты данных

В следующей таблице перечислены атрибуты данных с их описаниями:

Атрибут
data-client_id Идентификатор клиента вашего приложения
data-color_scheme Цветовая схема, применяемая к подсказке «Одно касание».
data-auto_prompt Отображение Google One Tap.
data-auto_select Включает автоматический выбор в Google One Tap.
data-login_uri URL вашей конечной точки входа
data-callback Имя функции обработчика токена JavaScript ID
data-native_login_uri URL-адрес конечной точки обработчика ваших учетных данных паролей
data-native_callback Имя функции обработчика учетных данных паролей JavaScript
data-native_id_param Имя параметра для значения credential.id
data-native_password_param Имя параметра для значения credential.password
data-cancel_on_tap_outside Определяет, следует ли отменить подсказку, если пользователь щелкнет за пределами подсказки.
data-prompt_parent_id DOM-идентификатор элемента-контейнера подсказки One Tap
data-skip_prompt_cookie Пропускает одно нажатие, если указанный файл cookie имеет непустое значение.
data-nonce Случайная строка для идентификационных токенов
data-context Заголовок и слова в подсказке «Одно касание»
data-moment_callback Имя функции прослушивателя уведомлений о состоянии пользовательского интерфейса
data-state_cookie_domain Если вам необходимо вызвать One Tap в родительском домене и его поддоменах, передайте родительский домен этому атрибуту, чтобы использовался один общий файл cookie.
data-ux_mode UX-поток кнопки «Войти через Google»
data-allowed_parent_origin Источники, которым разрешено встраивать промежуточный iframe. One Tap работает в режиме промежуточного iframe, если этот атрибут присутствует.
data-intermediate_iframe_close_callback Переопределяет поведение промежуточного iframe по умолчанию, когда пользователи вручную закрывают One Tap.
data-itp_support Включает улучшенный One Tap UX в браузерах ITP.
data-login_hint Пропустите выбор учетной записи, предоставив пользователю подсказку.
data-hd Ограничить выбор аккаунтов по домену.
data-use_fedcm_for_prompt Разрешите браузеру управлять запросами пользователя на вход в систему и выступать посредником в процессе входа между вашим веб-сайтом и Google.
data-use_fedcm_for_button Это поле определяет, следует ли использовать пользовательский интерфейс кнопки FedCM в Chrome (для настольных компьютеров M125+ и Android M128+). Значение по умолчанию — false .
data-button_auto_select Включить ли параметр автоматического выбора для потока кнопок FedCM. Если он включен, пользователи, возвращающиеся с активным сеансом Google, будут автоматически входить в систему, минуя запрос выбора учётной записи. Значение по умолчанию — false .

Типы атрибутов

В следующих разделах содержатся сведения о типе каждого атрибута и примеры.

данные-client_id

Этот атрибут — идентификатор клиента вашего приложения, который находится и создаётся в консоли Google Cloud. Дополнительную информацию см. в таблице ниже:

Тип Необходимый Пример
нить Да data-client_id="CLIENT_ID.apps.googleusercontent.com"

data-color_scheme

Это поле определяет цветовую схему, применяемую к подсказке One Tap. Дополнительную информацию см. в таблице ниже:

Тип Необходимый Пример
нить Необязательно. По умолчанию используется цветовая схема, заданная в системе пользователя. data-color_scheme="dark"

В следующей таблице перечислены доступные цветовые схемы и их описания.

Цветовая схема
default Применить цветовую схему системы пользователя по умолчанию; в зависимости от предпочтений пользователя схема может быть светлой или темной.
light Примените светлую цветовую гамму.
dark Примените темную цветовую схему.

data-auto_prompt

Этот атрибут определяет, отображать ли функцию «Одно касание». Значение по умолчанию — true . Функция «Одно касание» Google не отображается, если значение равно false . Дополнительную информацию см. в таблице ниже:

Тип Необходимый Пример
булев Необязательный data-auto_prompt="true"

data-auto_select

Этот атрибут определяет, следует ли автоматически возвращать токен ID без взаимодействия с пользователем, если ваше приложение было одобрено только одним сеансом Google. Значение по умолчанию — false . Дополнительную информацию см. в таблице ниже:

Тип Необходимый Пример
булев Необязательный data-auto_select="true"

data-login_uri

Этот атрибут представляет собой URI вашей конечной точки входа.

Значение должно точно соответствовать одному из авторизованных URI перенаправления для клиента OAuth 2.0, который вы настроили на платформе Google Auth, и должно соответствовать нашим правилам проверки URI перенаправления .

Этот атрибут можно опустить, если текущая страница является страницей входа в систему; в этом случае учетные данные публикуются на этой странице по умолчанию.

Ответ на идентификационный токен отправляется в конечную точку входа, когда не определена функция обратного вызова и пользователь нажимает кнопки «Войти через Google» или «Одним нажатием», или происходит автоматический вход.

Ваша конечная точка входа должна обрабатывать запросы POST, содержащие параметр credential со значением токена ID в теле.

Дополнительную информацию смотрите в следующей таблице:

Тип Необязательный Пример
URL По умолчанию используется URI текущей страницы или указанное вами значение.
Игнорируется, если установлены data-ux_mode="popup" и data-callback .
data-login_uri="https://www.example.com/login"

обратный вызов данных

Этот атрибут — имя функции JavaScript, обрабатывающей возвращаемый токен ID. Дополнительную информацию см. в следующей таблице:

Тип Необходимый Пример
нить Требуется, если data-login_uri не задан. data-callback="handleToken"

Может быть использован один из атрибутов data-login_uri и data-callback . Это зависит от следующих конфигураций компонента и режима пользовательского интерфейса:

  • Атрибут data-login_uri необходим для режима redirect кнопки «Войти через Google», который игнорирует атрибут data-callback .

  • Для режима Google One Tap и popup окна кнопки входа Google необходимо установить один из этих двух атрибутов. Если установлены оба, атрибут data-callback имеет более высокий приоритет.

Функции JavaScript в пространстве имён не поддерживаются HTML API. Вместо этого используйте глобальную функцию JavaScript без пространства имён. Например, используйте mylibCallback вместо mylib.callback .

data-native_login_uri

Этот атрибут представляет собой URL-адрес конечной точки обработчика учётных данных вашего пароля. Если вы установите атрибут data-native_login_uri или атрибут data-native_callback , библиотека JavaScript будет использовать встроенный менеджер учётных данных при отсутствии сеанса Google. Невозможно установить одновременно атрибуты data-native_callback и data-native_login_uri . Дополнительную информацию см. в таблице ниже.

Тип Необходимый Пример
нить Необязательный data-login_uri="https://www.example.com/password_login"

data-native_callback

Этот атрибут — имя функции JavaScript, обрабатывающей учётные данные пароля, возвращаемые встроенным менеджером учётных данных браузера. Если установить атрибут data-native_login_uri или атрибут data-native_callback , библиотека JavaScript будет использовать встроенный менеджер учётных данных при отсутствии сеанса Google. Нельзя одновременно устанавливать data-native_callback и data-native_login_uri . Дополнительную информацию см. в таблице ниже.

Тип Необходимый Пример
нить Необязательный data-native_callback="handlePasswordCredential"

Функции JavaScript в пространстве имён не поддерживаются HTML API. Вместо этого используйте глобальную функцию JavaScript без пространства имён. Например, используйте mylibCallback вместо mylib.callback .

data-native_id_param

При отправке учётных данных пароля в конечную точку обработчика учётных данных паролей вы можете указать имя параметра для поля credential.id . Имя по умолчанию — email . Дополнительную информацию см. в следующей таблице:

Тип Необходимый Пример
URL Необязательный data-native_id_param="user_id"

data-native_password_param

При отправке учётных данных пароля в конечную точку обработчика учётных данных паролей вы можете указать имя параметра для значения credential.password . Имя по умолчанию — password . Дополнительную информацию см. в следующей таблице:

Тип Необходимый Пример
URL Необязательный data-native_password_param="pwd"

data-cancel_on_tap_outside

Этот атрибут определяет, следует ли отменять запрос One Tap, если пользователь нажимает кнопку за пределами поля запроса. Значение по умолчанию — true . Чтобы отключить этот параметр, установите значение false . Дополнительную информацию см. в таблице ниже:

Тип Необходимый Пример
булев Необязательный data-cancel_on_tap_outside="false"

data-prompt_parent_id

Этот атрибут задаёт DOM-идентификатор элемента-контейнера. Если он не задан, в правом верхнем углу окна отображается подсказка для быстрого доступа. Дополнительную информацию см. в таблице ниже:

Тип Необходимый Пример
нить Необязательный data-prompt_parent_id="parent_id"

Использует файл cookie для управления отображением запроса One Tap. Если файл cookie, указанный этим атрибутом, имеет непустое значение, запрос не отображается. Дополнительную информацию см. в таблице ниже:

Тип Необходимый Пример
нить Необязательный data-skip_prompt_cookie="SID"

данные-nonce

Этот атрибут представляет собой случайную строку, используемую токеном ID для предотвращения атак повторного воспроизведения. Дополнительную информацию см. в таблице ниже:

Тип Необходимый Пример
нить Необязательный data-nonce="biaqbm70g23"

Длина одноразового значения ограничена максимальным размером JWT, поддерживаемым вашей средой, а также индивидуальными ограничениями размера HTTP браузера и сервера.

контекст данных

Это поле изменяет текст заголовка и сообщений, отображаемых в подсказке One Tap. Не действует для браузеров ITP. По умолчанию используется signin .

Дополнительную информацию смотрите в следующей таблице:

Тип Необходимый Пример
нить Необязательный data-context="use"

В следующей таблице перечислены все доступные контексты и их описания:

Контекст
signin «Войти в систему»
signup «Подпишитесь на»
use "Использовать"

data-moment_callback

Этот атрибут представляет собой имя функции прослушивателя уведомлений о состоянии пользовательского интерфейса. Подробнее см. в описании типа данных PromptMomentNotification .

Дополнительную информацию смотрите в следующей таблице:

Тип Необходимый Пример
нить Необязательный data-moment_callback="logMomentNotification"

Функции JavaScript в пространстве имён не поддерживаются HTML API. Вместо этого используйте глобальную функцию JavaScript без пространства имён. Например, используйте mylibCallback вместо mylib.callback .

Если вам нужно отобразить One Tap в родительском домене и его поддоменах, передайте родительский домен этому атрибуту, чтобы использовать один файл cookie с общим состоянием. Дополнительную информацию см. в таблице ниже:

Тип Необходимый Пример
нить Необязательный data-state_cookie_domain="example.com"

data-ux_mode

Этот атрибут задаёт пользовательский интерфейс, используемый кнопкой «Войти через Google». Значение по умолчанию — popup . Этот атрибут не влияет на пользовательский интерфейс One Tap. Дополнительную информацию см. в таблице ниже:

Тип Необходимый Пример
нить Необязательный data-ux_mode="redirect"

В следующей таблице перечислены доступные режимы UX и их описания.

Режим UX
popup Выполняет UX-процесс входа в систему во всплывающем окне.
redirect Выполняет UX-процесс входа в систему путем перенаправления на всю страницу.

data-allowed_parent_origin

Источники, которым разрешено встраивать промежуточный iframe. One Tap работает в режиме промежуточного iframe, если этот атрибут присутствует. Дополнительную информацию см. в таблице ниже:

Тип Необходимый Пример
строка или массив строк Необязательный data-allowed_parent_origin="https://example.com"

В следующей таблице перечислены поддерживаемые типы значений и их описания.

Типы значений
string Единый доменный URI. "https://example.com"
string array Список URI доменов, разделенных запятыми. "https://news.example.com,https://local.example.com"

Если значение атрибута data-allowed_parent_origin недействительно, инициализация одним касанием промежуточного режима iframe завершится ошибкой и будет остановлена.

Также поддерживаются подстановочные префиксы. Например, "https://*.example.com" соответствует example.com и его поддоменам на всех уровнях (например, news.example.com , login.news.example.com ). Что следует учитывать при использовании подстановочных префиксов:

  • Строки шаблонов не могут состоять только из подстановочных знаков и домена верхнего уровня. Например https:// .com и https:// .co.uk недействительны, поскольку "https:// .example.com" соответствует example.com и всем его поддоменам. Для представления двух разных доменов используйте список, разделённый запятыми. Например, "https://example1.com,https:// .example2.com" соответствует доменам example1.com , example2.com и поддоменам example2.com
  • Подстановочные домены должны начинаться с безопасной схемы https://, поэтому "*.example.com" считается недействительным.

data-intermediate_iframe_close_callback

Переопределяет поведение промежуточного iframe по умолчанию, когда пользователи вручную закрывают One Tap, нажимая кнопку «X» в интерфейсе One Tap. По умолчанию промежуточный iframe немедленно удаляется из DOM.

Поле data-intermediate_iframe_close_callback действует только в режиме промежуточного iframe. Оно влияет только на промежуточный iframe, а не на iframe One Tap. Интерфейс One Tap удаляется перед вызовом обратного вызова.

Тип Необходимый Пример
функция Необязательный data-intermediate_iframe_close_callback="logBeforeClose"

Функции JavaScript в пространстве имён не поддерживаются HTML API. Вместо этого используйте глобальную функцию JavaScript без пространства имён. Например, используйте mylibCallback вместо mylib.callback .

data-itp_support

Это поле определяет, следует ли включать обновлённый интерфейс One Tap UX в браузерах, поддерживающих интеллектуальную систему предотвращения слежения (ITP). Значение по умолчанию — false . Дополнительную информацию см. в таблице ниже:

Тип Необходимый Пример
булев Необязательный data-itp_support="true"

data-login_hint

Если ваше приложение заранее знает, какой пользователь должен войти в систему, оно может предоставить Google подсказку для входа. В случае успешного входа выбор учётной записи пропускается. Допустимые значения: адрес электронной почты или подполе токена идентификатора.

Более подробную информацию см. в документации OpenID Connect для login_hint .

Тип Необходимый Пример
Строка. Может быть адресом электронной почты или значением sub из токена идентификатора. Необязательный data-login_hint="elisa.beckett@gmail.com"

data-hd

Если у пользователя несколько учётных записей, и он должен входить только с помощью своей учётной записи Workspace, используйте этот параметр, чтобы предоставить Google подсказку о доменном имени. В случае успеха учётные записи пользователей, отображаемые при выборе учётной записи, ограничиваются указанным доменом. Подстановочное значение: * позволяет пользователю выбирать только учётные записи Workspace и исключает учётные записи пользователей (user@gmail.com).

Более подробную информацию см. в документации OpenID Connect для hd .

Тип Необходимый Пример
Строка. Полное доменное имя или *. Необязательный data-hd="*"

data-use_fedcm_for_prompt

Разрешите браузеру управлять запросами на вход в систему и выступать посредником при входе между вашим сайтом и Google. Значение по умолчанию — false. Подробнее см. на странице «Миграция в FedCM» .

Тип Необходимый Пример
булев Необязательный data-use_fedcm_for_prompt="true"

data-use_fedcm_for_button

Это поле определяет, следует ли использовать пользовательский интерфейс кнопки FedCM в Chrome (для настольных компьютеров M125+ и Android M128+). Значение по умолчанию — false . Дополнительную информацию см. в таблице ниже:

Тип Необходимый Пример
булев Необязательный data-use_fedcm_for_button="true"

data-button_auto_select

Это поле определяет, следует ли включить функцию автоматического выбора для потока кнопок FedCM. Если эта опция включена, вернувшиеся пользователи с активным сеансом Google будут автоматически входить в систему, минуя запрос выбора учётной записи. Значение по умолчанию — false . Необходимо явно включить функцию автоматического входа с помощью кнопки при запуске подписки. Дополнительную информацию см. в таблице ниже.

Тип Необходимый Пример
булев Необязательный data-button_auto_select="true"

Элемент с классом "g_id_signin"

Если добавить g_id_signin к атрибуту class элемента, элемент отобразится как кнопка «Войти через Google».

Вы можете разместить несколько кнопок «Войти через Google» на одной странице. Каждая кнопка может иметь собственные визуальные настройки. Настройки определяются следующими атрибутами данных.

Атрибуты визуальных данных

В следующей таблице перечислены атрибуты визуальных данных и их описания:

Атрибут
data-type Тип кнопки: значок или стандартная кнопка.
data-theme Тема кнопки. Например, filled_blue или filled_black.
data-size Размер кнопки. Например, маленькая или большая.
data-text Текст кнопки. Например, «Войти через Google» или «Зарегистрироваться через Google».
data-shape Форма кнопки. Например, прямоугольная или круглая.
data-logo_alignment Выравнивание логотипа Google: по левому или по центру.
data-width Ширина кнопки в пикселях.
data-locale Текст кнопки отображается на языке, установленном в этом атрибуте.
data-click_listener Если установлено, эта функция вызывается при нажатии кнопки «Войти через Google».
data-state Если установлено, эта строка возвращается с токеном идентификатора.

Типы атрибутов

В следующих разделах содержатся сведения о типе каждого атрибута и примеры.

тип данных

Тип кнопки. Значение по умолчанию — standard . Дополнительную информацию см. в следующей таблице:

Тип Необходимый Пример
нить Да data-type="icon"

В следующей таблице перечислены все доступные типы кнопок и их описания:

Тип
standard
Кнопка с текстом или персонализированной информацией.
icon
Кнопка-значок без текста.

тема данных

Тема кнопки. Значение по умолчанию — outline . Дополнительную информацию см. в следующей таблице:

Тип Необходимый Пример
нить Необязательный data-theme="filled_blue"

В следующей таблице перечислены доступные темы и их описания:

Тема
outline
Стандартная кнопка с белым фономКнопка со значком на белом фонеПерсонализированная кнопка на белом фоне
Стандартная тема кнопок.
filled_blue
Стандартная кнопка с синим фономКнопка со значком на синем фонеПерсонализированная кнопка с синим фоном
Тема кнопок с синей заливкой.
filled_black
Стандартная кнопка с черным фономКнопка со значком на черном фонеПерсонализированная кнопка на черном фоне
Тема с черными кнопками.

размер данных

Размер кнопки. Значение по умолчанию — large . Дополнительную информацию см. в следующей таблице:

Тип Необходимый Пример
нить Необязательный data-size="small"

В следующей таблице перечислены доступные размеры кнопок и их описания.

Размер
large
Большая стандартная кнопкаБольшая кнопка со значкомБольшая персонализированная кнопка
Большая пуговица.
medium
Средняя стандартная кнопкаКнопка со значком среднего размера
Кнопка среднего размера.
small
Небольшая кнопка входаМаленькая кнопка-значок
Маленькая пуговица.

данные-текст

Текст кнопки. Значение по умолчанию — signin_with . Текст кнопок-значков с разными атрибутами data-text визуально не отличается. Единственное исключение — когда текст считывается для обеспечения доступности экрана.

Дополнительную информацию смотрите в следующей таблице:

Тип Необходимый Пример
нить Необязательный data-text="signup_with"

В следующей таблице перечислены доступные тексты кнопок и их описания:

Текст
signin_with
Стандартная кнопка с надписью «Войти через Google»Кнопка со значком без видимого текста
Текст кнопки: «Войти через Google».
signup_with
Стандартная кнопка с надписью «Зарегистрироваться через Google»Кнопка со значком без видимого текста
Текст кнопки: «Зарегистрироваться через Google».
continue_with
Стандартная кнопка с надписью «Продолжить с Google»Кнопка со значком без видимого текста
Текст кнопки: «Продолжить с Google».
signin
Стандартная кнопка с надписью «Войти»Кнопка со значком без видимого текста
Текст кнопки — «Войти».

форма данных

Форма кнопки. Значение по умолчанию — rectangular . Дополнительную информацию см. в таблице ниже:

Тип Необходимый Пример
нить Необязательный data-shape="rectangular"

В следующей таблице перечислены доступные формы кнопок и их описания:

Форма
rectangular
Прямоугольная стандартная кнопкаПрямоугольная кнопка со значкомПрямоугольная именная кнопка
Кнопка прямоугольной формы. Если используется для кнопки- icon , то она аналогична square .
pill
Стандартная кнопка в форме таблеткиКнопка со значком в форме таблеткиПерсонализированная кнопка в форме таблетки
Кнопка в форме таблетки. Если использовать для кнопки- icon , то она аналогична circle .
circle
Круглая стандартная кнопкаКруглая кнопка со значкомКруглая именная кнопка
Круглая кнопка. Если использовать standard тип кнопки, то это то же самое, что и pill .
square
Квадратная стандартная кнопкаКнопка с квадратным значкомКвадратная именная кнопка
Кнопка квадратной формы. Если использовать для standard типа кнопки, то это то же самое, что и rectangular .

data-logo_alignment

Выравнивание логотипа Google. Значение по умолчанию — left . Этот атрибут применяется только к кнопкам standard типа. Дополнительную информацию см. в таблице ниже:

Тип Необходимый Пример
нить Необязательный data-logo_alignment="center"

В следующей таблице перечислены доступные выравнивания и их описания:

logo_alignment
left
Стандартная кнопка с логотипом G слева
Выравнивает логотип Google по левому краю.
center
Стандартная кнопка с логотипом G в центре
Выравнивает логотип Google по центру.

ширина данных

Минимальная ширина кнопки в пикселях. Максимально доступная ширина — 400 пикселей.

Дополнительную информацию смотрите в следующей таблице:

Тип Необходимый Пример
нить Необязательный data-width=400

данные-локаль

Необязательно. Отображать текст кнопки с использованием указанной локали, в противном случае используются настройки учётной записи Google или браузера по умолчанию. Добавьте параметр hl и код языка в директиву src при загрузке библиотеки, например: gsi/client?hl=<iso-639-code> .

Если этот параметр не задан, используются региональные настройки браузера по умолчанию или настройки сеанса Google. Поэтому разные пользователи могут видеть разные версии локализованных кнопок и, возможно, разных размеров.

Дополнительную информацию смотрите в следующей таблице:

Тип Необходимый Пример
нить Необязательный data-locale="zh_CN"

data-click_listener

С помощью атрибута data-click_listener можно определить функцию JavaScript, которая будет вызываться при нажатии кнопки «Войти через Google».

  <script>
    function onClickHandler(){
      console.log("Sign in with Google button clicked...")
    }
  </script>
  .....
  <div class="g_id_signin"
      data-size="large"
      data-theme="outline"
      data-click_listener="onClickHandler">
  </div>

В этом примере сообщение Нажата кнопка «Войти через Google»... регистрируется в консоли при нажатии кнопки «Войти через Google».

состояние данных

Необязательно: поскольку на одной странице может отображаться несколько кнопок «Войти через Google», вы можете назначить каждой кнопке уникальную строку. Эта же строка будет возвращена вместе с токеном идентификатора, что позволит определить, какую кнопку нажал пользователь для входа.

Дополнительную информацию смотрите в следующей таблице:

Тип Необходимый Пример
нить Необязательный data-state="button 1"

Интеграция на стороне сервера

Ваши конечные точки на стороне сервера должны обрабатывать следующие HTTP-запросы POST .

Конечная точка обработчика токенов ID

Конечная точка обработчика токенов ID обрабатывает токен ID. В зависимости от статуса соответствующей учётной записи вы можете авторизовать пользователя и перенаправить его либо на страницу регистрации, либо на страницу привязки учётных записей для получения дополнительной информации.

Пример запроса к вашей конечной точке входа:

POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Cookie: g_csrf_token=<RANDOM_STRING>
Host: www.example.com

credential=<JWT_ENCODED_ID_TOKEN>&g_csrf_token=<RANDOM_STRING>

HTTP-запрос POST содержит следующую информацию:

Формат Имя Описание
Печенье g_csrf_token Случайная строка, которая изменяется при каждом запросе к конечной точке входа, указанной параметром data-login_uri , должна соответствовать значению в параметре запроса g_csrf_token .
Параметр запроса g_csrf_token Случайная строка, которая изменяется при каждом запросе к конечной точке входа, указанной data-login_uri , должна соответствовать значению cookie-файла g_csrf_token .
Параметр запроса credential Закодированный токен JWT ID, выдаваемый Google.
Параметр запроса select_by Как пользователь выполнил вход.
Параметр запроса state Этот параметр определяется только тогда, когда пользователь нажимает кнопку «Войти через Google» для входа в систему и указывается атрибут state кнопки.

учетные данные

После декодирования идентификационный токен выглядит следующим образом:

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Eliza",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

sub — это глобальный уникальный идентификатор учётной записи Google. Используйте sub только как идентификатор пользователя, поскольку оно уникально для всех учётных записей Google и никогда не используется повторно.

Используя поля email , email_verified и hd вы можете определить, является ли Google хостингом и является ли он авторитетным для адреса электронной почты. В случае, если Google является авторитетным, пользователь подтверждается как законный владелец аккаунта.

Случаи, когда Google является авторитетным:

  • email имеет суффикс @gmail.com , это учетная запись Gmail.
  • email_verified имеет значение true и hd установлен, это учетная запись Google Workspace.

Пользователи могут регистрировать учётные записи Google без использования Gmail или Google Workspace. Если email не содержит суффикс @gmail.com и отсутствует hd , Google не является авторизованным, и для подтверждения пользователя рекомендуется использовать пароль или другие методы проверки подлинности. Значение email_verified также может быть истинным, поскольку Google изначально подтвердил пользователя при создании учётной записи Google, однако с тех пор владелец учётной записи электронной почты третьей стороны мог сменить владельца.

Поле exp показывает срок действия токена на стороне сервера . Для токена ID, полученного через функцию «Войти через Google», он составляет один час. Вам необходимо проверить токен до истечения срока действия. Не используйте exp для управления сеансами. Истечение срока действия токена ID не означает, что пользователь вышел из системы. Ваше приложение отвечает за управление сеансами пользователей.

g_csrf_token

Токен состояния защиты от подделки. Это токен защиты от подделки межсайтовых запросов (CSRF), созданный библиотекой gsi/client . Случайное значение включается как в качестве cookie-файла, так и в качестве параметра запроса в тело полезной нагрузки POST. Если эти два значения не совпадают при обработке запроса на вашем сервере, запрос следует считать недействительным.

select_by

В следующей таблице перечислены возможные значения поля select_by . Для установки значения используются тип используемой кнопки, а также состояние сеанса и согласия.

  • Пользователь нажал кнопку «Одно касание» или «Войти с помощью Google» или использовал бесконтактный автоматический процесс входа.

  • Был найден существующий сеанс, или пользователь выбрал и вошел в учетную запись Google, чтобы создать новый сеанс.

  • Перед тем как предоставить вашему приложению доступ к учетным данным токена ID, пользователь должен либо

    • нажал кнопку «Подтвердить», чтобы дать свое согласие на обмен учетными данными, или
    • ранее предоставили согласие и использовали функцию «Выбрать учетную запись», чтобы выбрать учетную запись Google.

Значение этого поля задается одним из следующих типов:

Ценить Описание
auto Автоматический вход пользователя с существующим сеансом, который ранее дал согласие на передачу учётных данных. Применяется только к браузерам, не поддерживающим FedCM.
user Пользователь с существующим сеансом, который ранее дал согласие, нажал кнопку «Продолжить как», чтобы поделиться учётными данными. Применимо только к браузерам, не поддерживающим FedCM.
fedcm Пользователь нажал кнопку «Продолжить как» одним нажатием, чтобы поделиться учётными данными через FedCM. Применимо только к браузерам , поддерживаемым FedCM.
fedcm_auto Автоматический вход пользователя с существующим сеансом, который ранее дал согласие на передачу учётных данных с помощью FedCM One Tap. Применимо только к браузерам, поддерживаемым FedCM.
user_1tap Пользователь с существующим сеансом нажал кнопку «Продолжить как», чтобы предоставить согласие и поделиться учётными данными. Применимо только к Chrome версии 75 и выше.
user_2tap Пользователь без существующего сеанса нажал кнопку «Продолжить как» одним нажатием, чтобы выбрать учётную запись, а затем нажал кнопку «Подтвердить» во всплывающем окне, чтобы предоставить согласие и поделиться учётными данными. Применимо к браузерам, отличным от Chromium.
itp Пользователь, ранее давший согласие, нажал кнопку One Tap в браузерах ITP .
itp_confirm Пользователь, не предоставивший согласия, нажал кнопку One Tap в браузерах ITP и нажал кнопку «Продолжить», чтобы предоставить согласие и поделиться учетными данными.
btn Пользователь, ранее давший согласие, нажал кнопку «Войти с помощью Google» и выбрал учетную запись Google из раздела «Выбрать учетную запись», чтобы поделиться учетными данными.
btn_confirm Пользователь, не предоставивший согласия, нажал кнопку «Войти через Google», а затем кнопку «Продолжить», чтобы предоставить согласие и поделиться учетными данными.

состояние

Этот параметр определяется только тогда, когда пользователь нажимает кнопку «Войти через Google» для входа в систему и указан атрибут data-state нажатой кнопки. Значение этого поля совпадает со значением, указанным в атрибуте data-state кнопки.

Поскольку на одной странице может отображаться несколько кнопок «Войти через Google», вы можете назначить каждой кнопке уникальную строку. Таким образом, этот параметр state позволяет определить, какую кнопку нажал пользователь для входа.

Конечная точка обработчика учетных данных пароля

Конечная точка обработчика учетных данных паролей обрабатывает учетные данные паролей, которые извлекает встроенный менеджер учетных данных.

HTTP-запрос POST содержит следующую информацию:

Формат Имя Описание
Печенье g_csrf_token Случайная строка, которая изменяется при каждом запросе к конечной точке входа, указанной параметром data-native_login_uri , должна соответствовать значению в параметре запроса g_csrf_token .
Параметр запроса g_csrf_token Случайная строка, которая изменяется при каждом запросе к конечной точке входа, указанной data-native_login_uri , должна соответствовать значению cookie-файла g_csrf_token .
Параметр запроса email Это идентификационный токен, который выдает Google.
Параметр запроса password Как выбираются учетные данные.