Integracja jednym dotknięciem za pomocą elementu iframe

Google One Tap może się wyświetlać w elemencie iframe (nazywanym dalej pośredni element iframe) hostowany w Twojej witrynie. Nie ma żadnej dostrzegalnej zmiana w interfejsie One Tap po użyciu pośredniego elementu iframe.

Integracja pośrednia z elementem iframe wiąże się z pewnymi elastycznością i ryzykiem:

  • Wbudowane funkcje UX umożliwiające jedno dotknięcie i późniejszy proces UX.

    Po zakończeniu obsługi jednym dotknięciem możesz wyświetlić kolejny proces w interfejsie pośredniego elementu iframe. Dzięki temu funkcje One Tap i kolejne funkcje UX mogą być wbudowane na bieżącą stronę treści. Patrz poniższy przykład.

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

    Bez pośredniego elementu iframe zazwyczaj wystarcza przejście na całą stronę, aby wyświetlania kolejnych elementów interfejsu, co w niektórych przypadkach może być uciążliwe.

  • Jednorazowa integracja i wyświetlanie w dowolnym miejscu

    Cały kod integracji jednym dotknięciem (wywoływanie interfejsu API One Tap i późniejsze UX obsługi) są umieszczone w pośrednim elemencie iframe. Na stronach z treścią w którym może wyświetlać się jednym dotknięciem, wystarczy umieścić iframe.

    Ta architektura pozwala na oddzielenie potencjalnych problemów i zmniejsza ryzyko związanych z integracją i konserwacją.

  • Ogranicz zakres ekspozycji tokena identyfikatora.

    Tokeny identyfikatorów są używane bezpośrednio przez pośredni element iframe. Są nigdy nie zostały ujawnione na stronach z treścią. Taka architektura może znacznie zmniejsz zakres ekspozycji tokenów tożsamości.

    Sposób pośredniego elementu iframe działa dobrze również w przypadku witryn, które już zawierają dedykowaną subdomenę związaną z logowaniem (np. login.example.com) i wiele subdomen związanych z treścią (np. sport.example.com i gry.example.com).

  • Wyświetlanie domen jednym dotknięciem

    Zgodnie z zasadami Google dotyczącymi protokołu OAuth wszystkie domeny otrzymujące protokół OAuth odpowiedzi trzeba zarejestrować z wyprzedzeniem w konsoli Google Cloud. Ze standardowym 1 Integracja za pomocą dotknięcia; deweloperzy muszą zarejestrować z wyprzedzeniem wszystkie domeny, które można zarejestrować jednym dotknięciem może zostać wyświetlona, ponieważ tokeny tożsamości będą do nich przekazywane z powrotem. Niektóre umożliwiają użytkownikom dynamiczne tworzenie subdomen, wcześniejsza rejestracja jest niemożliwa. W związku z tym nie można wyświetlać ekranu jednym dotknięciem w tych dynamicznie tworzonych subdomenach.

    Ten problem możesz rozwiązać, wykorzystując pośredni element iframe. W tym przypadku wcześniej można zarejestrować tylko domenę pośredniego elementu iframe. OK nie ma potrzeby rejestrowania domen stron z treścią, ponieważ tokeny identyfikatorów na dostęp do tych stron.

  • Zagrożenia dotyczące prywatności.

    Programiści muszą podjąć działania zapobiegające pojawianiu się pośrednich elementów iframe w nieoczekiwanych domenach. Na przykład złośliwe oprogramowanie.com może umieścić pośredniego elementu iframe, a tym samym wyświetlać na swojej stronie internetowej interfejs One Tap. Ten z pewnością wywoła wiele wątpliwości użytkowników związanych z prywatnością.

  • Zagrożenia dla bezpieczeństwa.

    Ze względu na wspomniany wyżej nieoczekiwany problem z kadrowaniem, średni Element iframe nie powinien nigdy wysyłać do elementu nadrzędnego danych wrażliwych dotyczących bezpieczeństwa ani prywatności np. tokeny tożsamości, wartości plików cookie sesji, dane użytkownika itd., jeśli nie podano przestrzeganie tej zasady może narazić Twoje witryny na niebezpieczeństwo.

Renderowanie jednym kliknięciem w pośrednim elemencie iframe

Aby wyświetlać jednym dotknięciem w pośrednim elemencie iframe, umieść ten kod do kodu 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żyjesz atrybutu data-allowed_parent_origin, usługa Google One Tap będzie działać. w trybie pośredniego elementu iframe. Możesz podać jedną domenę lub nazwę domeny rozdzielaną przecinkami listy domen jako wartości atrybutu. Obsługiwane są również subdomeny z symbolami wieloznacznymi.

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

W odpowiedzi na logowanie możesz zwrócić dowolny kod HTML, który może zawierać treści, które są widoczne dla użytkowników. Na przykład prośba o podanie dodatkowych informacji z profilu, lub uzgadnianie Warunków korzystania z usługi. Po przesłaniu strony możesz wyświetlać kolejne strony. Może to być na przykład płatność lub subskrypcja.

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średnim elementom iframe umożliwiamy pełne logowanie lub proces rejestracji. wdrożyć jako osadzony interfejs UX.

W przypadku pierwszej strony po UX One Tap musisz wywołać notifyParentResize() dwukrotnie z następujących powodów.

  1. Pośredni element iframe jest ukryty, gdy użytkownik korzysta z funkcji jednym dotknięciem.

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

Przy pierwszym wywołaniu możesz zmienić rozmiar elementu iframe do 1 piksela, widoczne. Gdy wartość atrybutu offsetHeight będzie dostępna, możesz zmień jego rozmiar na odpowiednią wysokość.

Ten przykładowy kod pokazuje, jak sprawdzić pochodzenie elementu nadrzędnego i zmienić rozmiar elementu pośredni element iframe dla UI po UX One Tap.

<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 po zakończeniu UX

Musisz powiadomić stronę nadrzędną o usunięciu pośredniego elementu iframe, gdy i zadbać o wygodę użytkowników. W tym celu możesz umieścić następujący fragment kodu w sekcji kod odpowiedzi na logowanie.

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

Jeśli pominiesz proces UX, należy wywołać metodę notifyParentClose .

Umieszczanie pośredniego elementu iframe na stronach HTML

Umieść ten fragment kodu na dowolnych stronach HTML, na których chcesz używać Google One Tap do wyświetlenia:

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