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

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

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

Метод google.accounts.id.initialize инициализирует клиент «Войти через 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 создает экземпляр клиента «Войти через Google», который может неявно использоваться всеми модулями на одной веб-странице.

• Метод google.accounts.id.initialize нужно вызвать только один раз, даже если вы используете несколько модулей (например, One Tap, Personalized button, revocation и т. д.) на одной веб-странице.
• Если вы вызываете метод google.accounts.id.initialize несколько раз, запоминаются и используются только конфигурации последнего вызова.

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

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

Тип данных: IdConfiguration

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

Поле
client_id	Идентификатор клиента вашего приложения
color_scheme	Цветовая схема, применяемая к подсказке «Одно касание».
auto_select	Включает автоматический выбор.
callback	Функция JavaScript, обрабатывающая токены ID. Этот атрибут используется в режиме popup окна Google One Tap и кнопки «Войти через Google».
login_uri	URL-адрес вашей конечной точки входа. Этот атрибут используется в режиме redirect кнопки «Войти через Google».
native_callback	Функция JavaScript, обрабатывающая учетные данные пароля.
cancel_on_tap_outside	Отменяет подсказку, если пользователь щелкает за пределами подсказки.
prompt_parent_id	DOM-идентификатор элемента-контейнера подсказки One Tap
nonce	Случайная строка для идентификационных токенов
context	Заголовок и слова в подсказке «Одно касание»
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.
use_fedcm_for_button	Это поле определяет, следует ли использовать пользовательский интерфейс кнопки FedCM в Chrome (для настольных компьютеров M125+ и Android M128+). Значение по умолчанию — false .
button_auto_select	Включить ли параметр автоматического выбора для потока кнопок FedCM? Если этот параметр включен, пользователи, возвращающиеся с активным сеансом Google, будут автоматически входить в систему, минуя запрос выбора учётной записи. Значение по умолчанию — false .

клиент_идентификатор

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

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

цветовая_схема

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

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

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

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

авто_выбор

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

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

перезвонить

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

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

login_uri

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

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

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

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

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

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

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

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

native_callback

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

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

отмена_при_кран_снаружи

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

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

prompt_parent_id

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

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

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

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

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

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

контекст

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

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

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

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

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

state_cookie_domain

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

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

ux_mode

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

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

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

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

разрешенный_родительский_источник

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

login_hint

Если ваше приложение заранее знает, какой пользователь должен войти в систему, оно может предоставить 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. Значение по умолчанию — false. Подробнее см. на странице «Миграция в FedCM» .

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

use_fedcm_for_button

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

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

кнопка_авто_выбор

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

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

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

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

• Пропущенный момент: это происходит, когда запрос «Одно касание» закрыт автоматической отменой, ручной отменой или когда Google не выдает учетные данные, например, когда выбранный сеанс вышел из Google.

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

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

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

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

<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

В следующей таблице перечислены методы и описания типа данных 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:

Поле
credential	Закодированный токен JWT ID, выдаваемый Google.
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 может иметь несколько адресов электронной почты в разное время. Всегда используйте sub поле в качестве идентификатора пользователя.

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

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

select_by

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

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

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

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

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

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

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

click_listener

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

  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-библиотеки «Войти через 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, использованное для передачи токена ID указанному пользователю. См. следующий фрагмент кода метода: 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.

Тип данных: RevocationResponse

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

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

успешный

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

ошибка

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