На этой странице описывается пользовательский интерфейс (UX) кнопки «Войти через Google».
Рендеринг кнопок
Персонализированная кнопка отображает информацию профиля для первого сеанса Google, в ходе которого ваш веб-сайт одобряется. У одобренного сеанса Google есть соответствующая учетная запись на вашем веб-сайте, которая ранее входила в систему с помощью функции «Войти через Google».
Если отображается персонализированная кнопка, пользователь знает следующее:
- Имеется как минимум один активный сеанс Google.
- На вашем сайте есть соответствующий аккаунт.
Персонализированная кнопка дает пользователям быструю индикацию статуса сеанса как на стороне Google, так и на вашем веб-сайте, прежде чем они нажмут кнопку. Это особенно полезно для конечных пользователей, которые посещают ваш сайт лишь изредка. Они могут забыть, создана ли учетная запись или нет и каким образом. Персонализированная кнопка напоминает им, что они уже использовали функцию «Войти через Google». Таким образом, это помогает предотвратить ненужное создание дубликатов учетных записей на вашем веб-сайте.
Для индикации статуса сеанса персонализированная кнопка отображается следующими способами:
Один сеанс. Со стороны Google существует только один сеанс. Эта сессия утверждает клиента, и на вашем сайте появляется соответствующая учетная запись.
Несколько сеансов: на стороне Google есть несколько сеансов. Эти сеансы утверждают клиента. Утверждение обозначается стрелкой списка рядом с отображаемой учетной записью. По крайней мере, один сеанс имеет соответствующую учетную запись на вашем сайте.
Нет сеанса: на стороне Google нет сеанса или ни один из сеансов еще не утвердил клиента.
Персонализированная кнопка автоматически отображается, когда состояние сеанса подходит, если только настройки вашей кнопки не позволяют отображать персонализированную кнопку. Персонализированная кнопка не отображается, если:
- Атрибут
data-type—icon. - Атрибуту
data-sizeприсвоено значениеmediumилиsmall. - Атрибут
data-widthимеет значение меньше 200 пикселей.
Имя или адрес электронной почты отображаются в виде эллипса, если они слишком длинные и не могут быть отображены внутри кнопки.
Ключевые пути пользователя
Действия пользователя различаются в зависимости от следующих статусов.
Статус сеанса на веб-сайтах Google. Следующие термины используются для обозначения различных статусов сеанса Google в начале пути пользователя.
- Has-Google-session: на веб-сайтах Google существует как минимум один активный сеанс.
- Нет сеанса Google: на веб-сайтах Google нет активного сеанса.
Одобрил ли выбранный аккаунт Google ваш веб-сайт в начале пути пользователя. Следующие термины используются для обозначения различных статусов утверждения.
- Новый пользователь: выбранная учетная запись не одобрила ваш веб-сайт.
- Возвращающийся пользователь: выбранная учетная запись ранее одобрила ваш веб-сайт.
Новый путь пользователя Has-Google-session
Кнопка «Войти через Google».
Страница выбора аккаунта.
Новая страница согласия пользователя.
После того, как пользователь подтвердит, токен идентификатора будет передан на ваш сайт.
Пользователи могут добавить новый сеанс Google, нажав кнопку «Использовать другую учетную запись» . См. раздел «Пути пользователя без сеанса Google» ниже.
Путь возвращающегося пользователя Has-Google-session
Кнопка «Войти через Google».
Страница выбора аккаунта.
После того, как пользователь выбирает возвращающуюся учетную запись, токен идентификатора передается на ваш сайт.
Пользователи могут добавить новый сеанс Google, нажав кнопку « Использовать другую учетную запись» (см. «Пути пользователя без сеанса Google» ниже).
Путь нового пользователя без сеанса Google
Кнопка «Войти через Google».
Первая страница для добавления нового сеанса Google.
Вторая страница для добавления нового сеанса Google.
Новая страница согласия пользователя.
После того, как пользователь подтвердит, токен идентификатора будет передан на ваш сайт.
Путь возвращающегося пользователя без сеанса Google
Кнопка «Войти через Google».
Первая страница для добавления нового сеанса Google.
Вторая страница для добавления нового сеанса Google.
После того, как пользователь нажимает кнопку «Далее» , токен идентификатора передается на ваш веб-сайт.
Опыт ключевых пользователей аккаунта Family Link
Общие ключевые пути пользователя из предыдущего раздела по-прежнему применимы. Ниже показано, что дополнительный поток будет представлен для учетной записи Google ребенка при входе в систему.
Нет сеанса Google
Кнопка «Войти через Google».
Первая страница для добавления нового дочернего сеанса Google (адрес электронной почты дочерней учетной записи Google).
Вторая страница для добавления нового дочернего сеанса Google (пароль детской учетной записи Google).
Первая страница для получения одобрения родителя на добавление нового дочернего сеанса Google.
Вторая страница для получения одобрения родителя на добавление нового дочернего сеанса Google.
Третья страница для получения одобрения родителя на добавление нового дочернего сеанса Google.
Первая страница для получения разрешения от родителя на вход дочерней учетной записи Google в приложение.
Вторая страница для получения разрешения от родителя на вход в дочернюю учетную запись Google в приложение.
Третья страница для получения разрешения от родителя на вход в дочернюю учетную запись Google в приложение.
Последняя страница для получения разрешения родителя на вход в дочернюю учетную запись Google в приложение.
После того, как родитель нажмет кнопку «Продолжить» , токен идентификатора будет передан на ваш веб-сайт.
Has-Google-сессия
Кнопка «Войти через Google».
Страница выбора аккаунта.
Первая страница для получения разрешения от родителя на вход дочерней учетной записи Google в приложение.
Вторая страница для получения разрешения от родителя на вход в дочернюю учетную запись Google в приложение.
Третья страница для получения разрешения от родителя на вход в дочернюю учетную запись Google в приложение.
Последняя страница для получения разрешения родителя на вход в дочернюю учетную запись Google в приложение.
После того, как родитель нажмет кнопку «Продолжить» , токен идентификатора будет передан на ваш веб-сайт.