Войдите в Google JavaScript API -ссылка

На этой справочной странице описывается JavaScript API для входа через Google, используемый для отображения кнопки «Войти через 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, обрабатывающая токены идентификации. Google One Tap и всплывающее окно кнопки « popup через Google» используют этот атрибут в пользовательском интерфейсе.
login_uri	URL-адрес вашей конечной точки авторизации. В режиме redirect кнопки «Войти через Google» используется этот атрибут.
native_callback	Функция JavaScript, обрабатывающая учетные данные пароля.
cancel_on_tap_outside	Отменяет запрос, если пользователь щелкает мышью за пределами поля запроса.
prompt_parent_id	DOM-идентификатор элемента-контейнера для запроса «Одно касание»
nonce	Случайная строка для токенов идентификатора.
context	Заголовок и текст в подсказке One Tap
state_cookie_domain	Если вам необходимо вызвать One Tap в родительском домене и его поддоменах, передайте родительский домен в это поле, чтобы использовался один общий cookie-файл.
ux_mode	Последовательность действий пользователя при нажатии кнопки «Войти через Google»
allowed_parent_origin	Источники, которым разрешено встраивать промежуточный iframe. Если это поле присутствует, One Tap запускается в режиме промежуточного iframe.
intermediate_iframe_close_callback	Отменяет стандартное поведение промежуточного iframe, когда пользователи вручную закрывают One Tap.
itp_support	Обеспечивает улучшенный пользовательский интерфейс «Одно касание» в браузерах 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 .

client_id

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

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

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

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

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

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

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

авто_выбор

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

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

перезвонить

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

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

login_uri

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

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

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

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

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

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

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

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

нативный_коллбэк

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

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

cancel_on_tap_outside

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

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

prompt_parent_id

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

Тип	Необходимый	Пример
нить	Необязательный	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

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

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

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

Режим UX
popup	Выполняет процесс авторизации во всплывающем окне.
redirect	Обеспечивает автоматическую авторизацию путем перенаправления на всю страницу.

allowed_parent_origin

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

intermediate_iframe_close_callback

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

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

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

itp_support

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

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

подсказка для входа

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

Для получения более подробной информации см. поле 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

button_auto_select

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

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

• Момент отображения: это происходит после вызова метода 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()	Возвращает true если отображается подсказка "Одно касание". Примечание: Если FedCM включен, это уведомление не поддерживается. Дополнительную информацию см. на странице «Переход на FedCM» .
isDisplayed()	Возвращает true если тип момента — PromptMoment.DISPLAY и отображается запрос One Tap. Примечание: Если FedCM включен, это уведомление не поддерживается. Дополнительную информацию см. на странице «Переход на FedCM» .
isNotDisplayed()	Возвращает true если тип момента — PromptMoment.DISPLAY и подсказка «Одно касание» не отображается. Примечание: Если 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()	Возвращает true если тип момента — PromptMoment.SKIPPED Примечание: При включенной функции FedCM этот метод поддерживается частично. В частности, он не поддерживает причину пропуска user_cancel . Дополнительную информацию см. на странице «Переход на FedCM» .
getSkippedReason()	Подробное объяснение причины упущенной возможности. Возможные значения: auto_cancel user_cancel tap_outside issuing_failed Примечание: При включенной функции FedCM этот метод поддерживается частично. В частности, он не поддерживает причину пропуска user_cancel . Дополнительную информацию см. на странице «Переход на FedCM» .
isDismissedMoment()	Возвращает true если тип момента равен PromptMoment.DISMISSED . Примечание: При включении FedCM этот метод полностью поддерживается. Дополнительную информацию см. на странице «Миграция на FedCM» .
getDismissedReason()	Подробное обоснование увольнения. Возможные значения: credential_returned cancel_called flow_restarted Примечание: При включении FedCM этот метод полностью поддерживается. Дополнительную информацию см. на странице «Миграция на FedCM» .
getMomentType()	Возвращает строку, соответствующую типу момента времени. Возможные значения: display skipped dismissed

Тип данных: CredentialResponse

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

Поле
credential	Закодированный JWT-токен, выдаваемый компанией 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, чтобы создать новую сессию.

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

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

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

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

выравнивание логотипа

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

успешный

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

ошибка

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