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

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

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

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

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

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

Атрибут
data-client_id Идентификатор клиента вашего приложения
data-auto_prompt Отображение Google One Tap.
data-auto_select Включает автоматический выбор в Google One Tap.
data-login_uri URL-адрес вашей конечной точки входа в систему
data-callback Имя функции обработчика токена идентификатора JavaScript.
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 Случайная строка для токенов ID
data-context Заголовок и слова в подсказке One Tap
data-moment_callback Имя функции прослушивателя уведомлений о состоянии пользовательского интерфейса.
data-state_cookie_domain Если вам нужно вызвать One Tap в родительском домене и его поддоменах, передайте родительский домен этому атрибуту, чтобы использовался один общий файл cookie.
data-ux_mode Процесс пользовательского интерфейса кнопки «Войти через 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-enable_redirect_uri_validation Включите поток перенаправления кнопок, соответствующий правилам проверки URI перенаправления .

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

Следующие разделы содержат подробную информацию о типе каждого атрибута и пример.

data-client_id

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

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

данные-auto_prompt

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

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

данные-auto_select

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

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

data-login_uri

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

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

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

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

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

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

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

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

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

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

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

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

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

  • Атрибут 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"

данные-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"

данные-native_password_param

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

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

данные-cancel_on_tap_outside

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

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

данные-prompt_parent_id

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

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

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

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

данные-nonce

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

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

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

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

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

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

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

Контекст
signin «Войти через Google»
signup «Зарегистрируйтесь через Google»
use «Использовать с Google»

data-moment_callback

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

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

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

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

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

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

данные-ux_mode

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

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

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

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

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 недопустимо, инициализация One Tap промежуточного режима 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" считается недействительным.

данные-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"

данные-login_hint

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

Дополнительные сведения см. в документации OpenID Connect для login_hint .

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

данные-HD

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

Дополнительные сведения см. в документации OpenID Connect для hd .

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

data-use_fedcm_for_prompt

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

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

data-enable_redirect_uri_validation

Включите поток перенаправления кнопок, соответствующий правилам проверки URI перенаправления .

Тип Необходимый Пример
логическое значение Необязательный data-enable_redirect_uri_validation="true"

Элемент с классом «g_id_signin»

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

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

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

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

Атрибут
data-type Тип кнопки: иконка или стандартная кнопка.
data-theme Тема кнопки. Например, fill_blue или fill_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

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

  <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 .

Конечная точка обработчика токена идентификатора

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

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

Формат Имя Описание
печенье g_csrf_token Случайная строка, которая меняется при каждом запросе к конечной точке обработчика.
Параметр запроса g_csrf_token Строка, аналогичная предыдущему значению файла cookie, g_csrf_token .
Параметр запроса credential Токен идентификатора, который выдает 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 и никогда не используется повторно. Не используйте адрес электронной почты в качестве идентификатора, поскольку у учетной записи 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 также может иметь значение true, поскольку Google изначально подтвердил пользователя при создании учетной записи Google, однако с тех пор право собственности на стороннюю учетную запись электронной почты могло измениться.

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

select_by

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

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

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

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

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

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

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

состояние

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

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

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

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

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

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

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

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

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

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

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

Атрибут
data-client_id Идентификатор клиента вашего приложения
data-auto_prompt Отображение Google One Tap.
data-auto_select Включает автоматический выбор в Google One Tap.
data-login_uri URL-адрес вашей конечной точки входа в систему
data-callback Имя функции обработчика токена идентификатора JavaScript.
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 Случайная строка для токенов ID
data-context Заголовок и слова в подсказке One Tap
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-enable_redirect_uri_validation Включите поток перенаправления кнопок, соответствующий правилам проверки URI перенаправления .

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

Следующие разделы содержат подробную информацию о типе каждого атрибута и пример.

data-client_id

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

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

данные-auto_prompt

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

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

данные-auto_select

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

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

data-login_uri

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

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

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

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

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

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

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

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

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

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

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

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

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

  • Атрибут 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"

данные-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"

данные-native_password_param

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

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

данные-cancel_on_tap_outside

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

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

данные-prompt_parent_id

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

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

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

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

данные-nonce

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

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

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

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

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

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

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

Контекст
signin «Войти через Google»
signup «Зарегистрируйтесь через Google»
use «Использовать с Google»

data-moment_callback

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

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

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

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

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

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

data-ux_mode

Этот атрибут устанавливает поток UX, используемый подписью с кнопкой Google. Значение по умолчанию - popup . Этот атрибут не влияет на One Tap UX. Смотрите следующую таблицу для получения дополнительной информации:

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

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

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

data-allowed_parent_origin

Происхождение, которым разрешено внедрить промежуточный iframe. Один крап работает в промежуточном режиме iframe, если этот атрибут представляет. Смотрите следующую таблицу для получения дополнительной информации:

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

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

Типы значений
string Единственный домен URI. "https://example.com"
string array Список, разделенные запятыми доменом Uris. "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 и его субдоменам. Вы также можете использовать отдельный список запятой, чтобы представлять 2 разных домена. Например, "https://example1.com,https://*.example2.com" example1.com example2.com example2.com
  • Домены подстановочных знаков должны начинаться со безопасной схемы https: //, так что "*.example.com" считается недействительной.

data-intermediate_iframe_close_callback

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

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

Тип Необходимый Пример
функция Необязательный 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 поля из токена ID. Необязательный data-login_hint="elisa.beckett@gmail.com"

Data-HD

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

Для получения дополнительной информации см. Документацию OpenID Connect для hd .

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

data-use_fedcm_for_prompt

Позвольте браузеру управлять подсказками для входа пользователей и опосредовать поток входа между вашим веб-сайтом и Google. По умолчанию ложь. См. Перенесен на страницу FedCM для получения дополнительной информации.

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

data-enable_redirect_uri_validation

Включите поток кнопки перенаправления, который соответствует правилам проверки URI .

Тип Необходимый Пример
логический Необязательный data-enable_redirect_uri_validation="true"

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

Если вы добавите g_id_signin в атрибут class элемента, элемент отображается в качестве подписи с кнопкой Google.

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

Визуальные атрибуты данных

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

Атрибут
data-type Тип кнопки: значок или стандартная кнопка.
data-theme Тема кнопки. Например, заполненный
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
Кнопка значка без текста.

Data-Teme

Тема кнопки. Значение по умолчанию 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_alenment

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

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

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

Logo_Alencement
left
Стандартная кнопка с логотипом G слева
Левая выдвигает логотип Google.
center
Стандартная кнопка с логотипом G в центре
Центр-выравнивает логотип Google.

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

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

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

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

Data-Locale

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

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

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

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

data-click_listener

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

  <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.

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

Необязательно, так как несколько кнопок Google можно отобрать на одной и той же странице, вы можете назначить каждую кнопку уникальной строкой. Та же самая строка вернется вместе с токеном идентификатора, поэтому вы можете определить, какая пользователь нажала кнопку, чтобы войти в систему.

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

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

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

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

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

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

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

Формат Имя Описание
печенье g_csrf_token Случайная строка, которая меняется с каждым запросом в конечную точку обработчика.
Запросить параметр g_csrf_token Строка, которая такая же, как предыдущее значение cookie, g_csrf_token .
Запросить параметр credential Идентификационный токен, который вызывает 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 Field в качестве идентификатора для пользователя, поскольку он уникален среди всех учетных записей Google и никогда не используется повторно. Не используйте адрес электронной почты в качестве идентификатора, потому что учетная запись Google может иметь несколько адресов электронной почты в разные моменты времени.

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

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

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

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

Поле exp показывает время истечения срока действия, чтобы проверить токен на вашей стороне сервера . Это один час для токена идентификатора, полученного из подписи с Google. Вам нужно проверить токен до истечения срока действия. Не используйте exp для управления сеансами. Срок действия идентификатора не означает, что пользователь подписан. Ваше приложение отвечает за управление сеансами ваших пользователей.

select_by

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

  • Пользователь нажал либо один нажатие, либо входите в систему с помощью кнопки Google, либо использовал процесс автоматического входа в Touchless.

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

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

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

Значение этого поля установлено на один из этих типов,

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

состояние

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

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

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

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

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

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

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

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

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

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

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

Атрибут
data-client_id Идентификатор клиента вашего приложения
data-auto_prompt Отображать Google One Tap.
data-auto_select Включает автоматический выбор в Google One Tap.
data-login_uri URL вашей конечной точки входа в систему
data-callback Имя функции обработчика идентификатора JavaScript
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 ID DOM One One Tap Container Container
data-skip_prompt_cookie Пропустите один кран, если указанный файл cookie имеет непустое значение.
data-nonce Случайная строка для токенов идентификации
data-context Название и слова в одном
data-moment_callback Имя функции прослушивателя уведомления о статусе пользовательского интерфейса
data-state_cookie_domain Если вам нужно позвонить в один нажатие в родительском домене и его субдоменах, передайте родительский домен этому атрибуту, чтобы использовать один общий файл cookie.
data-ux_mode Вход с помощью кнопки Google UX Flow
data-allowed_parent_origin Происхождение, которым разрешено внедрить промежуточный iframe. Один TAP работает в промежуточном режиме iframe, если этот атрибут присутствует.
data-intermediate_iframe_close_callback Переопределяет промежуточное поведение iframe по умолчанию, когда пользователи вручную закрывают один нажатие.
data-itp_support Включите обновление одного нажатия UX в браузерах ITP.
data-login_hint Пропустите выбор учетной записи, предоставив пользователь.
data-hd Ограничить выбор учетной записи доменом.
data-use_fedcm_for_prompt Позвольте браузеру управлять подсказками для входа пользователей и опосредовать поток входа между вашим веб-сайтом и Google.
data-enable_redirect_uri_validation Включите поток кнопки перенаправления, который соответствует правилам проверки URI .

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

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

data-client_id

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

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

DATA-AUTO_PROMPT

Этот атрибут определяет, отображать ли один нажатие или нет. Значение по умолчанию true . Google One Tap не отображается, когда это значение false . Смотрите следующую таблицу для получения дополнительной информации:

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

DATA-AUTO_SELECT

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

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

data-login_uri

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

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

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

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

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

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

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

Ниже приведен пример -запрос на конечную точку входа в систему:

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

ДАННЫЕ ЗАВЕРШЕНИЕ

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

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

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

  • Атрибут data-login_uri требуется для входа в систему с помощью кнопки Google redirect UX Mode, который игнорирует атрибут data-callback .

  • Один из этих двух атрибутов должен быть установлен для Google One Tap и кнопку Google Fop-in-in popup режима UX. Если оба установлены, атрибут 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

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

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

DATA-PROMPT_PARENT_ID

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

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

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

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

Данные

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

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

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

данные данных

Этот атрибут меняет текст заголовка и сообщения, показанные в приглашении One Tap. Смотрите следующую таблицу для получения дополнительной информации:

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

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

Контекст
signin "Войдите с Google"
signup "Зарегистрируйтесь в Google"
use "Использовать с Google"

data-moment_callback

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

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

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

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

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

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

data-ux_mode

Этот атрибут устанавливает поток UX, используемый подписью с кнопкой Google. Значение по умолчанию - popup . Этот атрибут не влияет на One Tap UX. Смотрите следующую таблицу для получения дополнительной информации:

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

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

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

data-allowed_parent_origin

Происхождение, которым разрешено внедрить промежуточный iframe. Один крап работает в промежуточном режиме iframe, если этот атрибут представляет. Смотрите следующую таблицу для получения дополнительной информации:

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

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

Типы значений
string Единственный домен URI. "https://example.com"
string array Список, разделенные запятыми доменом Uris. "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 и его субдоменам. Вы также можете использовать отдельный список запятой, чтобы представлять 2 разных домена. Например, "https://example1.com,https://*.example2.com" example1.com example2.com example2.com
  • Домены подстановочных знаков должны начинаться со безопасной схемы https: //, так что "*.example.com" считается недействительной.

data-intermediate_iframe_close_callback

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

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

Тип Необходимый Пример
функция Необязательный 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 поля из токена ID. Необязательный data-login_hint="elisa.beckett@gmail.com"

Data-HD

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

Для получения дополнительной информации см. Документацию OpenID Connect для hd .

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

data-use_fedcm_for_prompt

Позвольте браузеру управлять подсказками для входа пользователей и опосредовать поток входа между вашим веб-сайтом и Google. По умолчанию ложь. См. Перенесен на страницу FedCM для получения дополнительной информации.

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

data-enable_redirect_uri_validation

Включите поток кнопки перенаправления, который соответствует правилам проверки URI .

Тип Необходимый Пример
логический Необязательный data-enable_redirect_uri_validation="true"

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

Если вы добавите g_id_signin в атрибут class элемента, элемент отображается в качестве подписи с кнопкой Google.

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

Визуальные атрибуты данных

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

Атрибут
data-type Тип кнопки: значок или стандартная кнопка.
data-theme Тема кнопки. Например, заполненный
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
Кнопка значка без текста.

Data-Teme

Тема кнопки. Значение по умолчанию 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
Круглая стандартная кнопкаКнопка круглой значкиКруглая персонализированная кнопка
Кнопка в форме круга. If used for the standard button type, then it's the same as pill .
square
A square standard buttonA square icon buttonA square personalized button
The square-shaped button. If used for the standard button type, then it's the same as rectangular .

data-logo_alignment

The alignment of the Google logo. The default value is left . This attribute only applies to the standard button type. See the following table for further information:

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

The following table lists the available alignments and their descriptions:

logo_alignment
left
A standard button with the G logo on the left
Left-aligns the Google logo.
center
A standard button with the G logo in the center
Center-aligns the Google logo.

data-width

The minimum button width, in pixels. The maximum width available is 400 pixels.

See the following table for further information:

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

data-locale

Необязательный. Display button text using the specified locale, otherwise default to the users Google Account or browser settings. Add the hl parameter and language code to the src directive when loading the library, for example: gsi/client?hl=<iso-639-code> .

If it's not set, the browser's default locale or the Google session user's preference is used. Therefore, different users might see different versions of localized buttons, and possibly with different sizes.

See the following table for further information:

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

data-click_listener

You can define a JavaScript function to be called when the Sign in with Google button is clicked using the data-click_listener attribute.

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

In this example, the message Sign in with Google button clicked... is logged to the console when the Sign in with Google button is clicked.

data-state

Optional, as multiple Sign in with Google buttons can be rendered on the same page, you can assign each button with a unique string. The same string would return along with the ID token, so you can identify which button user clicked to sign in.

See the following table for further information:

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

Server-side integration

Your server-side endpoints must handle the following HTTP POST requests.

The ID token handler endpoint

The ID token handler endpoint processes the ID token. Based on the status of the corresponding account, you can sign the user in and either direct them to a sign-up page or direct them to an account-linking page for additional information.

The HTTP POST request contains the following information:

Формат Имя Описание
печенье g_csrf_token A random string that changes with each request to the handler endpoint.
Request parameter g_csrf_token A string that's the same as the previous cookie value, g_csrf_token .
Request parameter credential The ID token that Google issues.
Request parameter select_by How the credential is selected.
Request parameter state This parameter is only defined when user clicks a Sign in with Google button to sign in, and the button's state attribute is specified.

полномочия

When decoded , the ID token looks like the following example:

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"
}

The sub field is a globally unique identifier for the Google Account. Only use sub field as identifier for the user as it is unique among all Google Accounts and never reused. Don't use email address as an identifier because a Google Account can have multiple email addresses at different points in time.

Using the email , email_verified and hd fields you can determine if Google hosts and is authoritative for an email address. In cases where Google is authoritative the user is confirmed to be the legitimate account owner.

Cases where Google is authoritative:

  • email has a @gmail.com suffix, this is a Gmail account.
  • email_verified is true and hd is set, this is a Google Workspace account.

Users may register for Google Accounts without using Gmail or Google Workspace. When email does not contain a @gmail.com suffix and hd is absent Google is not authoritative and password or other challenge methods are recommended to verify the user. email_verified can also be true as Google initially verified the user when the Google Account was created, however ownership of the third party email account may have since changed.

The exp field shows the expiration time for you to verify the token on your server side . It is one hour for the ID token obtained from Sign In With Google. You need to verify the token before the expiration time. Don't use exp for session management. An expired ID token does not mean the user is signed out. Your app is responsible for session management of your users.

select_by

The following table lists the possible values for the select_by field. The type of button used along with the session and consent state are used to set the value,

  • The user pressed either the One Tap or Sign In With Google button or used the touchless Automatic sign-in process.

  • An existing session was found, or the user selected and signed-in to a Google Account to establish a new session.

  • Prior to sharing ID token credentials with your app the user either

    • pressed the Confirm button to grant their consent to share credentials, or
    • had previously granted consent and used Select an Account to choose a Google Account.

The value of this field is set to one of these types,

Ценить Описание
auto Automatic sign-in of a user with an existing session who had previously granted consent to share credentials. Applies only to non-FedCM supported browsers.
user A user with an existing session who had previously granted consent pressed the One Tap 'Continue as' button to share credentials. Applies only to non-FedCM supported browsers.
fedcm A user pressed the One Tap 'Continue as' button to share credentials using FedCM. Applies only to FedCM supported browsers.
fedcm_auto Automatic sign-in of a user with an existing session who had previously granted consent to share credentials using FedCM One Tap. Applies only to FedCM supported browsers.
user_1tap A user with an existing session pressed the One Tap 'Continue as' button to grant consent and share credentials. Applies only to Chrome v75 and higher.
user_2tap A user without an existing session pressed the One Tap 'Continue as' button to select an account and then pressed the Confirm button in a pop-up window to grant consent and share credentials. Applies to non-Chromium based browsers.
btn A user with an existing session who previously granted consent pressed the Sign In With Google button and selected a Google Account from 'Choose an Account' to share credentials.
btn_confirm A user with an existing session pressed the Sign In With Google button and pressed the Confirm button to grant consent and share credentials.
btn_add_session A user without an existing session who previously granted consent pressed the Sign In With Google button to select a Google Account and share credentials.
btn_confirm_add_session A user without an existing session first pressed the Sign In With Google button to select a Google Account and then pressed the Confirm button to consent and share credentials.

состояние

This parameter is only defined when user clicks a Sign in with Google button to sign in, and the clicked button's data-state attribute is specified. The value of this field is the same value you specified in the button's data-state attribute.

As multiple Sign in with Google buttons can be rendered on the same page, you can assign each button with a unique string. Hence, you can this state parameter to identify which button user clicked to sign in.

Password credential handler endpoint

The password credential handler endpoint processes password credentials that the native credential manager retrieves.

The HTTP POST request contains the following information:

Формат Имя Описание
печенье g_csrf_token A random string that changes with each request to the handler endpoint.
Request parameter g_csrf_token A string that's the same as the previous cookie value, g_csrf_token .
Request parameter email This ID token that Google issues.
Request parameter password How the credential is selected.