Интеграция One Tap через Iframe

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

Промежуточная интеграция на основе iframe дает некоторые возможности и риски:

  • Встроенный 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 Console. При обычной интеграции One Tap разработчикам необходимо предварительно зарегистрировать все домены, которые может отображать One Tap, поскольку токены идентификаторов будут переданы обратно в эти домены. Некоторые веб-сайты позволяют своим пользователям динамически создавать поддомены, которые невозможно предварительно зарегистрировать. В результате One Tap не может отображаться в этих динамически создаваемых поддоменах.

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

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

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

    1. Пользовательская библиотека JS или код не разрешены.

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

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

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

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

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

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

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

Рендеринг одним касанием в промежуточном фрейме

Чтобы отобразить 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 , Google One Tap будет работать в промежуточном режиме iframe. В качестве значения атрибута можно задать один домен или список доменов, разделенных запятыми. Поддомены с подстановочными знаками также поддерживаются.

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

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

У вас также есть возможность изменить размер промежуточного 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() по следующим причинам.

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

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

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

В следующем примере кода показано, как проверить родительский источник и изменить размер промежуточного iframe для пользовательского интерфейса for после 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 Готово

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

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

Если поток UX пропущен, вместо этого необходимо вызвать метод 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.