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

Эта справочная страница описывает API JavaScript Sign-In. Вы можете использовать этот API для отображения подсказки One Tap или кнопки Sign In With 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 только один раз, даже если вы используете несколько модулей (например, One Tap, Personalized button, revocation и т. д.) на одной веб-странице.
• Если вы вызываете метод google.accounts.id.initialize несколько раз, запоминаются и используются только конфигурации последнего вызова.

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

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

Тип данных: IdConfiguration

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

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

клиент_id

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

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

авто_выбор

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

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

перезвонить

Это поле — функция JavaScript, которая обрабатывает токен ID, возвращаемый из подсказки One Tap или всплывающего окна. Этот атрибут требуется, если используется режим popup окна Google One Tap или Sign In With 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 со значением токена идентификатора в теле.

Примечание: С JavaScript API ответ Google One Tap и popup режима кнопки Sign In With Google может быть возвращен только в функцию callback JavaScript. Попробуйте HTML API, если ответ должен быть отправлен автоматически в login_uri .

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

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

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

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

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

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

prompt_parent_id

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

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

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

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

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

Длина nonce ограничена максимальным размером 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, используемого кнопкой Sign In With Google. Значение по умолчанию — popup . Этот атрибут не влияет на OneTap UX. Дополнительную информацию см. в следующей таблице:

Тип	Необходимый	Пример
нить	Необязательный	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 UI. Поведение по умолчанию — немедленное удаление промежуточного iframe из DOM.

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

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

itp_support

Это поле определяет, следует ли включать обновленный One Tap UX в браузерах, поддерживающих Intelligent Tracking Prevention (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. Для получения дополнительной информации см. страницу Migrate to FedCM .

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

использовать_fedcm_для_кнопки

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

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

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

Это поле определяет, следует ли включить опцию автоматического выбора для потока кнопок FedCM. Если эта опция включена, возвращающиеся пользователи с активным сеансом Google будут автоматически входить в систему, минуя запрос Account Chooser. Значение по умолчанию — 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 UI One Tap prompt может не отображаться. Чтобы получать уведомления о статусе UI в разные моменты, передайте функцию для получения уведомлений о статусе UI.

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

• Момент отображения: Это происходит после вызова метода 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

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

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

Метод
isDisplayMoment()	Это уведомление сделано для показа? Примечание: Когда FedCM включен , это уведомление не срабатывает. См. страницу Migrate to FedCM для получения дополнительной информации.
isDisplayed()	Это уведомление предназначено для отображения момента и отображается пользовательский интерфейс? Примечание: Когда FedCM включен , это уведомление не срабатывает. См. страницу Migrate to FedCM для получения дополнительной информации.
isNotDisplayed()	Это уведомление предназначено для отображения на экране, а пользовательский интерфейс не отображается? Примечание: Когда FedCM включен , это уведомление не срабатывает. См. страницу Migrate to 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 включен , этот метод не поддерживается. См. страницу Migrate to FedCM для получения дополнительной информации.
isSkippedMoment()	Это уведомление о пропущенном моменте?
getSkippedReason()	Подробная причина пропущенного момента. Возможны следующие значения: auto_cancel user_cancel tap_outside issuing_failed Примечание: Если FedCM включен , этот метод не поддерживается. См. страницу Migrate to FedCM для получения дополнительной информации.
isDismissedMoment()	Это уведомление на отложенный момент?
getDismissedReason()	Подробная причина увольнения. Возможны следующие значения: credential_returned cancel_called flow_restarted
getMomentType()	Возвращает строку для типа момента. Возможны следующие значения: display skipped dismissed

Тип данных: CredentialResponse

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

Поле
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, полученного с помощью Sign In With Google, это один час. Вам необходимо проверить токен до истечения срока действия. Не используйте exp для управления сеансом . Истекший срок действия токена ID не означает, что пользователь вышел из системы. Ваше приложение отвечает за управление сеансом ваших пользователей.

select_by

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

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

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

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

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

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

Ценить	Описание
auto	Автоматический вход пользователя с существующим сеансом, который ранее дал согласие на обмен учетными данными. Применимо только к браузерам, не поддерживаемым FedCM.
user	Пользователь с существующим сеансом, который ранее предоставил согласие, нажал кнопку One Tap 'Продолжить как', чтобы поделиться учетными данными. Применимо только к браузерам, не поддерживаемым FedCM.
fedcm	Пользователь нажал кнопку One Tap 'Продолжить как', чтобы поделиться учетными данными с помощью FedCM. Применимо только к поддерживаемым FedCM браузерам.
fedcm_auto	Автоматический вход пользователя с существующим сеансом, который ранее дал согласие на обмен учетными данными с помощью FedCM One Tap. Применимо только к поддерживаемым FedCM браузерам.
user_1tap	Пользователь с существующим сеансом нажал кнопку One Tap 'Продолжить как', чтобы предоставить согласие и поделиться учетными данными. Применимо только к Chrome v75 и выше.
user_2tap	Пользователь без существующего сеанса нажал кнопку One Tap 'Продолжить как', чтобы выбрать учетную запись, а затем нажал кнопку Подтвердить во всплывающем окне, чтобы предоставить согласие и поделиться учетными данными. Применимо к браузерам, не основанным на 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	Тема кнопки. Например, 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 можно определить функцию 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».

состояние

Необязательно, поскольку на одной странице может отображаться несколько кнопок Sign in with Google, вы можете назначить каждой кнопке уникальную строку. Та же строка будет возвращена вместе с токеном ID, так что вы сможете определить, какую кнопку нажал пользователь для входа.

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

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

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

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

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

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

Когда пользователь выходит из вашего сайта, вам нужно вызвать метод google.accounts.id.disableAutoSelect чтобы записать статус в куки. Это предотвращает мертвый цикл 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, используемый для совместного использования токена 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 завершился неудачей; в случае успеха оно не определено.