Zintegruj jednym dotknięciem za pomocą elementu iframe

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Google One Tap można renderować w elemencie iframe (nazywanym też pośrednim elementem iframe) hostowanym przez Twoją witrynę. Gdy użyjesz pośredniego elementu iframe, w interfejsie One Tap UX nie zauważysz żadnych zauważalnych zmian.

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

  • Wbudowany interfejs UX i jednoczesny proces UX

    Po zakończeniu UX w Onetrasie możesz wyświetlić kolejny przepływ UX w pośrednim elemencie iframe. Oznacza to, że na jednym miejscu można umieścić zarówno treści jednym dotknięciem, jak i kolejne wersje UX. Patrz poniższy przykład.

    Przykład umieszczonego interfejsu UX ze pośrednim elementem iframe.

    Bez pośredniego elementu iframe zwykle trzeba wyświetlić całą nawigację na stronie, aby wyświetlić kolejne czynności UX, które w niektórych przypadkach mogą być uciążliwe.

  • Integracja raz i wyświetlanie w dowolnym miejscu

    Cały kod integracji One Touch (wywołanie interfejsu One Tap i kolejna obsługa UX) jest umieszczony w pośrednim elemencie iframe. Na stronach z treścią, na których może się pojawić jedno dotknięcie, wystarczy umieścić pośredni element iframe.

    Ta architektura pozwala oddzielić problemy i zmniejszyć koszty integracji oraz konserwacji.

  • Ogranicz zakres ekspozycji tokena identyfikatora.

    Tokeny identyfikatora są bezpośrednio wykorzystywane przez pośredni element iframe. Nigdy nie są udostępniane na stronach z treścią. Ta architektura może znacznie zmniejszyć zakres ekspozycji tokenów identyfikatorów.

    Pośredni adres iframe sprawdza się też w przypadku witryn, które mają już dedykowaną subdomenę (np. login.example.com) i wiele subdomen (np. sport, example.com lub gry.example.com).

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

    Zgodnie z wymogami zasad OAuth Google wszystkie domeny, które otrzymują odpowiedzi OAuth, muszą być wcześniej zarejestrowane w konsoli interfejsu API Google. W ramach normalnej integracji z One Tap deweloperzy muszą zarejestrować się wcześniej w domenach, które mogą wyświetlać się w One One, ponieważ tokeny identyfikacyjne są przekazywane z powrotem do tych domen. Niektóre witryny pozwalają użytkownikom dynamicznie tworzyć subdomeny, których niemożliwe jest wstępne zarejestrowanie. Z tego powodu w ich przypadku nie można obecnie wyświetlać rozszerzeń jednym 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 być wstępnie zarejestrowana. Nie trzeba rejestrować domen stron z treścią, ponieważ nie mogą one być udostępniane tym stronom.

  • Obsługa AMP.

    Domyślnie płatności Google One nie można wyświetlać na stronach AMP z kilku powodów.

    1. Niestandardowa biblioteka JS lub kod jest niedozwolony.

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

    Ten problem można rozwiązać, korzystając z pośredniej architektury elementu iframe. Po integracji z funkcją jednego kliknięcia w pośrednim elemencie iframe programiści mogą umieścić go na stronach AMP, dodając komponent <amp-onetap-google>.

    Ten sam pośredni element iframe można wykorzystać zarówno na stronach AMP, jak i na stronach innych niż AMP HTML.

  • Ryzyko prywatności.

    Deweloperzy muszą podjąć działania, by zapobiec umieszczeniu pośrednich elementów iframe w nieoczekiwanych domenach. Na przykład witryna złośliwy.com może umieszczać Twój pośredni element iframe i tym samym usuwać z witryny stronę Twojej witryny UX. Z tego powodu użytkownicy często obawiają się prywatności.

  • Zagrożenia dla bezpieczeństwa.

    Z powodu wspomnianego wyżej problemu z ramkowaniem pośredni element iframe nie powinien nigdy wysyłać do ramki nadrzędnej swoich danych poufnych ani dotyczących prywatności, takich jak tokeny identyfikatorów, wartości plików cookie sesji czy dane użytkowników. Nieprzestrzeganie tej reguły może narazić Twoje witryny na niebezpieczeństwo.

Renderuj jednym kliknięciem w pośrednim elemencie iframe

Aby wyświetlić jedno kliknięcie wewnątrz pośredniego elementu 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 będzie działać w pośrednim trybie elementu iframe. Jako wartość atrybutu możesz ustawić jedną domenę lub listę domen oddzielonych przecinkami. Obsługiwane są też subdomeny zawierające symbole wieloznaczne.

(Opcjonalnie) Renderowanie następujących elementów UX w pośrednim elemencie iframe

W odpowiedzi logowania możesz zwrócić dowolny kod HTML, który może wyświetlać część treści widocznych dla użytkowników. Możesz na przykład poprosić o dodatkowe informacje na profilu lub wyrazić zgodę na Warunki korzystania z usługi itp. Po przesłaniu strony możesz wyświetlić kolejne strony. Na przykład w przypadku płatności lub subskrypcji itp.

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>

Podsumowując, w przypadku pośredniego elementu iframe czynności związane z pełnym logowaniem i rejestracją mogą być umieszczane jako UX.

Na pierwszej stronie po UX jednym dotknięciem musisz wywołać metodę notifyParentResize() dwukrotnie z poniższych powodów.

  1. Po zakończeniu instalacji w przypadku UX elementu zbliżeniowego ustawiony jest pośredni element iframe.

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

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

Poniższy przykładowy kod pokazuje, jak zweryfikować źródło elementu nadrzędnego i zmienić rozmiar pośredniego elementu iframe dla interfejsu po wprowadzeniu funkcji UX jednym dotknięciem.

<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>

Usunięcie pośredniego elementu iframe z wykonania UX

Po zakończeniu procesu UX musisz powiadomić stronę nadrzędną o usunięciu pośredniego elementu iframe. W tym celu możesz umieścić w kodzie odpowiedzi logowania poniższy fragment kodu.

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

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

Umieść pośredni element iframe na stronach HTML

Umieść ten fragment kodu na wszystkich stronach HTML, które chcesz wyświetlić 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.