Войти с помощью кнопки Google UX

На этой странице описывается пользовательский интерфейс (UX) кнопки «Войти через Google».

Рендеринг кнопок

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

Если отображается персонализированная кнопка, пользователь знает следующее:

• Имеется как минимум один активный сеанс Google.
• На вашем сайте есть соответствующий аккаунт.

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

Для индикации статуса сеанса персонализированная кнопка отображается следующими способами:

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

  

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

  

• Нет сеанса: на стороне Google нет сеанса или ни один из сеансов еще не утвердил клиента.

  

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

• Атрибут data-type — icon .
• Атрибуту data-size присвоено значение medium или small .
• Атрибут data-width имеет значение меньше 200 пикселей.
• Сторонние файлы cookie заблокированы, а версия кнопки FedCM неактивна.

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

Ключевой момент: инструмент разработчика Code Generator может помочь вам разработать кнопку «Войти через Google» в интерактивном режиме и сгенерировать код.

Федеративный менеджер учетных данных (FedCM)

Privacy Sandbox для Интернета вносит существенные изменения в службы идентификации Google и вход пользователей. Это влияет на персонализированную кнопку «Войти с помощью Google». Хотя кнопка не влияет на процесс входа в систему, поскольку сторонние файлы cookie заблокированы, ваши вернувшиеся пользователи не увидят персонализированную кнопку.

С помощью кнопок Federated Credentials Management API (FedCM) пользователи смогут видеть персонализированную кнопку «Войти через Google» на вашем сайте. По умолчанию FedCM отключен, но вы можете включить FedCM, изменив один атрибут ( HTML / JavaScript ). Преимущества кнопки FedCM включают в себя:

• Улучшение взаимодействия с возвращающимися пользователями . Процесс входа в систему для возвращающихся пользователей упрощен, поскольку пользователи могут распознавать свои существующие учетные записи. Доказано, что такое улучшенное распознавание приводит к более высокому рейтингу кликов (CTR). Кроме того, в отличие от потока кнопок без включения FedCM, поток кнопок FedCM поддерживает функцию автоматического выбора : вернувшиеся пользователи с активным сеансом Google будут автоматически входить в систему после нажатия кнопки, минуя подсказку выбора учетной записи.

• Расширенная интеграция функций : мы интегрировали функции «Одно касание» и «Автоматический вход», что позволяет всем функциям федеративного управления учетными данными (FedCM) для входа в систему с функциями Google от одной проверяющей стороны (RP) работать согласованно. Жесты пользователя в потоке кнопок FedCM будут записываться и учитываться Chrome для выполнения однократного повторного подтверждения потока автоматического входа в систему одним касанием. Это обеспечивает бесперебойную работу всех функций.

Ключевые пути пользователя

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

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

Действия пользователя различаются в зависимости от следующих статусов.

• Статус сеанса на веб-сайтах Google. Следующие термины используются для обозначения различных статусов сеанса Google в начале пути пользователя.

  • Has-Google-session : на веб-сайтах Google имеется как минимум один активный сеанс.
  • No-Google-session : на веб-сайтах Google нет активного сеанса.

• Одобрил ли выбранный аккаунт Google ваш веб-сайт в начале пути пользователя. Следующие термины используются для обозначения различных статусов утверждения.

  • Новый пользователь : выбранная учетная запись не одобрила ваш веб-сайт.
  • Вернувшийся пользователь : выбранная учетная запись ранее одобрила ваш веб-сайт.

Новый путь пользователя Has-Google-session

Кнопка без FedCM

1. Кнопка «Войти через Google».

   

2. Страница выбора аккаунта.

   

3. Новая страница согласия пользователя.

   

4. После того, как пользователь подтвердит, токен идентификатора будет передан на ваш сайт.

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

Кнопка с использованием FedCM

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

Путь возвращающегося пользователя Has-Google-session

Кнопка без FedCM

1. Кнопка «Войти через Google».

   

2. Страница выбора аккаунта.

   

3. После того, как пользователь выбирает возвращающуюся учетную запись, токен идентификатора передается на ваш сайт.

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

Кнопка с использованием FedCM

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

Has-Google-сессия с автоматическим выбором пути возвращающегося пользователя

Кнопка без FedCM

Кнопка «Войти с помощью Google» без функции автоматического выбора FedCM.

Кнопка с использованием FedCM

Вернувшиеся пользователи с активным сеансом Google будут автоматически выбраны после нажатия кнопки, минуя подсказку выбора учетной записи. Установите для атрибута auto select значение true ( HTML / JavaScript ).

Путь нового пользователя без сеанса Google

Кнопка без FedCM

1. Кнопка «Войти через Google».

   

2. Первая страница для добавления нового сеанса Google.

   

3. Вторая страница для добавления нового сеанса Google.

   

4. Новая страница согласия пользователя.

   

5. После того, как пользователь подтвердит, токен идентификатора будет передан на ваш сайт.

Кнопка с использованием FedCM

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

Путь возвращающегося пользователя без сеанса Google

Кнопка без FedCM

1. Кнопка «Войти через Google».

   

2. Первая страница для добавления нового сеанса Google.

   

3. Вторая страница для добавления нового сеанса Google.

   

4. После того, как пользователь нажимает кнопку «Далее» , токен идентификатора передается на ваш веб-сайт.

Кнопка с использованием FedCM

Опыт ключевых пользователей аккаунта Family Link

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

Кнопка без FedCM

Нет Google-сессии

1. Кнопка «Войти через Google».

   

2. Первая страница для добавления нового дочернего сеанса Google (адрес электронной почты дочерней учетной записи Google).

   

3. Вторая страница для добавления нового дочернего сеанса Google (пароль дочерней учетной записи Google).

   

4. Первая страница для получения одобрения родителя на добавление нового дочернего сеанса Google.

   

5. Вторая страница для получения одобрения родителя на добавление нового дочернего сеанса Google.

   

6. Третья страница для получения одобрения родителя на добавление нового дочернего сеанса Google.

   

7. Первая страница для получения разрешения от родителя на вход дочерней учетной записи Google в приложение.

   

8. Вторая страница для получения разрешения от родителя на вход в дочернюю учетную запись Google в приложение.

   

9. Третья страница для получения разрешения от родителя на вход в дочернюю учетную запись Google в приложение.

   

10. Последняя страница для получения разрешения от родителя на вход в дочернюю учетную запись Google в приложение.

    

11. После того, как родитель нажмет кнопку «Продолжить» , токен идентификатора будет передан на ваш веб-сайт.

Has-Google-сессия

1. Кнопка «Войти через Google».

   

2. Страница выбора аккаунта.

   

3. Первая страница для получения разрешения от родителя на вход дочерней учетной записи Google в приложение.

   

4. Вторая страница для получения разрешения от родителя на вход в дочернюю учетную запись Google в приложение.

   

5. Третья страница для получения разрешения от родителя на вход в дочернюю учетную запись Google в приложение.

   

6. Последняя страница для получения разрешения от родителя на вход в дочернюю учетную запись Google в приложение.

   

7. После того, как родитель нажмет кнопку «Продолжить» , токен идентификатора будет передан на ваш веб-сайт.

Кнопка с использованием FedCM

Войти с помощью кнопки Google с включенным FedCM на данный момент не поддерживает учетные записи Family Link.

Дополнительная информация о работе кнопок FedCM

• Добавьте allow="identity-credentials-get" в родительский фрейм, если ваше веб-приложение вызывает API-интерфейс кнопки из iframe с разными источниками. См. шаг 7 для получения дополнительной информации.

• Правильно настройте политику безопасности контента (CSP) вашего сайта. См. шаг 8 для получения дополнительной информации.

• Статус восстановления и настройки стороннего входа в Chrome не влияют на работу кнопок FedCM. Статус (как показано на следующих снимках экрана) влияет только на UX One Tap.