На этой справочной странице описывается 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" |
data-skip_prompt_cookie
Этот атрибут пропускает 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 .
data-state_cookie_domain
Если вам нужно отобразить 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»: |
signup_with | Текст кнопки «Зарегистрироваться в Google»:  |
continue_with | Текст кнопки «Продолжить с 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 по левому краю:  |
center | Выравнивает логотип Google по центру:  |
ширина данных
Минимальная ширина кнопки в пикселях. Максимальная доступная ширина составляет 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 | Как выбираются учетные данные. |