One Tap mithilfe eines iFrame einbinden

Google One Tap kann in einem iFrame (nachfolgend als Zwischen-iFrame bezeichnet) gerendert werden, der von Ihrer eigenen Website gehostet wird. Wenn ein Zwischen-iFrame verwendet wird, sind auf der One Tap-UX keine erkennbaren Veränderungen erkennbar.

Die zwischengeschaltete iFrame-basierte Integration birgt einige Flexibilität und Risiken:

  • Eingebettete UX für One Tap und anschließenden UX-Flow.

    Nachdem die One Tap-UX abgeschlossen ist, können Sie den nachfolgenden UX-Ablauf im Zwischen-iFrame anzeigen. So können sowohl One Tap als auch nachfolgende UX in die aktuelle Inhaltsseite eingebettet werden. Ein Beispiel dafür sehen Sie unten.

    Ein Beispiel für die eingebettete UX mit Zwischen-iFrame.

    Ohne den dazwischenliegenden iFrame benötigen Sie normalerweise eine vollständige Seitennavigation, um den nachfolgenden UX-Ablauf anzuzeigen, was in einigen Fällen störend sein kann.

  • Integrieren Sie „Einmal“ und „Überall anzeigen“.

    Der gesamte One Tap-Integrationscode (One Tap API-Aufruf und nachfolgende UX-Verarbeitung) wird in den Zwischen-iFrame gekapselt. Auf Inhaltsseiten, auf denen One Tap möglicherweise angezeigt wird, müssen Sie lediglich den Zwischen-iFrame einbetten.

    Diese Architektur ermöglicht eine Trennung von Belangen und reduziert somit Ihre Integrations- und Wartungskosten.

  • Beschränken Sie den Umfang des ID-Tokens.

    Die ID-Tokens werden direkt vom zwischengeschalteten iFrame verarbeitet. Die Inhaltsseiten werden ihnen nicht angezeigt. Durch diese Architektur kann der Umfang der Offenlegung von ID-Tokens drastisch reduziert werden.

    Der Zwischen-iFrame funktioniert auch gut bei Websites, die bereits eine dedizierte anmeldungsbezogene Subdomain (z. B. login.beispiel.de) und mehrere inhaltsbezogene Subdomains (z. B. sport.beispiel.de und spiele.beispiel.de) haben.

  • One Tap Displaying Domains (Domains mit nur einem Tippen anzeigen):

    Gemäß den OAuth-Richtlinien von Google müssen alle Domains, die OAuth-Antworten erhalten, in der Google Cloud Console vorregistriert werden. Bei der normalen One Tap-Integration müssen Entwickler alle Domains vorregistrieren, die One Tap möglicherweise anzeigen, da ID-Tokens an diese Domains zurückgesendet werden. Bei einigen Websites können Nutzer dynamisch Subdomains erstellen, die sich nicht vorregistrieren lassen. Daher kann One Tap in diesen dynamisch erstellten Subdomains nicht angezeigt werden.

    Dieses Problem kann mithilfe des dazwischenliegenden iFrames behoben werden. In diesem Fall muss nur die Domain des dazwischenliegenden iFrames vorregistriert werden. Es ist nicht nötig, die Domains der Inhaltsseiten zu registrieren, da ID-Tokens für diese Inhaltsseiten nicht freigegeben werden.

  • AMP-Unterstützung

    Standardmäßig kann Google One Tap auf AMP-Seiten aus verschiedenen Gründen nicht angezeigt werden.

    1. Benutzerdefinierte JS-Bibliothek oder benutzerdefinierter Code sind nicht zulässig.

    2. Der AMP-Cache kann die Seite aus einer anderen Domain (AMP-Viewer) rendern.

    Dieses Problem kann durch die Nutzung der iFrame-Zwischenarchitektur behoben werden. Nachdem One Tap in einen zwischengeschalteten iFrame eingebunden wurde, können Entwickler ihn in AMP-Seiten einbetten, indem sie eine <amp-onetap-google>-Komponente hinzufügen.

    Derselbe Zwischen-iFrame kann sowohl von AMP-Seiten als auch von HTML-Seiten ohne AMP wiederverwendet werden.

  • Datenschutzrisiken:

    Entwickler müssen Maßnahmen ergreifen, um zu verhindern, dass die dazwischenliegenden iFrames in unerwartete Domains eingebettet werden. So kann es z. B. vorkommen, dass böswillige.com den Zwischen-iFrame einbettet und so Ihre One Tap-UX auf der Website anzeigt. Dies wird auf jeden Fall viele Bedenken hinsichtlich des Datenschutzes bei Endnutzern bereiten.

  • Sicherheitsrisiken.

    Aufgrund des oben genannten unerwarteten Framing-Problems sollte der Zwischen-iFrame niemals sensible Sicherheits- oder Datenschutzdaten wie ID-Tokens, Sitzungscookiewerte, Nutzerdaten usw. an den übergeordneten Frame senden. Wird diese Regel nicht eingehalten, kann dies eine Gefahr für Ihre Websites darstellen.

Mit nur einem Tippen im zwischengeschalteten iFrame rendern

Damit One Tap im Zwischen-iFrame angezeigt wird, fügen Sie das folgende Code-Snippet in den HTML-Code des Zwischen-iFrames ein:

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

Wenn das Attribut data-allowed_parent_origin verwendet wird, wird Google One Tap im iFrame-Zwischenmodus ausgeführt. Sie können eine Domain oder eine durch Kommas getrennte Domainliste als Attributwert festlegen. Platzhalter-Subdomains werden ebenfalls unterstützt.

(Optional) Nachfolgende UX im zwischengeschalteten iFrame rendern

In der Anmeldeantwort können Sie einen beliebigen HTML-Code zurückgeben, der möglicherweise für Endnutzer sichtbare Inhalte anzeigt. z. B. durch zusätzliche Profilinformationen oder die Zustimmung zu Nutzungsbedingungen. Nachdem die Seite eingereicht wurde, können Sie weitere Seiten anzeigen lassen. z. B. für eine Zahlung oder ein Abo.

Sie können die Größe des dazwischenliegenden iFrames anpassen:

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

Zusammenfassend lässt sich sagen, dass mit einem dazwischenliegenden iFrame der gesamte Anmelde- oder Registrierungsvorgang als eingebettete UX implementiert werden kann.

Auf der ersten Seite nach der One Tap-UX müssen Sie die Methode notifyParentResize() aus den folgenden Gründen zweimal aufrufen.

  1. Der Zwischen-iFrame wird auf „Ausgeblendet“ gesetzt, wenn One Tap UX fertig ist.

  2. Der Attributwert offsetHeight eines Elements ist 0, wenn es ausgeblendet ist.

Im ersten Aufruf können Sie die Höhe des iFrames auf 1 Pixel ändern, um ihn sichtbar zu machen. Sobald der Attributwert offsetHeight verfügbar ist, können Sie die Größe an die passende Höhe anpassen.

Der folgende Beispielcode zeigt, wie Sie den übergeordneten Ursprung validieren und die Größe des Zwischen-iFrames für die UI nach One Tap UX anpassen.

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

Zwischen-iFrame in UX Done entfernen

Sie müssen die übergeordnete Inhaltsseite bitten, den dazwischenliegenden iFrame zu entfernen, wenn der UX-Vorgang abgeschlossen ist. Zu diesem Zweck können Sie das folgende Code-Snippet in Ihren Anmeldeantwortcode einfügen.

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

Wenn der UX-Ablauf übersprungen wird, muss stattdessen die Methode notifyParentClose aufgerufen werden.

Direkte iFrame-Tags in HTML-Seiten einbetten

Füge das folgende Code-Snippet auf allen HTML-Seiten ein, die Google One Tap anzeigen soll:

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

Das Attribut data-src ist der URI des Zwischen-iFrames.