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

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

Отображение кнопки

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

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

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

A personalized button gives users a quick indication of the session status, both on Google's side and on your website, before they click the button. This is especially helpful to end users who visit your website only occasionally. They may forget whether an account has been created or not, and in which way. A personalized button reminds them that Sign In With Google has been used before. Thus, it helps to prevent unnecessary duplicate account creation on your website.

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

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

  

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

  

• Нет сессии: на стороне Google нет сессии, или ни одна из сессий еще не одобрила клиента.

  

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

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

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

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

В рамках обновления Privacy Sandbox for the Web внесены существенные изменения в работу Google Identity Services и авторизацию пользователей. Это затрагивает персонализированную кнопку «Войти через Google». Хотя сам процесс авторизации остается неизменным, блокировка сторонних файлов cookie приведет к тому, что пользователи, повторно посещающие сайт, не увидят персонализированную кнопку.

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

• Improved Returning User Experience : The returning user sign-in process is streamlined because users can recognize their existing accounts. This improved recognition is proven to lead to a higher click-through rate (CTR). Furthermore, unlike the button flow without having FedCM enabled, the FedCM button flow supports the automatic select feature - returning users with an active Google session will be automatically signed in after clicking the button, bypassing the Account Chooser prompt.

• Enhanced Feature Integration : We've integrated One Tap and Auto Sign-in functionalities, enabling all Federated Credential Management (FedCM) Sign-in with Google features from a single Relying Party (RP) to work in concert. The user gestures in the FedCM button flow will be recorded and honored by Chrome to fulfill the one-time reconfirmation for One Tap auto sign-in flow. This ensures a seamless experience across all features.

Ключевые сценарии взаимодействия пользователя с системой

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

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

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

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

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

Путь нового пользователя Has-Google-session

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

Has-Google-session with auto select returning user journey

Путь нового пользователя без необходимости посещения Google

Возвращающийся пользователь без необходимости повторной сессии в Google

Ключевые сценарии взаимодействия пользователей учетной записи Family Link

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

Дополнительная информация о последовательности нажатия кнопок FedCM

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

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

• Статус задержки и настройки входа через сторонние сервисы в Chrome не влияют на работу кнопки FedCM. Статус (как показано на следующих скриншотах) влияет только на пользовательский интерфейс One Tap.