Integracja jednym dotknięciem za pomocą elementu iframe

Google One Tap można renderować w elemencie iframe (nazywanym dalej Pośrednim elementem iframe) hostowanym przez Twoją witrynę. Gdy używany jest pośredni element iframe, nic się nie zmienia w interfejsie One Tap jednym dotknięciem.

Integracja pośredniego elementu iframe wiążą się z pewnymi elastycznością i zagrożeniami:

  • Wbudowany interfejs One Tap i późniejszy proces UX.

    Po zakończeniu sesji UX jednym dotknięciem możesz wyświetlić dalszy przepływ UX w pośrednim elemencie iframe. Dlatego zarówno jedno dotknięcie, jak i wygoda użytkownika mogą być umieszczone na bieżącej stronie z treściami. Patrz poniższy przykład.

    Przykład umieszczonego elementu UX z pośrednim elementem iframe.

    Bez pośredniego elementu iframe zazwyczaj potrzebujesz pełnego przejścia na stronę, aby wyświetlić następny proces obsługi, co w niektórych przypadkach może być uciążliwe.

  • Jednorazowa integracja i wyświetlanie reklam w dowolnym miejscu.

    Cały kod integracji One Tap (wywołanie interfejsu API jednym dotknięciem i późniejsza obsługa UX) jest zawarty w pośrednim elemencie iframe. Na stronach z treścią, które mogą być wyświetlane jednym dotknięciem, wystarczy umieścić pośredni element iframe.

    Ta architektura pozwala na rozdzielenie potencjalnych problemów, a tym samym zmniejsza koszty integracji i utrzymania.

  • Ogranicz zakres ekspozycji tokena identyfikatora.

    Tokeny tożsamości są wykorzystywane bezpośrednio przez pośredni element iframe. Nie są one nigdy widoczne na stronach z treścią. Ta architektura może znacznie obniżyć zakres ekspozycji tokenów identyfikatorów.

    Pośredni element iframe działa też w witrynach, które mają już dedykowaną subdomenę logowania (np. login.example.com) i wiele subdomen związanych z treścią (np. sports.example.com i gry.example.com).

  • Wyświetlanie domen jednym dotknięciem

    Zgodnie z zasadami OAuth Google wszystkie domeny, które otrzymują odpowiedzi OAuth, muszą być wcześniej zarejestrowane w konsoli Google Cloud. W przypadku zwykłej integracji jednym dotknięciem deweloperzy muszą zarejestrować wszystkie domeny, które mogą być wyświetlane za pomocą jednego dotknięcia, ponieważ tokeny tożsamości będą przekazywane z powrotem do tych domen. Niektóre witryny umożliwiają użytkownikom dynamiczne tworzenie subdomen, których nie można wcześniej zarejestrować. W związku z tym w tych dynamicznie tworzonych subdomenach nie można wyświetlać reklam jednym dotknięciem.

    Można go rozwiązać, wykorzystując pośredni element iframe. W takim przypadku tylko domena pośredniego elementu iframe musi zostać wcześniej zarejestrowana. Nie ma potrzeby rejestrowania domen stron z treścią, ponieważ tokeny identyfikatorów nie są widoczne dla tych stron.

  • Obsługa AMP.

    Domyślnie Google One Tap nie może wyświetlać się na stronach AMP z podanych niżej powodów.

    1. Niestandardowa biblioteka lub kod JS jest niedozwolone.

    2. Pamięć podręczna AMP może renderować stronę w innej domenie (przeglądarki AMP).

    Ten problem można rozwiązać, wykorzystując architekturę pośredniego elementu iframe. Po zakończeniu integracji One Tap 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ć ponownie zarówno na stronach AMP, jak i na stronach innych niż AMP HTML.

  • Zagrożenia dotyczące prywatności.

    Deweloperzy muszą podjąć odpowiednie działania zapobiegające osadzeniu pośrednich elementów iframe w nieoczekiwanych domenach. Na przykład złośliwe.com może umieścić pośredni element iframe i w ten sposób wyświetlać w swojej witrynie wrażenia użytkownika jednym dotknięciem. Z pewnością wywoła to wiele wątpliwości użytkowników dotyczących prywatności.

  • Zagrożenia dla bezpieczeństwa.

    Ze względu na wspomniany wyżej niespodziewany problem z ramkowaniem pośrednika iframe nie powinna nigdy wysyłać do swojej ramki nadrzędnej danych poufnych dotyczących bezpieczeństwa lub prywatności, takich jak tokeny identyfikatorów, wartości plików cookie sesji czy dane użytkownika. Nieprzestrzeganie tej reguły może narazić Twoje witryny na niebezpieczeństwo.

Renderuj jednym dotknięciem w pośrednim elemencie iframe

Aby wyświetlać jedno dotknię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 używany jest atrybut data-allowed_parent_origin, Google One Tap działa w trybie pośredniego elementu iframe. Jako wartość atrybutu możesz ustawić jedną domenę lub listę domen rozdzielonych przecinkami. Obsługiwane są też subdomeny z symbolami wieloznacznymi.

(Opcjonalnie) Renderuj kolejny UX w pośrednim elemencie iframe

W odpowiedzi na żądanie logowania możesz zwrócić dowolny kod HTML, który może powodować wyświetlanie użytkownikom części widocznej treści. Dotyczy to na przykład próśb o podanie dodatkowych informacji na profilu lub wyrażenie zgody na Warunki korzystania z usługi. Po przesłaniu strony można wyświetlić kolejne strony. np. za płatność lub subskrypcję.

Możesz zmienić rozmiar pośredniego elementu iframe:

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

Podsumowując, dzięki pośredniemu elementowi iframe proces pełnego logowania lub rejestracji można zaimplementować jako wbudowany UX.

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

  1. Pośredni element iframe jest ukryty po zakończeniu konfiguracji UX jednym dotknięciem.

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

W pierwszym wywołaniu możesz zmienić rozmiar elementu iframe na 1 piksel, aby był widoczny. Następnie, gdy wartość atrybutu offsetHeight będzie dostępna, możesz zmienić jej rozmiar do odpowiedniej wysokości.

Poniższy przykładowy kod pokazuje, jak zweryfikować źródło elementu nadrzędnego i zmienić rozmiar pośredniego elementu iframe dla interfejsu po 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>

Usuń pośredni element iframe w elemencie UX Gotowe

Musisz powiadomić nadrzędną stronę z treścią, by po zakończeniu procesu UX usunęła pośredni element 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 dowolnych stronach HTML, które mają się wyświetlać w 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>

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