Справочник по входу с помощью 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

Если вам нужно отображать 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

Если вам нужно отображать 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 содержит следующую информацию: