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

Тип данных: IdConfiguration

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

client_id

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

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

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

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

авто_выбор

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

перезвонить

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

login_uri

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

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

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

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

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

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

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

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

cancel_on_tap_outside

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

prompt_parent_id

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

однократно

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

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

контекст

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

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

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

state_cookie_domain

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

ux_mode

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

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

allowed_parent_origin

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

itp_support

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

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

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

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

HD

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

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

use_fedcm_for_prompt

Разрешите браузеру управлять запросами на авторизацию пользователей и выступать посредником в процессе входа в систему между вашим веб-сайтом и Google. По умолчанию — false. Дополнительную информацию см. на странице «Переход на 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, интерфейс запроса в одно касание может не отображаться. Чтобы получать уведомления о состоянии интерфейса в разные моменты времени, передайте функцию для получения уведомлений о состоянии интерфейса.

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

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

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

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

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

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

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

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

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

ширина

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

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

локация

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

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

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

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, что позволит определить, какую кнопку пользователь нажал для входа.

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

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

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

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

Приведенный ниже пример кода демонстрирует использование метода revoke с идентификатором.

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

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

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

успешный

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

ошибка

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