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.
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.
Niestandardowa biblioteka lub kod JS jest niedozwolony.
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.
Po zakończeniu czynności związanych z jednokrotnym dotknięciem zbliżenie elementu iframe zostaje ukryte.
Wartość atrybutu
offsetHeightelementu 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.