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

Интегрируйте One Tap через Iframe

Google One Tap может отображаться внутри iframe (в дальнейшем называемого промежуточным iframe), размещенного на вашем собственном веб-сайте. Когда используется промежуточный iframe, в One Tap UX нет заметных изменений.

Интеграция на основе промежуточных фреймов имеет некоторую гибкость и риски:

  • Встроенный UX для One Tap и последующего UX-потока .

    После завершения One Tap UX вы можете отобразить последующий UX-поток внутри промежуточного iframe. Таким образом, One Tap и последующий UX могут быть встроены в текущую страницу контента. См. Пример ниже.

    Пример встроенного UX с промежуточным iframe.

    Без промежуточного iframe обычно требуется полная навигация по странице для отображения последующего UX-потока, что в некоторых случаях может быть навязчивым.

  • Интегрируйте один раз и показывайте везде .

    Весь код интеграции One Tap (вызов One Tap API и последующая обработка UX) инкапсулируется в промежуточный iframe. На страницах с контентом, где может отображаться One Tap, все, что вам нужно сделать, это встроить промежуточный iframe.

    Эта архитектура позволяет разделить задачи и, таким образом, снижает затраты на интеграцию и обслуживание.

  • Ограничьте область действия идентификатора токена .

    Токены ID используются непосредственно промежуточным фреймом iframe. Они никогда не отображаются на страницах с контентом. Эта архитектура может значительно уменьшить объем раскрытия токенов ID.

    Промежуточный способ iframe также хорошо работает с веб-сайтами, у которых уже есть выделенный поддомен, связанный с входом в систему (например, login.example.com) и несколько поддоменов, связанных с контентом (скажем, sports.example.com и games.example.com). .

  • Отображение доменов в одно касание .

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

    Эту проблему можно решить, используя промежуточный iframe. В этом случае необходимо предварительно зарегистрировать только домен промежуточного iframe. Нет необходимости регистрировать домены страниц с контентом, поскольку идентификаторы не отображаются на этих страницах с контентом.

  • Поддержка AMP .

    По умолчанию Google One Tap не может отображаться на страницах AMP по причинам, указанным ниже.

    1. Пользовательская библиотека или код JS не допускаются.

    2. Кэш AMP может отображать страницу из другого домена (средства просмотра AMP).

    Эту проблему можно решить, используя промежуточную архитектуру iframe. После того, как интеграция One Tap будет выполнена в промежуточном фрейме iframe, разработчики могут встроить его в страницы AMP, добавив компонент <amp-onetap-google>.

    Один и тот же промежуточный iframe может повторно использоваться как страницами AMP, так и страницами HTML без AMP.

  • Риски конфиденциальности .

    Разработчики должны принять меры для предотвращения встраивания промежуточных окон iframe в неожиданные домены. Например, вредоносный.com может встраивать ваш промежуточный iframe и таким образом отображать ваш One Tap UX на своем веб-сайте. Это определенно вызовет множество опасений по поводу конфиденциальности у конечных пользователей.

  • Риски безопасности .

    Из-за вышеупомянутой неожиданной проблемы с фреймом ваш промежуточный iframe никогда не должен отправлять конфиденциальные данные безопасности или конфиденциальности в его родительский фрейм, такие как идентификаторы, значения файлов cookie сеанса, данные пользователя и т. Д. Опасность.

Визуализируйте одно касание в промежуточном iframe

Чтобы отобразить One Tap внутри промежуточного iframe, поместите следующий фрагмент кода в HTML-код промежуточного iframe:

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-allowed_parent_origin="https://example.com">
</div>

Если data-allowed_parent_origin атрибут data-allowed_parent_origin , Google One Tap будет работать в промежуточном режиме iframe. Вы можете установить один домен или список доменов, разделенных запятыми, в качестве значения атрибута. Также поддерживаются поддомены с подстановочными знаками.

(Необязательно) Визуализировать последующий пользовательский интерфейс в промежуточном фрейме iframe

В ответе на вход вы можете вернуть любой HTML-код, который может отображать видимый контент для конечных пользователей. Например, запрос дополнительной информации профиля или согласование УО и т. Д. После отправки страницы вы можете отображать другие страницы. Например, для оплаты или подписки и т. Д.

У вас также есть возможность изменить размер промежуточного окна iframe, как показано ниже.

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentResize(320);
</script>

Таким образом, с промежуточным iframe полный UX-поток входа или регистрации может быть реализован как встроенный UX.

Для первой страницы после One Tap UX вам необходимо дважды вызвать метод notifyParentResize() по причинам, notifyParentResize() ниже.

  1. Промежуточный iframe становится скрытым после завершения One Tap UX.

  2. offsetHeight атрибута offsetHeight элемента равно 0, когда он скрыт.

При первом вызове вы можете изменить высоту iframe до 1 пикселя, чтобы сделать его видимым. Затем, когда offsetHeight атрибута offsetHeight станет доступным, вы можете изменить его размер до подходящей высоты.

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

<script>
    window.onload = () => {
      google.accounts.id.intermediate.verifyParentOrigin(
          ["https://example.com","https://example-com.cdn.ampproject.org"],
          () => {
            google.accounts.id.intermediate.notifyParentResize(1);
            window.setTimeout(() => {
              let h = document.getElementById('container').offsetHeight;
              google.accounts.id.intermediate.notifyParentResize(h);
            }, 200);
          },
          () => {
            document.getElementById('container').style.display = 'none';
            document.getElementById('warning').innerText =
                'Warning: the page is displayed in an unexpected domain!';
          }
      );
    };
</script>

Удалить промежуточный iframe в UX Done

Вы должны уведомить родительскую страницу контента, чтобы удалить промежуточный iframe, когда UX-поток будет завершен. С этой целью вы можете поместить следующий фрагмент кода в свой код ответа на вход.

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentDone();
</script>

Если UX-поток пропускается, notifyParentClose необходимо notifyParentClose метод notifyParentClose .

Встраивать промежуточный iframe в HTML-страницы

Поместите следующий фрагмент кода на любые HTML-страницы, которые вы хотите отображать в Google One Tap:

<script src="https://accounts.google.com/gsi/intermediate"></script>
...
<div id="g_id_intermediate_iframe"
        data-src = "https://example.com/onetap_iframe.html">
</div>

Атрибут data-src - это URI вашего промежуточного iframe.