Ostrzeżenie: te dane są dostępne zgodnie z Zasadami Google dotyczącymi danych użytkownika. Prosimy o zapoznanie się z zasadami i ich przestrzeganie. Niezastosowanie się do nich może spowodować zawieszenie projektu lub konta.

Zintegruj jednym dotknięciem za pomocą elementu iframe

Google One Tap można renderować w elemencie iframe (nazywanym też pośrednim elementem iframe) hostowanym przez Twoją witrynę. Jeśli użyjesz pośredniego elementu iframe, nie wpłynie to na zauważalną zmianę w interfejsie UX.

Pośrednia integracja z elementami iframe wiąże się z elastycznością i ryzykiem:

  • Wbudowany interfejs UX, który obsługuje 1 kliknięcie i kolejne UX.

    Po ukończeniu UX jednym dotknięciem możesz wyświetlić kolejny proces UX w pośrednim elemencie iframe. Dlatego jednym dotknięciem i kolejnym UX możesz umieścić na bieżącej stronie treści. Patrz poniższy przykład.

    Przykład umieszczonego kodu UX z użyciem pośredniego elementu iframe.

    Bez pośredniego elementu iframe zwykle trzeba wyświetlić całą stronę, aby wyświetlić kolejny proces UX, który w niektórych przypadkach może być uciążliwy.

  • integrować raz i wyświetlać reklamy wszędzie

    Cały kod integracji One Tap (wywołanie interfejsu One Tap i kolejne sposoby obsługi UX) są zawarte w pośrednim elemencie iframe. Na stronach z treściami, na których jednym dotknięciem mogą wyświetlić się treści, wystarczy umieścić pośredni element iframe.

    Ta architektura pozwala oddzielić obawy, co zmniejsza koszty integracji i konserwacji.

  • Ogranicz zakres ekspozycji tokena identyfikatora.

    Tokeny identyfikatora są przetwarzane bezpośrednio przez pośredni element iframe. Nigdy nie są one wyświetlane na stronach z treścią. Ta architektura może znacznie zmniejszyć zasięg ekspozycji tokenów.

    Pośredni sposób iframe sprawdza się również w przypadku witryn, które mają już dedykowaną subdomenę powiązaną z logowaniem (np. login.example.com) i wiele subdomen dotyczących treści (np. sport, example.com i gry.example.com).

  • Wyświetlanie domen za pomocą jednego kliknięcia.

    Zgodnie z wymogami zasad Google dotyczących protokołu OAuth wszystkie domeny, które otrzymują odpowiedzi OAuth, muszą zostać wcześniej zarejestrowane w Konsoli interfejsów API Google. Przy normalnej integracji One Tap deweloperzy muszą rejestrować wszystkie domeny, które mogą być wyświetlane jednym dotknięciem, ponieważ są one przekazywane z powrotem do tych domen. Niektóre witryny umożliwiają użytkownikom dynamiczne tworzenie subdomen, których nie można zarejestrować wstępnie. W rezultacie w tych dynamicznie utworzonych poddomenach nie można wyświetlać reklam 1 kliknięciem.

    Ten problem można rozwiązać, korzystając z pośredniego elementu iframe. W takim przypadku tylko domena pośredniego elementu iframe musi zostać wcześniej zarejestrowana. Nie musisz rejestrować domen stron z treścią, ponieważ nie otrzymują one tokenów tożsamości.

  • Obsługa AMP.

    Z kilku powodów domyślnie nie można wyświetlać Google One na stronach AMP.

    1. Niestandardowa biblioteka lub kod JS jest niedozwolony.

    2. Pamięć podręczna AMP może renderować formularz strony w innej domenie (przeglądarka AMP)

    Ten problem można rozwiązać, wykorzystując architekturę pośredniego elementu iframe. Po zakończeniu integracji jednym dotknięciem w pośrednim elemencie iframe deweloperzy mogą umieścić go na stronach AMP, dodając komponent <amp-onetap-google>.

    Tego samego pośredniego elementu iframe można używać zarówno na stronach AMP, jak i HTML.

  • Ryzyko prywatności.

    Deweloperzy muszą podjąć działania, aby zapobiec umieszczeniu pośrednich elementów iframe w nieoczekiwanych domenach. Na przykład złośliwe oprogramowanie.com może umieścić Twój pośredni element iframe i z tego powodu zniechęcić użytkowników do Twojej subskrypcji One Tap. Z pewnością oznacza to dla użytkowników wiele kwestii dotyczących prywatności.

  • Ryzyko bezpieczeństwa.

    Z powodu wspomnianego wyżej problemu z umieszczaniem w ramkach pośredni element iframe nie powinien nigdy przesyłać do ramki nadrzędnej danych związanych z bezpieczeństwem ani prywatnością, takich jak tokeny tożsamości, wartości plików cookie sesji, dane użytkownika itp. Nieprzestrzeganie tej reguły może narazić witryny na niebezpieczeństwo.

Renderuj jednym dotknięciem w pośrednim elemencie iframe

Aby wyświetlać jednym dotknięciem w pośrednim elemencie iframe, umieść ten fragment kodu w kodzie HTML pośredniego elementu 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>

Jeśli atrybut data-allowed_parent_origin jest obecny, Google One Tap działa w pośrednim trybie iframe. Jako wartość atrybutu możesz ustawić jedną domenę lub listę domen rozdzielonych przecinkami. Obsługiwane są również subdomeny z symbolami wieloznacznymi.

(Opcjonalnie) Renderowanie kolejnych UX w pośrednim elemencie iframe

W odpowiedzi logowania możesz podać dowolny kod HTML, który może wyświetlać użytkownikom jakieś widoczne treści. Możesz na przykład poprosić o dodatkowe informacje profilowe lub wyrazić zgodę na Warunki korzystania z usługi. Po przesłaniu strony możesz wyświetlić kolejne strony. Może to być na przykład płatność lub subskrypcja.

Możesz też zmienić rozmiar pośredniego elementu iframe, jak pokazano poniżej.

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

Krótko mówiąc, w przypadku pośredniego elementu iframe pełny proces logowania lub rejestracji może być wdrożony jako osadzony interfejs UX.

W przypadku pierwszej strony po UX jednym dotknięciem musisz wywołać metodę notifyParentResize() dwukrotnie z powodów poniżej.

  1. Po zakończeniu czynności związanych z jednokrotnym dotknięciem zbliżenie elementu iframe zostaje ukryte.

  2. Wartość atrybutu offsetHeight elementu wynosi 0, gdy jest on ukryty.

Podczas pierwszego wywołania możesz zmienić wysokość elementu iframe na 1 piksel, aby był on widoczny. Gdy będzie dostępna wartość atrybutu offsetHeight, możesz zmienić jego rozmiar.

Poniższy przykładowy kod pokazuje, jak zweryfikować pochodzenie elementu nadrzędnego i zmienić rozmiar pośredniego elementu iframe na potrzeby interfejsu użytkownika po jednym kliknięciu 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>

Usuwanie elementu iframe pośredniego w wersji UX

Musisz powiadomić stronę nadrzędną o treści, aby usunąć pośredni element iframe, gdy zakończy się proces UX. W tym celu możesz umieścić ten fragment kodu w kodzie odpowiedzi.

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

Jeśli proces UX jest pominięty, musisz wywołać metodę notifyParentClose.

Umieszczanie elementu iframe pośredniego na stronach HTML

Umieść ten fragment kodu na wszystkich stronach HTML, które chcesz wyświetlać w Google One. Kliknij, aby wyświetlić:

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

Atrybut data-src to identyfikator URI pośredniego elementu iframe.