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

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

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

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

Вы можете поместить Вход атрибутов данных с Google в каких - либо видимых или невидимых элементов, таких как <div> и <span> . Единственное требование состоит в том , что элемент ID установлен в 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 ID элемента контейнера подсказки One Tap
data-skip_prompt_cookie Пропускает одно касание, если указанный файл cookie имеет непустое значение.
data-nonce Случайная строка для идентификаторов токенов
data-context Название и слова в подсказке One Tap
data-moment_callback Имя функции прослушивателя уведомлений о состоянии пользовательского интерфейса подсказки.
data-state_cookie_domain Если вам нужно вызвать One Tap в родительском домене и его поддоменах, передайте родительский домен в этот атрибут, чтобы использовался один общий файл cookie.
data-ux_mode Пользовательский интерфейс кнопки "Войти с помощью Google"
data-allowed_parent_origin Источники, которым разрешено встраивать промежуточный iframe. One Tap будет работать в промежуточном режиме iframe, если присутствует этот атрибут.
data-intermediate_iframe_close_callback Переопределяет поведение промежуточного окна iframe по умолчанию, когда пользователи вручную закрывают One Tap.

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

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

data-client_id

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

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

data-auto_prompt

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

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

данные-auto_select

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

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

data-login_uri

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

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

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

Тип По желанию Пример
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 атрибут необходим для кнопки Вход с Google redirect режиме UX, который игнорирует data-callback атрибута.

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

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

data-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 .

data-native_id_param

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

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

data-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"

data-nonce

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

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

data-ux_mode

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

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

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

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

данные-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 атрибута является недействительным, инициализация 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 и его поддомены. Вы также можете использовать список, разделенный запятыми, для представления 2 разных доменов. Например, "https://example1.com,https://*.example2.com" будет соответствовать домены example1.com , example2.com и поддомены example2.com
  • Домены с подстановочными знаками должны начинаться с безопасной схемы https: //. "*.example.com" будет считаться недействительным.

data-intermediate_iframe_close_callback

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

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

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

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

Элемент с классом 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".Значок кнопки без видимого текста
signup_with Текст кнопки - «Войти»:
Стандартная кнопка с надписью "Войти".Значок кнопки без видимого текста

форма данных

Форма кнопки. Значение по умолчанию 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 запросы.

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

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

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

Формат Имя Описание
Cookie-файлы g_csrf_token Случайная строка, которая изменяется с каждым запросом к конечной точке обработчика.
Параметр запроса g_csrf_token Строка, это так же , как предыдущее значение куки, 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 поля. Тип кнопки, используемой вместе с состоянием сеанса и согласия, используется для установки значения,

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

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

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

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

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

Ценить Описание
auto Автоматический вход пользователя с существующим сеансом, который ранее дал согласие на совместное использование учетных данных.
user Пользователь с существующим сеансом, который ранее предоставил согласие, нажал кнопку One Tap «Продолжить как», чтобы поделиться учетными данными.
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 запрос содержит следующую информацию:

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