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

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

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

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

google.accounts.id.initialize(IdConfiguration)

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

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

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

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

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

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

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

client_id

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

auto_select

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

перезвонить

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

логин_ури

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

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

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

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

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

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

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

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

credential=ID_TOKEN

Native_callback

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

cancel_on_tap_outside

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

Prompt_parent_id

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

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

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

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

контекст

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

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

state_cookie_domain

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

ux_mode

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

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

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

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

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

Префиксы подстановочных знаков также поддерживаются. Например, "https://*.example.com" соответствует example.com и его поддоменам на всех уровнях (например, news.example.com , login.news.example.com ). Что следует учитывать при использовании подстановочных знаков:

• Строки шаблонов не могут состоять только из подстановочных знаков и домена верхнего уровня. Например https:// .com и https:// .co.uk недействительны; Как отмечалось выше, "https:// .example.com" соответствует example.com и его поддоменам. Вы также можете использовать массив для представления двух разных доменов. Например, ["https://example1.com", "https:// .example2.com"] соответствует доменам example1.com , example2.com и субдоменам example2.com
• Домены с подстановочными знаками должны начинаться с безопасной схемы https://, поэтому "*.example.com" считается недействительным.

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

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

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

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

itp_support

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

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

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

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

HD

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

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

use_fedcm_for_prompt

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

use_fedcm_for_button

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

button_auto_select

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тип данных: CredentialResponse

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

полномочия

Это поле представляет собой идентификатор токена в виде строки 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": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "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 и никогда не используется повторно.

Используя поля email , email_verified и hd вы можете определить, является ли Google хостингом и является ли он авторитетным для адреса электронной почты. В тех случаях, когда Google является авторитетным, подтверждается, что пользователь является законным владельцем учетной записи.

Случаи, когда Google авторитетен:

• email имеет суффикс @gmail.com , это учетная запись Gmail.
• email_verified имеет значение true и установлен hd , это учетная запись Google Workspace.

Пользователи могут регистрировать учетные записи Google без использования Gmail или Google Workspace. Если email не содержит суффикса @gmail.com и отсутствует hd , Google не является авторитетным, и для проверки пользователя рекомендуется использовать пароль или другие методы запроса. email_verfied также может иметь значение true, поскольку Google изначально подтвердил пользователя при создании учетной записи Google, однако с тех пор право собственности на стороннюю учетную запись электронной почты могло измениться.

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

select_by

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

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

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

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

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

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

состояние

Это поле определяется только тогда, когда пользователь нажимает кнопку «Войти через 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 :

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

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

тип

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

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

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

Тип
standard
icon

тема

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

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

Тема
outline
filled_blue
filled_black

размер

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

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

Размер
large
medium
small

текст

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

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

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

Текст
signin_with
signup_with
continue_with
signin

форма

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

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

Форма
rectangular
pill
circle
square

logo_alignment

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

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

logo_alignment
left
center

ширина

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

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

локаль

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

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

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

клик_слушатель

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

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

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

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

состояние

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

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

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

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

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

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

google.accounts.id.disableAutoSelect()

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

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

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

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

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

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

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

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

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

google.accounts.id.cancel()

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

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

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

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

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

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

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

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

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

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

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

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

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

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

успешный

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

ошибка

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

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

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

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

google.accounts.id.initialize(IdConfiguration)

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

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

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

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

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

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

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

client_id

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

auto_select

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

перезвонить

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

логин_ури

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

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

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

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

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

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

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

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

credential=ID_TOKEN

Native_callback

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

cancel_on_tap_outside

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

rasfor_parent_id

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

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

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

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

контекст

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

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

state_cookie_domain

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

ux_mode

Используйте это поле, чтобы установить поток UX, используемый в системе, с помощью кнопки Google. Значение по умолчанию - popup . Этот атрибут не влияет на Onetap UX. Смотрите следующую таблицу для получения дополнительной информации:

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

ALLED_PARENT_ORIGIN

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

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

Префиксы подстановочного знака также поддерживаются. Например, "https://*.example.com" соответствует example.com и его субдоменам на всех уровнях (например, news.example.com , login.news.example.com ). Что нужно иметь в виду при использовании подстановочных знаков:

• Строки шаблона не могут быть составлены только из сведения и домена верхнего уровня. Например https:// .com и https:// .co.uk являются недействительными; Как отмечалось выше, "https:// .example.com" соответствует example.com и его субдоменам. Вы также можете использовать массив для представления 2 разных доменов. Например, ["https://example1.com", "https:// .example2.com"] example2.com example2.com example1.com
• Домены подстановочных знаков должны начинаться со безопасной схемы https: //, и поэтому "*.example.com" считается недействительной.

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

Intermediate_iframe_close_callback

Переопределяет промежуточное поведение iframe по умолчанию, когда пользователи вручную закрывают один нажатие, нажав на кнопку «x» в одном Tap UI. Поведение по умолчанию состоит в том, чтобы немедленно удалить промежуточную iframe из DOM.

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

itp_support

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

Login_hint

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

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

HD

Когда пользователь имеет несколько учетных записей и должен входить только в свою учетную запись рабочей области, используйте это, чтобы предоставить доменное имя для Google. При успешном учетных записях пользователей, отображаемых во время выбора учетной записи, ограничены предоставленным доменом. Значение подстановочного знака: * предлагает только учетные записи рабочей области для пользователя и исключает учетные записи потребителей (user@gmail.com) во время выбора учетной записи.

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

use_fedcm_for_prompt

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

use_fedcm_for_button

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

button_auto_select

Это поле определяет, включить ли опция Auto Select для потока кнопки FedCM. В случае включения, возвращение пользователей с активным сеансом Google будет автоматически подписано, обойдя подсказку об выборе учетной записи. По умолчанию false . Вам необходимо явно включить кнопку автокног-ин-ин-ин-ин-в запуск. Смотрите следующую таблицу для получения дополнительной информации:

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

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

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

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

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

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

Тип данных: rescimmentnotification

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

Тип данных: учетный ответ

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

полномочия

Это поле является токеном идентификатора как строка BASE64-кодированного JSON Web Token (JWT).

При декодировании 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": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "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 Field в качестве идентификатора для пользователя, поскольку он уникален среди всех учетных записей Google и никогда не используется повторно.

Используя поля email , email_verified и hd вы можете определить, является ли Google, и является авторитетным для адреса электронной почты. В тех случаях, когда Google является авторитетным, пользователь подтверждается как законным владельцем учетной записи.

Случаи, когда Google является авторитетным:

• email имеет суффикс @gmail.com , это учетная запись Gmail.
• email_verified - это правда, и hd установлен, это учетная запись Google Workspace.

Пользователи могут зарегистрироваться на учетные записи Google без использования Gmail или Google Workspace. Когда email не содержит суффикс @gmail.com , а hd отсутствует, Google не является авторитетным, и для проверки пользователя рекомендуются другие методы вызова. email_verfied также может быть правдой, так как Google изначально проверил пользователя при создании учетной записи Google, однако владение сторонней учетной записью электронной почты могло измениться с тех пор.

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

select_by

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

• Пользователь нажал либо один нажатие, либо входите в систему с помощью кнопки Google, либо использовал процесс автоматического входа в Touchless.

• Был найден существующий сеанс, или пользователь выбрал и подписан в учетную запись 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
    )

Тип данных: GSIBTONCONFIGUTURE

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

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

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

тип

Тип кнопки. Значение по умолчанию является standard .

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

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

Тип
standard
icon

тема

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

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

Тема
outline
filled_blue
filled_black

размер

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

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

Размер
large
medium
small

текст

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

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

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

Текст
signin_with
signup_with
continue_with
signin

форма

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

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

Форма
rectangular
pill
circle
square

Logo_Alencement

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

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

Logo_Alencement
left
center

ширина

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

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

локаль

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

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

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

click_listener

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

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

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

В этом примере сообщение «Войти» с кнопкой Google, нажатой ... зарегистрировано в консоли, когда нажата кнопка Google в Google.

состояние

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

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

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

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

Метод: 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

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

google.accounts.id.cancel()

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

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

Библиотека загрузка обратного вызова: ongooglelibraryload

Вы можете зарегистрировать обратный вызов onGoogleLibraryLoad . Это уведомлено после того, как вход в библиотеку Google JavaScript загружен:

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

Этот обратный вызов - всего лишь ярлык для window.onload обратный вызов. Нет различий в поведении.

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

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

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

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

Следующий образец кода показывает, как использовать метод revoke с идентификатором.

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

Тип данных: RevocationResponse

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

успешный

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

ошибка

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

Эта справочная страница описывает 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 один раз, даже если вы используете несколько модулей (например, один нажатие, персонализированная кнопка, отзыв и т. Д.) На одной и той же веб -странице.
• Если вы действительно вызываете метод google.accounts.id.initialize несколько раз, запоминаются и используются только конфигурации в последнем вызове.

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

Тип данных: idconfiguration

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

client_id

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

auto_select

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

перезвонить

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

Login_uri

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

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

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

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

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

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

Ниже приведен пример -запрос на конечную точку входа в систему:

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

credential=ID_TOKEN

Native_callback

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

cancel_on_tap_outside

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

rasfor_parent_id

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

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

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

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

контекст

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

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

state_cookie_domain

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

ux_mode

Используйте это поле, чтобы установить поток UX, используемый в системе, с помощью кнопки Google. Значение по умолчанию - popup . Этот атрибут не влияет на Onetap UX. Смотрите следующую таблицу для получения дополнительной информации:

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

ALLED_PARENT_ORIGIN

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

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

Префиксы подстановочного знака также поддерживаются. Например, "https://*.example.com" соответствует example.com и его субдоменам на всех уровнях (например, news.example.com , login.news.example.com ). Что нужно иметь в виду при использовании подстановочных знаков:

• Строки шаблона не могут быть составлены только из сведения и домена верхнего уровня. Например https:// .com и https:// .co.uk являются недействительными; Как отмечалось выше, "https:// .example.com" соответствует example.com и его субдоменам. Вы также можете использовать массив для представления 2 разных доменов. Например, ["https://example1.com", "https:// .example2.com"] example2.com example2.com example1.com
• Домены подстановочных знаков должны начинаться со безопасной схемы https: //, и поэтому "*.example.com" считается недействительной.

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

Intermediate_iframe_close_callback

Переопределяет промежуточное поведение iframe по умолчанию, когда пользователи вручную закрывают один нажатие, нажав на кнопку «x» в одном Tap UI. Поведение по умолчанию состоит в том, чтобы немедленно удалить промежуточную iframe из DOM.

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

itp_support

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

Login_hint

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

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

HD

Когда пользователь имеет несколько учетных записей и должен входить только в свою учетную запись рабочей области, используйте это, чтобы предоставить доменное имя для Google. При успешном учетных записях пользователей, отображаемых во время выбора учетной записи, ограничены предоставленным доменом. Значение подстановочного знака: * предлагает только учетные записи рабочей области для пользователя и исключает учетные записи потребителей (user@gmail.com) во время выбора учетной записи.

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

use_fedcm_for_prompt

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

use_fedcm_for_button

This field determines if FedCM button UX should be used on Chrome (desktop M125+ and Android M128+). Defaults to false . See the following table for further information:

button_auto_select

This field determines whether to enable the auto select option for the FedCM button flow. If enabled, returning users with an active Google session will be automatically signed in, bypassing the Account Chooser prompt. Defaults to false . You need to explicitly enable button auto-sign-in during the opt-in launch. See the following table for further information:

Method: google.accounts.id.prompt

The google.accounts.id.prompt method displays the One Tap prompt or the browser native credential manager after the initialize() method is invoked. See the following code example of the method:

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

Normally, the prompt() method is called on page load. Due to the session status and user settings on the Google side, the One Tap prompt UI might not be displayed. To get notified on the UI status for different moments, pass a function to receive UI status notifications.

Notifications are fired on the following moments:

• Display moment: This occurs after the prompt() method is called. The notification contains a boolean value to indicate whether the UI is displayed or not.

• Skipped moment: This occurs when the One Tap prompt is closed by an auto cancel, a manual cancel, or when Google fails to issue a credential, such as when the selected session has signed out of Google.

  In these cases, we recommend that you continue on to the next identity providers, if there are any.

• Dismissed moment: This occurs when Google successfully retrieves a credential or a user wants to stop the credential retrieval flow. For example, when the user begins to input their username and password in your login dialog, you can call the google.accounts.id.cancel() method to close the One Tap prompt and trigger a dismissed moment.

The following code example implements the skipped moment:

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

Data type: PromptMomentNotification

The following table lists methods and descriptions of the PromptMomentNotification data type:

Data type: CredentialResponse

When your callback function is invoked, a CredentialResponse object is passed as the parameter. The following table lists the fields that are contained in the credential response object:

полномочия

This field is the ID token as a base64-encoded JSON Web Token (JWT) string.

When decoded , the JWT looks like the following example:

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "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"
}

The sub field is a globally unique identifier for the Google Account. Only use sub field as identifier for the user as it is unique among all Google Accounts and never reused.

Using the email , email_verified and hd fields you can determine if Google hosts and is authoritative for an email address. In cases where Google is authoritative the user is confirmed to be the legitimate account owner.

Cases where Google is authoritative:

• email has a @gmail.com suffix, this is a Gmail Account.
• email_verified is true and hd is set, this is a Google Workspace account.

Users may register for Google Accounts without using Gmail or Google Workspace. When email does not contain a @gmail.com suffix and hd is absent Google is not authoritative and password or other challenge methods are recommended to verify the user. email_verfied can also be true as Google initially verified the user when the Google Account was created, however ownership of the third party email account may have since changed.

The exp field shows the expiration time for you to verify the token on your server side . It is one hour for the ID token obtained from Sign In With Google. You need to verify the token before the expiration time. Don't use exp for session management . An expired ID token does not mean the user is signed out. Your app is responsible for session management of your users.

select_by

The following table lists the possible values for the select_by field. The type of button used along with the session and consent state are used to set the value,

• The user pressed either the One Tap or Sign In With Google button or used the touchless Automatic sign-in process.

• An existing session was found, or the user selected and signed-in to a Google Account to establish a new session.

• Prior to sharing ID token credentials with your app the user either

  • pressed the Confirm button to grant their consent to share credentials, or
  • had previously granted consent and used Select an Account to choose a Google Account.

The value of this field is set to one of these types,

состояние

This field is only defined when user clicks a Sign in with Google button to sign in, and the clicked button's state attribute is specified. The value of this field is the same value you specified in the button's state attribute.

As multiple Sign in with Google buttons can be rendered on the same page, you can assign each button with a unique string. Hence, you can this state field to identify which button user clicked to sign in.

Method: google.accounts.id.renderButton

The google.accounts.id.renderButton method renders a Sign In With Google button in your web pages.

See the following code example of the method:

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

Data type: GsiButtonConfiguration

The following table lists the fields and descriptions of the GsiButtonConfiguration data type:

Attribute types

The following sections contain details about each attribute's type, and an example.

тип

The button type. The default value is standard .

See the following table for further information:

The following table lists the available button types and their descriptions:

Тип
standard
icon

тема

The button theme. The default value is outline . See the following table for further information:

The following table lists the available themes and their descriptions:

Тема
outline
filled_blue
filled_black

размер

The button size. The default value is large . See the following table for further information:

The following table lists the available button sizes and their descriptions:

Размер
large
medium
small

текст

The button text. The default value is signin_with . There are no visual differences for the text of icon buttons that have different text attributes. The only exception is when the text is read for screen accessibility.

See the following table for further information:

The following table lists all the available button texts and their descriptions:

Текст
signin_with
signup_with
continue_with
signin

форма

The button shape. The default value is rectangular . See the following table for further information:

The following table lists the available button shapes and their descriptions:

Форма
rectangular
pill
circle
square

logo_alignment

The alignment of the Google logo. The default value is left . This attribute only applies to the standard button type. See the following table for further information:

The following table lists the available alignments and their descriptions:

logo_alignment
left
center

ширина

The minimum button width, in pixels. The maximum width is 400 pixels.

See the following table for further information:

locale

Необязательный. Display button text using the specified locale, otherwise default to the users Google Account or browser settings. Add the hl parameter and language code to the src directive when loading the library, for example: gsi/client?hl=<iso-639-code> .

If it's not set, the browser's default locale or the Google session user's preference is used. Therefore, different users might see different versions of localized buttons, and possibly with different sizes.

See the following table for further information:

click_listener

You can define a JavaScript function to be called when the Sign in with Google button is clicked using the click_listener attribute.

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

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

In this example, the message Sign in with Google button clicked... is logged to the console when the Sign in with Google button is clicked.

состояние

Optional, as multiple Sign in with Google buttons can be rendered on the same page, you can assign each button with a unique string. The same string would return along with the ID token, so you can identify which button user clicked to sign in.

See the following table for further information:

Data type: Credential

When your native_callback function is invoked, a Credential object is passed as the parameter. The following table lists the fields contained in the object:

Method: google.accounts.id.disableAutoSelect

When the user signs out of your website, you need to call the method google.accounts.id.disableAutoSelect to record the status in cookies. This prevents a UX dead loop. See the following code snippet of the method:

google.accounts.id.disableAutoSelect()

The following code example implements the google.accounts.id.disableAutoSelect method with an onSignout() function:

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

Method: google.accounts.id.storeCredential

This method is a wrapper for the store() method of the browser's native credential manager API. Therefore, it can only be used to store a password credential. See the following code example of the method:

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

The following code example implements the google.accounts.id.storeCredential method with an onSignIn() function:

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

Method: google.accounts.id.cancel

You can cancel the One Tap flow if you remove the prompt from the relying party DOM. The cancel operation is ignored if a credential is already selected. See the following code example of the method:

google.accounts.id.cancel()

The following code example implements the google.accounts.id.cancel() method with an onNextButtonClicked() function:

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

Library load callback: onGoogleLibraryLoad

You can register an onGoogleLibraryLoad callback. It's notified after the Sign In With Google JavaScript library is loaded:

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

This callback is just a shortcut for the window.onload callback. There are no differences in behavior.

The following code example implements an onGoogleLibraryLoad callback:

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

Method: google.accounts.id.revoke

The google.accounts.id.revoke method revokes the OAuth grant used to share the ID token for the specified user. See the following code snippet of the method: javascript google.accounts.id.revoke(login_hint, callback)

The following code sample shows how use the revoke method with an ID.

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

Data type: RevocationResponse

When your callback function is invoked, a RevocationResponse object is passed as the parameter. The following table lists the fields that are contained in the revocation response object:

успешный

This field is a boolean value set to true if the revoke method call succeeded or false on failure.

ошибка

This field is a string value and contains a detailed error message if the revoke method call failed, it is undefined on success.

This reference page describes the Sign-In JavaScript API. You can use this API to display the One Tap prompt or Sign In With Google button on your web pages.

Method: google.accounts.id.initialize

The google.accounts.id.initialize method initializes the Sign In With Google client based on the configuration object. See the following code example of the method:

google.accounts.id.initialize(IdConfiguration)

The following code example implements the google.accounts.id.initialize method with an onload function:

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

The google.accounts.id.initialize method creates a Sign In With Google client instance that can be implicitly used by all modules in the same web page.

• You only need to call the google.accounts.id.initialize method once even if you use multiple modules (like One Tap, Personalized button, revocation, etc.) in the same web page.
• If you do call the google.accounts.id.initialize method multiple times, only the configurations in the last call is remembered and used.

You actually reset the configurations whenever you call the google.accounts.id.initialize method, and all subsequent methods in the same web page immediately use the new configurations.

Data type: IdConfiguration

The following table lists the fields and descriptions of the IdConfiguration data type:

client_id

This field is your application's client ID, which is found and created in the Google Cloud console. See the following table for further information:

auto_select

This field determines if an ID token is automatically returned without any user interaction when there's only one Google session that has approved your app before. The default value is false . See the following table for further information:

перезвонить

This field is the JavaScript function that handles the ID token returned from the One Tap prompt or the pop-up window. This attribute is required if Google One Tap or the Sign In With Google button popup UX mode is used. See the following table for further information:

login_uri

This attribute is the URI of your login endpoint.

The value must exactly match one of the authorized redirect URIs for the OAuth 2.0 client, which you configured in the Google Cloud console and must conform to our Redirect URI validation rules .

This attribute may be omitted if the current page is your login page, in which case the credential is posted to this page by default.

The ID token credential response is posted to your login endpoint when a user clicks on the Sign In With Google button and redirect UX mode is used.

See the following table for further information:

Your login endpoint must handle POST requests containing a credential key with an ID token value in the body.

The following is an example request to your login endpoint:

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

credential=ID_TOKEN

native_callback

This field is the name of the JavaScript function that handles the password credential returned from the browser's native credential manager. See the following table for further information:

cancel_on_tap_outside

This field sets whether or not to cancel the One Tap request if a user clicks outside the prompt. The default value is true . You can disable it if you set the value to false . See the following table for further information:

prompt_parent_id

This attribute sets the DOM ID of the container element. If it's not set, the One Tap prompt is displayed in the top-right corner of the window. See the following table for further information:

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

This field is a random string used by the ID token to prevent replay attacks. See the following table for further information:

Nonce length is limited to the maximum JWT size supported by your environment, and individual browser and server HTTP size constraints.

контекст

This field changes the text of the title and messages in the One Tap prompt. See the following table for further information:

The following table lists all the available contexts and their descriptions:

state_cookie_domain

If you need to display One Tap in the parent domain and its subdomains, pass the parent domain to this field so that a single shared-state cookie is used. See the following table for further information:

ux_mode

Use this field to set the UX flow used by the Sign In With Google button. The default value is popup . This attribute has no impact on the OneTap UX. See the following table for further information:

The following table lists the available UX modes and their descriptions.

allowed_parent_origin

The origins that are allowed to embed the intermediate iframe. One Tap runs in the intermediate iframe mode if this field is present. See the following table for further information:

The following table lists the supported value types and their descriptions.

Wildcard prefixes are also supported. For example, "https://*.example.com" matches example.com and its subdomains at all levels (eg news.example.com , login.news.example.com ). Things to keep in mind when using wildcards:

• Pattern strings cannot be composed of only a wildcard and a top level domain. For example https:// .com and https:// .co.uk are invalid; As noted above, "https:// .example.com" matches example.com and its subdomains. You can also use an array to represent 2 different domains. For example, ["https://example1.com", "https:// .example2.com"] matches the domains example1.com , example2.com and subdomains of example2.com
• Wildcard domains must begin with a secure https:// scheme, and so "*.example.com" is considered invalid.

If the value of allowed_parent_origin field is invalid, the One Tap initialization of the intermediate iframe mode would fail and stop.

intermediate_iframe_close_callback

Overrides the default intermediate iframe behavior when users manually close One Tap by tapping on the 'X' button in the One Tap UI. The default behavior is to remove the intermediate iframe from the DOM immediately.

The intermediate_iframe_close_callback field takes effect only in intermediate iframe mode. And it has impact only to the intermediate iframe, instead of the One Tap iframe. The One Tap UI is removed before the callback is invoked.

itp_support

This field determines if the upgraded One Tap UX should be enabled on browsers that support Intelligent Tracking Prevention (ITP). The default value is false . See the following table for further information:

login_hint

If your application knows in advance which user should be signed-in, it can provide a login hint to Google. When successful, account selection is skipped. Accepted values are: an email address or an ID token sub field value.

For more information, see the login_hint field in the OpenID Connect documentation.

HD

When a user has multiple accounts and should only sign-in with their Workspace account use this to provide a domain name hint to Google. When successful, user accounts displayed during account selection are limited to the provided domain. A wildcard value: * offers only Workspace accounts to the user and excludes consumer accounts (user@gmail.com) during account selection.

For more information, see the hd field in the OpenID Connect documentation.

use_fedcm_for_prompt

Allow the browser to control user sign-in prompts and mediate the sign-in flow between your website and Google. Defaults to false. See Migrate to FedCM page for more information.

use_fedcm_for_button

This field determines if FedCM button UX should be used on Chrome (desktop M125+ and Android M128+). Defaults to false . See the following table for further information:

button_auto_select

This field determines whether to enable the auto select option for the FedCM button flow. If enabled, returning users with an active Google session will be automatically signed in, bypassing the Account Chooser prompt. Defaults to false . You need to explicitly enable button auto-sign-in during the opt-in launch. See the following table for further information:

Method: google.accounts.id.prompt

The google.accounts.id.prompt method displays the One Tap prompt or the browser native credential manager after the initialize() method is invoked. See the following code example of the method:

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

Normally, the prompt() method is called on page load. Due to the session status and user settings on the Google side, the One Tap prompt UI might not be displayed. To get notified on the UI status for different moments, pass a function to receive UI status notifications.

Notifications are fired on the following moments:

• Display moment: This occurs after the prompt() method is called. The notification contains a boolean value to indicate whether the UI is displayed or not.

• Skipped moment: This occurs when the One Tap prompt is closed by an auto cancel, a manual cancel, or when Google fails to issue a credential, such as when the selected session has signed out of Google.

  In these cases, we recommend that you continue on to the next identity providers, if there are any.

• Dismissed moment: This occurs when Google successfully retrieves a credential or a user wants to stop the credential retrieval flow. For example, when the user begins to input their username and password in your login dialog, you can call the google.accounts.id.cancel() method to close the One Tap prompt and trigger a dismissed moment.

The following code example implements the skipped moment:

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

Data type: PromptMomentNotification

The following table lists methods and descriptions of the PromptMomentNotification data type:

Data type: CredentialResponse

When your callback function is invoked, a CredentialResponse object is passed as the parameter. The following table lists the fields that are contained in the credential response object:

полномочия

This field is the ID token as a base64-encoded JSON Web Token (JWT) string.

When decoded , the JWT looks like the following example:

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "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"
}

The sub field is a globally unique identifier for the Google Account. Only use sub field as identifier for the user as it is unique among all Google Accounts and never reused.

Using the email , email_verified and hd fields you can determine if Google hosts and is authoritative for an email address. In cases where Google is authoritative the user is confirmed to be the legitimate account owner.

Cases where Google is authoritative:

• email has a @gmail.com suffix, this is a Gmail Account.
• email_verified is true and hd is set, this is a Google Workspace account.

Users may register for Google Accounts without using Gmail or Google Workspace. When email does not contain a @gmail.com suffix and hd is absent Google is not authoritative and password or other challenge methods are recommended to verify the user. email_verfied can also be true as Google initially verified the user when the Google Account was created, however ownership of the third party email account may have since changed.

The exp field shows the expiration time for you to verify the token on your server side . It is one hour for the ID token obtained from Sign In With Google. You need to verify the token before the expiration time. Don't use exp for session management . An expired ID token does not mean the user is signed out. Your app is responsible for session management of your users.

select_by

The following table lists the possible values for the select_by field. The type of button used along with the session and consent state are used to set the value,

• The user pressed either the One Tap or Sign In With Google button or used the touchless Automatic sign-in process.

• An existing session was found, or the user selected and signed-in to a Google Account to establish a new session.

• Prior to sharing ID token credentials with your app the user either

  • pressed the Confirm button to grant their consent to share credentials, or
  • had previously granted consent and used Select an Account to choose a Google Account.

The value of this field is set to one of these types,

состояние

This field is only defined when user clicks a Sign in with Google button to sign in, and the clicked button's state attribute is specified. The value of this field is the same value you specified in the button's state attribute.

As multiple Sign in with Google buttons can be rendered on the same page, you can assign each button with a unique string. Hence, you can this state field to identify which button user clicked to sign in.

Method: google.accounts.id.renderButton

The google.accounts.id.renderButton method renders a Sign In With Google button in your web pages.

See the following code example of the method:

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

Data type: GsiButtonConfiguration

The following table lists the fields and descriptions of the GsiButtonConfiguration data type:

Attribute types

The following sections contain details about each attribute's type, and an example.

тип

The button type. The default value is standard .

See the following table for further information:

The following table lists the available button types and their descriptions:

Тип
standard
icon

тема

The button theme. The default value is outline . See the following table for further information:

The following table lists the available themes and their descriptions:

Тема
outline
filled_blue
filled_black

размер

The button size. The default value is large . See the following table for further information:

The following table lists the available button sizes and their descriptions:

Размер
large
medium
small

текст

The button text. The default value is signin_with . There are no visual differences for the text of icon buttons that have different text attributes. The only exception is when the text is read for screen accessibility.

See the following table for further information:

The following table lists all the available button texts and their descriptions:

Текст
signin_with
signup_with
continue_with
signin

форма

The button shape. The default value is rectangular . See the following table for further information:

The following table lists the available button shapes and their descriptions:

Форма
rectangular
pill
circle
square

logo_alignment

The alignment of the Google logo. The default value is left . This attribute only applies to the standard button type. See the following table for further information:

The following table lists the available alignments and their descriptions:

logo_alignment
left
center

ширина

The minimum button width, in pixels. The maximum width is 400 pixels.

See the following table for further information:

locale

Необязательный. Display button text using the specified locale, otherwise default to the users Google Account or browser settings. Add the hl parameter and language code to the src directive when loading the library, for example: gsi/client?hl=<iso-639-code> .