One Tap über einen iFrame einbinden

Google One Tap kann in einem iFrame (im Folgenden als „zwischengeschalteter iFrame“ bezeichnet) gerendert werden, der von deiner eigenen Website gehostet wird. Es gibt keine wahrnehmbaren Änderungen an der One Tap-UX, wenn ein zwischengeschalteter iFrame verwendet wird.

Die zwischengeschaltete iFrame-basierte Integration bringt einige Flexibilitäten und Risiken mit sich:

  • Eingebettete UX für One Tap und nachfolgenden UX-Ablauf.

    Nach Abschluss des One Tap-UX-Vorgangs können Sie den nachfolgenden UX-Ablauf im Zwischen-iFrame anzeigen. Daher können sowohl One Tap als auch die 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ötigst du normalerweise eine ganzseitige Navigation, um den nachfolgenden UX-Ablauf anzuzeigen, der in manchen Fällen aufdringlich sein kann.

  • Einmal einbinden und überall anzeigen:

    Der gesamte One Tap-Integrationscode (One Tap API-Aufruf und nachfolgende UX-Verarbeitung) ist im iFrame zwischengeschaltet. Auf Inhaltsseiten, wo One Tap angezeigt werden kann, musst du lediglich den Zwischen-iFrame einbetten.

    Diese Architektur ermöglicht die Trennung von Bedenken und senkt so die Kosten für Integration und Wartung.

  • ID-Token-Beschränkungsbereich einschränken

    Die ID-Tokens werden direkt vom zwischengeschalteten iFrame verarbeitet. Sie werden niemals auf Inhaltsseiten präsentiert. Durch diese Architektur kann der Bereich für die ID-Tokens erheblich reduziert werden.

    Der dazwischenliegende iFrame funktioniert auch auf Websites, die bereits eine eigene, anmeldungsbezogene Subdomain (z. B. login.beispiel.de) und mehrere inhaltsbezogene Subdomains (z. B. sport.beispiel.de und spiele.beispiel.de) haben.

  • Mit einem Tippen Domains anzeigen:

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

    Dieses Problem lässt sich mithilfe des iFrames beheben. In diesem Fall muss nur die Domain des dazwischenliegenden iFrames vorregistriert werden. Die Domains der Inhaltsseite müssen nicht registriert werden, da für diese Inhaltsseiten keine ID-Tokens verfügbar sind.

  • AMP-Unterstützung.

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

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

    2. Im AMP-Cache können Seiten aus einer anderen Domain (AMP-Viewer) gerendert werden.

    Dieses Problem lässt sich mithilfe der iFrame-Architektur beheben. Nachdem die One Tap-Integration in einen zwischengeschalteten iFrame abgeschlossen wurde, können Entwickler sie auf AMP-Seiten einbetten, indem sie eine Komponente „<amp-onetap-google&gt>“ hinzufügen.

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

  • Datenschutzrisiken.

    Entwickler müssen Maßnahmen ergreifen, um zu verhindern, dass die Zwischen-iFrames in unerwartete Domains eingebettet werden. Beispielsweise kann böswillige Website den zwischengeschalteten iFrame einbetten und somit die One Tap-UX auf der Website ablehnen. Dadurch werden Endnutzer auf jeden Fall viele Bedenken hinsichtlich des Datenschutzes haben.

  • Sicherheitsrisiken.

    Aufgrund des oben genannten Problems mit dem unerwarteten Framing sollte der zwischengeschaltete iFrame keine sicherheits- oder datenschutzbezogenen Daten wie übergeordnete Tokens, Sitzungs-Cookie-Werte, Nutzerdaten usw. an den übergeordneten Frame senden. Andernfalls kann Ihre Website gefährdet werden.

Einmal antippen im Zwischen-Frame

Damit One Tap im Zwischen-iFrame angezeigt wird, müssen Sie das folgende Code-Snippet in den HTML-Code des dazwischenliegenden iFrames einfügen:

<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 angezeigt wird, wird Google One Tap im iFrame-Zwischenmodus ausgeführt. Sie können eine Domain oder eine durch Kommas getrennte Domainliste als Attributwert festlegen. Auch Subdomains mit Platzhaltern werden unterstützt.

Optional: Nachfolgende UX im Zwischen-Frame rendern

In der Log-in-Antwort können Sie einen beliebigen HTML-Code zurückgeben, der Endnutzern eventuell sichtbare Inhalte anzeigt. z. B. nach zusätzlichen Profilinformationen fragen oder den Nutzungsbedingungen zustimmen. Nachdem die Seite eingereicht wurde, kannst du weitere Seiten anzeigen. Zum Beispiel für Zahlungen oder Abos usw.

Sie haben auch die Möglichkeit, die Größe des dazwischenliegenden iFrames wie unten dargestellt anzupassen.

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

Kurz gesagt: Bei einem Zwischen-iFrame können die vollständigen Schritte zur Anmeldung oder Registrierung als eingebettete UX implementiert werden.

Für die erste Seite nach der Funktion „One Tap UX“ musst du die Methode notifyParentResize() aus den folgenden Gründen zweimal aufrufen.

  1. Der dazwischenliegende iFrame ist auf „Ausgeblendet“ festgelegt, wenn die Bedienung über One Tap abgeschlossen ist.

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

Im ersten Aufruf können Sie die iFrame-Höhe auf 1 Pixel ändern, damit sie sichtbar ist. Sobald der Attributwert offsetHeight verfügbar ist, können Sie seine Größe auf die passende Höhe anpassen.

Der folgende Beispielcode zeigt, wie der übergeordnete Ursprung validiert und die Größe des dazwischenliegenden iFrames für die UI nach One Tap UX geändert wird.

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

Mittleren iFrame bei UX-Installation entfernen

Sie müssen die übergeordnete Inhaltsseite benachrichtigen, um den Zwischen-iFrame zu entfernen, wenn der UX-Ablauf abgeschlossen ist. Fügen Sie dazu das folgende Code-Snippet in den Antwortcode ein.

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

Identisches iFrame in HTML-Seiten einbetten

Fügen Sie das folgende Code-Snippet auf jeder HTML-Seite ein, auf der Google One angezeigt werden 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 zwischengeschalteten iFrames.