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

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

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

Элемент с идентификатором "g_id_onload"

Вы можете поместить атрибуты данных Sign In With Google в любые видимые или невидимые элементы, такие как <div> и <span> . Единственное требование состоит в том, чтобы для идентификатора элемента было установлено значение g_id_onload . Не размещайте этот идентификатор на нескольких элементах.

Атрибуты данных

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

Атрибут
data-client_id Идентификатор клиента вашего приложения
data-auto_prompt Отображение Google One Tap.
data-auto_select Включает автоматический выбор в Google One Tap.
data-login_uri URL-адрес вашей конечной точки входа
data-callback Имя функции обработчика маркера идентификатора JavaScript
data-native_login_uri URL-адрес конечной точки обработчика учетных данных пароля.
data-native_callback Имя функции обработчика учетных данных пароля JavaScript
data-native_id_param Имя параметра для значения credential.id
data-native_password_param Имя параметра для значения credential.password
data-cancel_on_tap_outside Определяет, следует ли отменить подсказку, если пользователь щелкает за пределами подсказки.
data-prompt_parent_id Идентификатор DOM элемента-контейнера подсказки One Tap.
data-skip_prompt_cookie Пропускает One Tap, если указанный файл cookie имеет непустое значение.
data-nonce Случайная строка для токенов ID
data-context Название и слова в подсказке One Tap
data-moment_callback Имя функции прослушивателя уведомлений о статусе подсказки пользовательского интерфейса.
data-state_cookie_domain Если вам нужно вызвать One Tap в родительском домене и его поддоменах, передайте родительский домен в этот атрибут, чтобы использовался один общий файл cookie.
data-ux_mode UX-процесс кнопки «Войти с помощью Google»
data-allowed_parent_origin Источники, которым разрешено встраивать промежуточный iframe. One Tap будет работать в промежуточном режиме iframe, если присутствует этот атрибут.
data-intermediate_iframe_close_callback Переопределяет поведение промежуточного iframe по умолчанию, когда пользователи вручную закрывают One Tap.
data-itp_support Включает обновленный интерфейс One Tap UX в браузерах ITP.

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

Следующие разделы содержат подробную информацию о каждом типе атрибута и пример.

data-client_id

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

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

данные-auto_prompt

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

Тип Необходимый Пример
логический По желанию data-auto_prompt="true"

данные-auto_select

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

Тип Необходимый Пример
логический По желанию data-auto_select="true"

data-login_uri

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

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

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

Тип По желанию Пример
URL-адрес По умолчанию используется URI текущей страницы или указанное вами значение.
Игнорируется, если data-ux_mode="popup" и data-callback .
data-login_uri="https://www.example.com/login"

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

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

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

credential=ID_TOKEN

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

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

Тип Необходимый Пример
нить Требуется, если data-login_uri не установлен. data-callback="handleToken"

Можно использовать один из data-login_uri и data-callback . Это зависит от следующего компонента и конфигураций режима UX:

  • data-login_uri требуется для режима redirect кнопки «Войти с помощью Google» UX, который игнорирует атрибут data-callback .

  • Один из этих двух атрибутов должен быть установлен для Google One Tap и режима пользовательского интерфейса popup кнопки входа в Google. Если оба установлены, атрибут data-callback имеет более высокий приоритет.

Функции JavaScript в пространстве имен не поддерживаются HTML API. Вместо этого используйте глобальную функцию JavaScript без пространства имен. Например, используйте mylibCallback вместо mylib.callback .

данные-native_login_uri

Этот атрибут является URL-адресом конечной точки вашего обработчика учетных данных пароля. Если вы установите атрибут data-native_login_uri или атрибут data-native_callback , библиотека JavaScript вернется к собственному диспетчеру учетных данных, когда нет сеанса Google. Вам не разрешено устанавливать оба data-native_callback и data-native_login_uri . Дополнительную информацию см. в следующей таблице:

Тип Необходимый Пример
нить По желанию data-login_uri="https://www.example.com/password_login"

data-native_callback

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

Тип Необходимый Пример
нить По желанию data-native_callback="handlePasswordCredential"

Функции JavaScript в пространстве имен не поддерживаются HTML API. Вместо этого используйте глобальную функцию JavaScript без пространства имен. Например, используйте mylibCallback вместо mylib.callback .

данные-native_id_param

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

Тип Необходимый Пример
URL-адрес По желанию data-native_id_param="user_id"

данные-native_password_param

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

Тип Необходимый Пример
URL-адрес По желанию data-native_password_param="pwd"

данные-cancel_on_tap_outside

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

Тип Необходимый Пример
логический По желанию data-cancel_on_tap_outside="false"

data-prompt_parent_id

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

Тип Необходимый Пример
нить По желанию data-prompt_parent_id="parent_id"

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

Тип Необходимый Пример
нить По желанию data-skip_prompt_cookie="SID"

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

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

Тип Необходимый Пример
нить По желанию data-nonce="biaqbm70g23"

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

контекст данных

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

Тип Необходимый Пример
нить По желанию data-context="use"

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

Контекст
signin "Войти через Google"
signup "Зарегистрируйтесь в Google"
use "Использовать с Google"

data-moment_callback

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

Тип Необходимый Пример
нить По желанию data-moment_callback="logMomentNotification"

Функции JavaScript в пространстве имен не поддерживаются HTML API. Вместо этого используйте глобальную функцию JavaScript без пространства имен. Например, используйте mylibCallback вместо mylib.callback .

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

Тип Необходимый Пример
нить По желанию data-state_cookie_domain="example.com"

данные-ux_mode

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

Тип Необходимый Пример
нить По желанию data-ux_mode="redirect"

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

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

data-allowed_parent_origin

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

Тип Необходимый Пример
строка или массив строк По желанию data-allowed_parent_origin="https://example.com"

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

Типы значений
string URI одного домена. "https://example.com"
string array Список разделенных запятыми URI доменов. "https://news.example.com,https://local.example.com"

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

данные-intermediate_iframe_close_callback

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

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

Тип Необходимый Пример
функция По желанию data-intermediate_iframe_close_callback="logBeforeClose"

Функции JavaScript в пространстве имен не поддерживаются HTML API. Вместо этого используйте глобальную функцию JavaScript без пространства имен. Например, используйте mylibCallback вместо mylib.callback .

данные-itp_support

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

Тип Необходимый Пример
логический По желанию data-itp_support="true"

Элемент с классом "g_id_signin"

Если вы добавите g_id_signin в атрибут class элемента, элемент будет отображаться как кнопка «Войти с помощью Google».

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

Атрибуты визуальных данных

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

Атрибут
data-type Тип кнопки: иконка или стандартная кнопка.
data-theme Тема кнопки. Например, fill_blue или fill_black.
data-size Размер кнопки. Например, маленькое или большое.
data-text Текст кнопки. Например, «Войти через Google» или «Зарегистрироваться через Google».
data-shape Форма кнопки. Например, прямоугольный или круглый.
data-logo_alignment Выравнивание логотипа Google: слева или по центру.
data-width Ширина кнопки в пикселях.
data-locale Текст кнопки отображается на языке, установленном в этом атрибуте.

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

Следующие разделы содержат подробную информацию о каждом типе атрибута и пример.

тип данных

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

Тип Необходимый Пример
нить Да data-type="icon"

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

Тип
standard Кнопка с текстом или персонализированной информацией:
icon Кнопка со значком без текста:

тема данных

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

Тип Необходимый Пример
нить По желанию data-theme="filled_blue"

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

Тема
outline Стандартная тема кнопки:
Стандартная кнопка с белым фономКнопка со значком на белом фонеПерсонализированная кнопка с белым фоном
filled_blue Тема кнопки с синей заливкой:
Стандартная кнопка с синим фономКнопка со значком на синем фонеПерсонализированная кнопка с синим фоном
filled_black Кнопка с черной заливкой:
Стандартная кнопка с черным фономКнопка со значком на черном фонеПерсонализированная кнопка с черным фоном

размер данных

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

Тип Необходимый Пример
нить По желанию data-size="small"

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

Размер
large Большая кнопка:
Большая стандартная кнопка.Большая кнопка со значкомБольшая персонализированная кнопка
medium Кнопка среднего размера:
Средняя стандартная кнопкаКнопка со средним значком
small Маленькая кнопка:
Маленькая кнопкаКнопка с маленьким значком

текст данных

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

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

Тип Необходимый Пример
нить По желанию data-text="signup_with"

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

Текст
signin_with Текст кнопки «Войти через Google»:
Стандартная кнопка с надписью «Войти через Google».Кнопка со значком без видимого текста
signup_with Текст кнопки «Зарегистрироваться в Google»:
Стандартная кнопка с надписью «Зарегистрироваться в Google».Кнопка со значком без видимого текста
continue_with Текст кнопки «Продолжить с Google»:
Стандартная кнопка с надписью «Продолжить с Google».Кнопка со значком без видимого текста
signin Текст кнопки «Войти»:
Стандартная кнопка с надписью «Войти».Кнопка со значком без видимого текста

форма данных

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

Тип Необходимый Пример
нить По желанию data-shape="rectangular"

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

Форма
rectangular Кнопка прямоугольной формы. Если используется для типа кнопки со icon , это то же самое, что и square .
Стандартная прямоугольная кнопкаКнопка с прямоугольным значкомПрямоугольная персонализированная кнопка
pill Кнопка в виде таблетки. Если используется для типа кнопки со icon , то это то же самое, что и circle .
Стандартная кнопка в форме таблеткиКнопка со значком в виде таблеткиПерсонализированная кнопка в форме таблетки
circle Кнопка в виде круга. Если используется для standard типа кнопки, то это то же самое, что и pill .
Круглая стандартная кнопкаКруглая кнопка со значкомКруглая персонализированная кнопка
square Кнопка квадратной формы. Если используется для standard типа кнопки, то это то же самое, что и rectangular кнопка.
Квадратная стандартная кнопкаКвадратная кнопка со значкомКвадратная персонализированная кнопка

data-logo_alignment

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

Тип Необходимый Пример
нить По желанию data-logo_alignment="center"

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

logo_alignment
left Выравнивает логотип Google по левому краю:
Стандартная кнопка с логотипом G слева
center Выравнивает логотип Google по центру:
Стандартная кнопка с логотипом G в центре.

ширина данных

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

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

Тип Необходимый Пример
нить По желанию data-width=400

локаль данных

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

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

Тип Необходимый Пример
нить По желанию data-locale="zh_CN"

Интеграция на стороне сервера

Конечные точки на стороне сервера должны обрабатывать следующие HTTP-запросы POST .

Конечная точка обработчика токена ID

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

Запрос HTTP POST содержит следующую информацию:

Формат Имя Описание
Куки g_csrf_token Случайная строка, которая изменяется при каждом запросе к конечной точке обработчика.
Параметр запроса g_csrf_token Строка, аналогичная предыдущему значению файла cookie, g_csrf_token .
Параметр запроса credential Идентификационный токен, который выдает Google.
Параметр запроса select_by Как выбираются учетные данные.

При декодировании токен ID выглядит следующим образом:

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": "Eliza",
  "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"
}

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

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

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

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

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

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

Ценность Описание
auto Автоматический вход пользователя с существующим сеансом, который ранее дал согласие на обмен учетными данными.
user Пользователь с существующим сеансом, ранее давший согласие, нажал кнопку «Продолжить как» одним нажатием, чтобы поделиться учетными данными.
user_1tap Пользователь с существующим сеансом нажал кнопку One Tap «Продолжить как», чтобы дать согласие и поделиться учетными данными. Применяется только к Chrome v75 и выше.
user_2tap Пользователь без существующего сеанса нажал кнопку One Tap «Продолжить как», чтобы выбрать учетную запись, а затем нажал кнопку «Подтвердить» во всплывающем окне, чтобы предоставить согласие и поделиться учетными данными. Применяется для браузеров, отличных от Chromium.
btn Пользователь с существующим сеансом, ранее давший согласие, нажал кнопку «Войти через Google» и выбрал учетную запись Google в разделе «Выбрать учетную запись», чтобы поделиться учетными данными.
btn_confirm Пользователь с существующим сеансом нажал кнопку «Войти через Google», а затем кнопку «Подтвердить», чтобы дать согласие и поделиться учетными данными.
btn_add_session Пользователь без существующего сеанса, ранее давший согласие, нажал кнопку «Войти с помощью Google», чтобы выбрать учетную запись Google и поделиться учетными данными.
btn_confirm_add_session Пользователь без существующего сеанса сначала нажимал кнопку «Войти с помощью Google», чтобы выбрать учетную запись Google, а затем нажимал кнопку «Подтвердить», чтобы дать согласие и поделиться учетными данными.

Конечная точка обработчика учетных данных пароля

Конечная точка обработчика учетных данных паролей обрабатывает учетные данные паролей, которые извлекает собственный диспетчер учетных данных.

Запрос HTTP POST содержит следующую информацию:

Формат Имя Описание
Куки g_csrf_token Случайная строка, которая изменяется при каждом запросе к конечной точке обработчика.
Параметр запроса g_csrf_token Строка, аналогичная предыдущему значению файла cookie, g_csrf_token .
Параметр запроса email Этот идентификационный токен, который выдает Google.
Параметр запроса password Как выбираются учетные данные.