Справочник по Войти с помощью Google JavaScript API

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

Метод: google.accounts.id.initialize

Метод google.accounts.id.initialize инициализирует клиент Sign In With Google на основе объекта конфигурации. См. следующий пример кода метода:

google.accounts.id.initialize(IdConfiguration)

В следующем примере кода реализуется метод google.accounts.id.initialize с функцией onload :

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  };
</script>

Метод google.accounts.id.initialize создает экземпляр клиента Sign In With Google, который может неявно использоваться всеми модулями на одной веб-странице.

• Вам нужно вызвать метод google.accounts.id.initialize только один раз, даже если вы используете несколько модулей (например, «Одно нажатие», «Персонализированная кнопка», «Отзыв» и т. д.) на одной веб-странице.
• Если вы вызываете метод google.accounts.id.initialize несколько раз, запоминаются и используются только конфигурации последнего вызова.

Фактически вы сбрасываете конфигурации каждый раз, когда вызываете метод google.accounts.id.initialize , и все последующие методы на той же веб-странице немедленно используют новые конфигурации.

Предупреждение. Метод google.accounts.id.initialize следует вызывать только один раз, даже если вы используете и One Tap, и кнопку на одной и той же веб-странице.

Тип данных: ИдКонфигурация

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

Поле
client_id	Идентификатор клиента вашего приложения
auto_select	Включает автоматический выбор.
callback	Функция JavaScript, обрабатывающая токены идентификатора. Этот атрибут используется в Google One Tap и popup окне кнопки «Войти с Google».
login_uri	URL-адрес конечной точки входа. Этот атрибут используется в режиме redirect кнопки «Войти через Google».
native_callback	Функция JavaScript, которая обрабатывает учетные данные пароля.
cancel_on_tap_outside	Отменяет приглашение, если пользователь щелкает за пределами приглашения.
prompt_parent_id	Идентификатор DOM элемента контейнера приглашения One Tap.
nonce	Случайная строка для токенов ID
context	Заголовок и слова в подсказке One Tap
state_cookie_domain	Если вам нужно вызвать One Tap в родительском домене и его поддоменах, укажите родительский домен в этом поле, чтобы использовался один общий файл cookie.
ux_mode	UX-процесс кнопки «Войти через Google»
allowed_parent_origin	Источники, которым разрешено встраивать промежуточный iframe. One Tap запускается в промежуточном режиме iframe, если это поле присутствует.
intermediate_iframe_close_callback	Переопределяет промежуточное поведение iframe по умолчанию, когда пользователи вручную закрывают One Tap.
itp_support	Включает обновленный интерфейс One Tap UX в браузерах ITP.
login_hint	Пропустите выбор учетной записи, предоставив пользователю подсказку.
hd	Ограничьте выбор учетной записи по домену.
use_fedcm_for_prompt	Разрешите браузеру контролировать запросы пользователей на вход в систему и выступать посредником в процессе входа между вашим веб-сайтом и Google.
enable_redirect_uri_validation	Включите поток перенаправления кнопок, соответствующий правилам проверки URI перенаправления .

client_id

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

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

auto_select

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

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

перезвонить

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

Тип	Необходимый	Пример
функция	Требуется для One Tap и popup режима UX.	callback: handleResponse

логин_ури

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

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

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

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

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

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

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

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

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

credential=ID_TOKEN

Примечание. При использовании JavaScript API ответ Google One Tap и popup пользовательского режима кнопки «Войти через Google» можно вернуть только в функцию callback JavaScript. Попробуйте HTML API , если ответ должен быть отправлен автоматически в login_uri .

Native_callback

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

Тип	Необходимый	Пример
функция	Необязательный	native_callback: handleResponse

cancel_on_tap_outside

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

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

Prompt_parent_id

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

Тип	Необходимый	Пример
нить	Необязательный	prompt_parent_id: 'parent_id'

одноразовый номер

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

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

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

контекст

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

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

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

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

state_cookie_domain

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

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

ux_mode

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

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

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

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

разрешенное_родительское_происхождение

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

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

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

Типы значений
string	URI одного домена.	"https://example.com"
string array	Массив URI домена.	["https://news.example.com", "https://local.example.com"]

Префиксы подстановочных знаков также поддерживаются. Например, "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" считается недействительным.

Примечание. В отличие от HTML API, строка с URI, разделенными запятыми, недопустима для поля allowed_parent_origin . Вместо этого используйте объект JavaScript Array.

Если значение поля allowed_parent_origin недопустимо, инициализация One Tap промежуточного режима iframe завершится неудачей и остановится.

промежуточный_iframe_close_callback

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

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

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

itp_support

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

Тип	Необходимый	Пример
логическое значение	Необязательный	itp_support: true

логин_подсказка

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

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

Тип	Необходимый	Пример
Строка, адрес электронной почты или значение из sub токена идентификатора.	Необязательный	login_hint: '[e-mail]'

HD

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

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

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

use_fedcm_for_prompt

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

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

Enable_redirect_uri_validation

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

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

Метод: google.accounts.id.prompt

Метод google.accounts.id.prompt отображает приглашение One Tap или встроенный диспетчер учетных данных браузера после вызова метода initialize() . См. следующий пример кода метода:

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

Обычно метод prompt() вызывается при загрузке страницы. Из-за статуса сеанса и пользовательских настроек на стороне Google пользовательский интерфейс подсказки One Tap может не отображаться. Чтобы получать уведомления о статусе пользовательского интерфейса в разные моменты, передайте функцию для получения уведомлений о статусе пользовательского интерфейса.

Уведомления отправляются в следующие моменты:

• Момент отображения: это происходит после вызова метода prompt() . Уведомление содержит логическое значение, указывающее, отображается ли пользовательский интерфейс или нет.

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

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

• Момент отклонения: это происходит, когда Google успешно получает учетные данные или пользователь хочет остановить процесс получения учетных данных. Например, когда пользователь начинает вводить свое имя пользователя и пароль в диалоговом окне входа в систему, вы можете вызвать метод google.accounts.id.cancel() , чтобы закрыть приглашение One Tap и вызвать момент отклонения.

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

Следующий пример кода реализует пропущенный момент:

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

Примечание. Чтобы улучшить конфиденциальность пользователей, уведомления о моменте отображения намеренно задерживаются, когда включен FedCM. Уведомления могут быть получены в течение 1 минуты после фактического события.

Примечание. Для встроенного диспетчера учетных данных нет уведомлений об отображенных, пропущенных или закрытых моментах, поскольку они происходят за пределами библиотеки ГИС.

Тип данных: ПромптМоментнотификатион

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

Внимание: изменения FedCM влияют на isDisplayMoment() , isDisplayed() , isNotDisplayed() , getNotDisplayedReason() и getSkippedReason() . Дополнительную информацию см. на странице «Миграция на FedCM» .

Метод
isDisplayMoment()	Это уведомление для отображения момента? Примечание. Если FedCM включен , это уведомление не запускается. Дополнительную информацию см. на странице «Миграция на FedCM» .
isDisplayed()	Это уведомление на момент отображения и отображается пользовательский интерфейс? Примечание. Если FedCM включен , это уведомление не запускается. Дополнительную информацию см. на странице «Миграция на FedCM» .
isNotDisplayed()	Это уведомление отображается только в момент отображения, а пользовательский интерфейс не отображается? Примечание. Если FedCM включен , это уведомление не запускается. Дополнительную информацию см. на странице «Миграция на FedCM» .
getNotDisplayedReason()	Подробная причина, по которой пользовательский интерфейс не отображается. Возможны следующие значения: browser_not_supported invalid_client missing_client_id opt_out_or_no_session secure_http_required suppressed_by_user unregistered_origin unknown_reason Примечание. Если включен FedCM, этот метод не поддерживается. Дополнительную информацию см. на странице «Миграция на FedCM» .
isSkippedMoment()	Это уведомление о пропущенном моменте?
getSkippedReason()	Подробная причина пропущенного момента. Возможны следующие значения: auto_cancel user_cancel tap_outside issuing_failed Примечание. Если включен FedCM, этот метод не поддерживается. Дополнительную информацию см. на странице «Миграция на FedCM» .
isDismissedMoment()	Это уведомление об отклоненном моменте?
getDismissedReason()	Подробная причина увольнения. Возможны следующие значения: credential_returned cancel_called flow_restarted
getMomentType()	Возвращает строку для типа момента. Возможны следующие значения: display skipped dismissed

Тип данных: CredentialResponse

При вызове функции callback в качестве параметра передается объект CredentialResponse . В следующей таблице перечислены поля, содержащиеся в объекте ответа на учетные данные:

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

полномочия

Это поле представляет собой идентификатор токена в виде строки JSON Web Token (JWT) в кодировке Base64.

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

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": "[e-mail]", // 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": "Elisa",
  "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_verfied также может иметь значение true, поскольку Google изначально подтвердил пользователя при создании учетной записи Google, однако с тех пор право собственности на стороннюю учетную запись электронной почты могло измениться.

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

select_by

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

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

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

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

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

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

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

состояние

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

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

Метод: google.accounts.id.renderButton

Метод google.accounts.id.renderButton отображает кнопку «Войти через Google» на ваших веб-страницах.

См. следующий пример кода метода:

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

Тип данных: GsiButtonConfiguration

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

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

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

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

тип

Тип кнопки. Значение по умолчанию — standard .

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

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

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

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

тема

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

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

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

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

размер

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

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

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

Размер
large	Большая кнопка.
medium	Кнопка среднего размера.
small	Маленькая кнопка.

текст

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

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

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

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

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

форма

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

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

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

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

logo_alignment

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

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

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

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

ширина

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

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

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

локаль

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

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

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

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

клик_прослушиватель

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

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }
  

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

состояние

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

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

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

Тип данных: Учетные данные

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

Поле
id	Идентифицирует пользователя.
password	Пароль

Метод: google.accounts.id.disableAutoSelect.

Когда пользователь выходит из вашего веб-сайта, вам необходимо вызвать метод google.accounts.id.disableAutoSelect чтобы записать статус в файлы cookie. Это предотвращает мертвую петлю UX. См. следующий фрагмент кода метода:

google.accounts.id.disableAutoSelect()

В следующем примере кода реализуется метод google.accounts.id.disableAutoSelect с функцией onSignout() :

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

Метод: google.accounts.id.storeCredential.

Этот метод является оболочкой для метода store() собственного API менеджера учетных данных браузера. Поэтому его можно использовать только для хранения учетных данных пароля. См. следующий пример кода метода:

google.accounts.id.storeCredential(Credential, callback)

В следующем примере кода реализуется метод google.accounts.id.storeCredential с функцией onSignIn() :

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

Метод: google.accounts.id.cancel

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

google.accounts.id.cancel()

В следующем примере кода реализуется метод google.accounts.id.cancel() с функцией onNextButtonClicked() :

<script>
  function onNextButtonClicked() {
    google.accounts.id.cancel();
    showPasswordPage();
  }
</script>

Обратный вызов загрузки библиотеки: onGoogleLibraryLoad

Вы можете зарегистрировать обратный вызов onGoogleLibraryLoad . Он уведомляется после загрузки библиотеки JavaScript Sign In With Google:

window.onGoogleLibraryLoad = () => {
    ...
};

Этот обратный вызов является просто ярлыком для обратного вызова window.onload . Разницы в поведении нет.

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

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

Метод: google.accounts.id.revoke

Метод google.accounts.id.revoke отменяет разрешение OAuth, использованное для предоставления токена идентификатора указанному пользователю. См. следующий фрагмент кода метода: javascript google.accounts.id.revoke(login_hint, callback)

Параметр	Тип	Описание
login_hint	нить	Адрес электронной почты или уникальный идентификатор учетной записи Google пользователя. Идентификатор — это sub полезных данных учетных данных .
callback	функция	Необязательный обработчик RevocationResponse .

В следующем примере кода показано, как использовать метод revoke с идентификатором.

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

Ключевой момент: вызов этого метода отменяет все области OAuth 2.0, ранее предоставленные клиентской библиотекой Sign In With Google.

Тип данных: отзывответ

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

Поле
successful	Это поле является возвращаемым значением вызова метода.
error	Это поле дополнительно содержит подробное ответное сообщение об ошибке.

успешный

Это поле представляет собой логическое значение, для которого установлено значение true, если вызов метода отзыва завершился успешно, или значение false в случае сбоя.

ошибка

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