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

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

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

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

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

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

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

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

data-client_id

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

данные-auto_prompt

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

данные-auto_select

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

data-login_uri

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

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

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

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

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

Ваша конечная точка входа должна обрабатывать запросы 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 . Это зависит от следующих конфигураций компонентов и режима 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 . Дополнительную информацию смотрите в следующей таблице:

данные-native_callback

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

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

data-native_id_param

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

данные-native_password_param

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

данные-cancel_on_tap_outside

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

данные-prompt_parent_id

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

data-skip_prompt_cookie

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

данные-nonce

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

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

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

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

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

data-moment_callback

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

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

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

data-state_cookie_domain

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

данные-ux_mode

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

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

data-allowed_parent_origin

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

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

Если значение атрибута 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 удаляется до вызова обратного вызова.

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

data-itp_support

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

данные-login_hint

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

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

данные-HD

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

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

data-use_fedcm_for_prompt

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

data-enable_redirect_uri_validation

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

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

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

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

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

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

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

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

тип данных

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

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

Тип
standard
icon

тема данных

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

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

Тема
outline
filled_blue
filled_black

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

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

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

Размер
large
medium
small

текст данных

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

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

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

Текст
signin_with
signup_with
continue_with
signin

форма данных

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

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

Форма
rectangular
pill
circle
square

data-logo_alignment

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

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

logo_alignment
left
center

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

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

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

локаль данных

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

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

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

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», вы можете назначить каждой кнопке уникальную строку. Та же строка будет возвращена вместе с токеном идентификатора, поэтому вы можете определить, какую кнопку пользователь нажал для входа.

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

Серверная интеграция

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

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

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

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

полномочия

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

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.

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

состояние

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

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

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

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

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

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

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

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

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

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

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

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

data-client_id

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

данные-auto_prompt

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

данные-auto_select

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

data-login_uri

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

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

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

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

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

Ваша конечная точка входа должна обрабатывать запросы 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 . Это зависит от следующих конфигураций компонентов и режима 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 . Дополнительную информацию смотрите в следующей таблице:

данные-native_callback

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

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

data-native_id_param

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

данные-native_password_param

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

данные-cancel_on_tap_outside

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

данные-prompt_parent_id

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

data-skip_prompt_cookie

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

данные-nonce

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

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

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

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

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

data-moment_callback

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

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

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

data-state_cookie_domain

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

data-ux_mode

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

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

data-allowed_parent_origin

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

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

Если значение атрибута 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 удаляется до того, как обратный обратный вызов будет вызван.

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

data-itp_support

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

data-login_hint

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

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

Data-HD

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

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

data-use_fedcm_for_prompt

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

data-enable_redirect_uri_validation

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

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

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

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

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

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

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

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

тип данных

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

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

Тип
standard
icon

Data-Teme

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

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

Тема
outline
filled_blue
filled_black

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

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

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

Размер
large
medium
small

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

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

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

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

Текст
signin_with
signup_with
continue_with
signin

форма данных

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

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

Форма
rectangular
pill
circle
square

data-logo_alenment

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

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

Logo_Alencement
left
center

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

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

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

Data-Locale

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

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

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

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 можно отобрать на одной и той же странице, вы можете назначить каждую кнопку уникальной строкой. Та же самая строка вернется вместе с токеном идентификатора, поэтому вы можете определить, какая пользователь нажала кнопку, чтобы войти в систему.

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

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

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

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

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

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

полномочия

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

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.

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

состояние

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

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

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

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

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

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

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

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

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

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

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

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

data-client_id

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

DATA-AUTO_PROMPT

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

DATA-AUTO_SELECT

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

data-login_uri

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

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

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

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

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

Ваша конечная точка входа должна обрабатывать запросы 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 . Это зависит от следующих конфигураций компонента и режима 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-native_callback

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

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

data-native_id_param

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

data-native_password_param

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

data-cancel_on_tap_outside

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

DATA-PROMPT_PARENT_ID

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

data-skip_prompt_cookie

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

Данные

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

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

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

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

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

data-moment_callback

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

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

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

data-state_cookie_domain

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

data-ux_mode

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

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

data-allowed_parent_origin

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

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

Если значение атрибута 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 удаляется до того, как обратный обратный вызов будет вызван.

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

data-itp_support

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

data-login_hint

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

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

Data-HD

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

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

data-use_fedcm_for_prompt

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

data-enable_redirect_uri_validation

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

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

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

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

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

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

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

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

тип данных

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

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

Тип
standard
icon

Data-Teme

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

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

Тема
outline
filled_blue
filled_black

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

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

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

Размер
large
medium
small

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

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

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

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

Текст
signin_with
signup_with
continue_with
signin

форма данных

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

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

Форма
rectangular
pill
circle
square

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:

The following table lists the available alignments and their descriptions:

logo_alignment
left
center

data-width

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

See the following table for further information:

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

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:

полномочия

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,

состояние

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: