Warnung:Diese Daten werden gemäß der Richtlinie zu Google-Nutzerdaten bereitgestellt. Bitte lesen Sie sich die Richtlinien durch und halten Sie sie ein. Andernfalls kann das zu einem Projekt oder einem Konto führen.

One Tap über einen iFrame einbinden

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

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

Die verknüpfende iFrame-basierte Integration birgt gewisse Flexibilität und Risiken:

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

    Nach Abschluss des One Tap-UX-Vorgangs können Sie den folgenden UX-Ablauf im Zwischen-iFrame sehen. Dadurch können One Tap und die nachfolgende UX auf der aktuellen Inhaltsseite eingebettet werden. Ein Beispiel dafür sehen Sie unten.

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

    Ohne den Zwischen-iFrame wäre in der Regel eine ganzseitige Navigation für die Anzeige des nachfolgenden UX-Ablaufs erforderlich, was in manchen Fällen störend sein kann.

  • Einmal einbinden und überall anzeigen:

    Der gesamte One Tap-Integrationscode (One Tap-API-Aufruf und nachfolgendes UX-Handling) wird im Zwischen-iFrame eingeschlossen. Auf Inhaltsseiten, auf denen One Tap angezeigt werden kann, musst du lediglich den Zwischen-iFrame einbetten.

    Mit dieser Architektur lassen sich Probleme aufteilen und die Integrations- und Wartungskosten werden gesenkt.

  • Den Geltungsbereich der ID-Tokens beschränken.

    Die ID-Tokens werden direkt vom Zwischen-iFrame verbraucht. Sie werden nie auf den Inhaltsseiten präsentiert. Durch diese Architektur kann der Bereich für die Offenlegung von ID-Tokens erheblich sinken.

    Der iFrame-Zwischenpfad eignet sich auch gut für Websites, die bereits eine eigene angemeldete Subdomain (z. B. login.beispiel.de) und mehrere inhaltsbezogene Subdomains (z. B. sport.beispiel.de und spiele.beispiel.de) haben.

  • Mit einem Tippen angezeigte Domains

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

    Dieses Problem lässt sich durch die Verwendung des Zwischen-iFrames beheben. In diesem Fall muss nur die Domain des Zwischen-iFrames vorregistriert werden. Die Domains der Inhaltsseite müssen nicht registriert werden, da ID-Tokens auf diesen Inhaltsseiten nicht angezeigt werden.

  • AMP-Unterstützung.

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

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

    2. Der AMP-Cache kann die Seitenform in einer anderen Domain (AMP-Viewer) darstellen.

    Dieses Problem kann mithilfe der iFrame-Architektur behoben werden. Nach der Integration von One Tap in einen Zwischen-iFrame können Entwickler sie in AMP-Seiten einbetten, indem sie eine Komponente <amp-onetap-google> hinzufügen.

    Derselbe zwischengeschaltete iFrame kann von AMP-Seiten und 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. So kann beispielsweise beispiel.de Ihren Zwischen-iFrame einbetten und so die One-Touch-UX auf der Website ausblenden. Dies führt definitiv zu Datenschutzproblemen von Endnutzern.

  • Sicherheitsrisiken.

    Aufgrund des oben genannten unerwarteten Framing-Problems sollte Ihr Zwischen-iFrame niemals Sicherheits- oder Datenschutzdaten an den übergeordneten Frame senden, wie etwa ID-Tokens, Sitzungscookie-Werte, Nutzerdaten usw. Wenn Sie diese Regel nicht einhalten, können Ihre Websites gefährdet werden.

Einmal Tippen im Zwischen-iFrame rendern

Um One Tap innerhalb des Zwischen-iFrames anzuzeigen, platzierst du das folgende Code-Snippet in den HTML-Code des Zwischen-iFrames:

<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 Zwischen-iFrame-Modus ausgeführt. Sie können eine Domain oder eine durch Kommas getrennte Domainliste als Attributwert festlegen. Außerdem werden Platzhalter-Subdomains unterstützt.

Optional: Nachfolgende UX im iFrame für Fortgeschrittene rendern

Bei der Anmeldung kannst du HTML-Code zurückgeben, mit dem für Endnutzer sichtbare Inhalte angezeigt werden. Du kannst beispielsweise nach zusätzlichen Profilinformationen fragen oder den Nutzungsbedingungen zustimmen. Nachdem die Seite eingereicht wurde, kannst du weitere Seiten anzeigen. Beispiele: Zahlung oder Abo

Sie können auch die Größe des Zwischen-iFrames folgendermaßen anpassen:

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

Mit einem Zwischen-iFrame können die vollständigen Anmelde- oder Registrierungs-UIs als eingebettete UX implementiert werden.

Für die erste Seite nach One Tap-UX muss die Methode notifyParentResize() aus den folgenden Gründen zweimal aufgerufen werden.

  1. Der Zwischen-iFrame ist ausgeblendet, wenn die One-Touch-UX abgeschlossen ist.

  2. Der Attributwert offsetHeight 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 offsetHeight-Attributwert verfügbar ist, kannst du die Größe auf die passende Höhe anpassen.

Der folgende Beispielcode zeigt, wie der übergeordnete Ursprung validiert und die Größe des Zwischen-iFrames für die UI nach One Tap-UX optimiert 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>

iFrame mit mittlerem UX-Seitenverhältnis entfernen

Sie müssen die übergeordnete Inhaltsseite benachrichtigen, um den Zwischen-iFrame zu entfernen, wenn der UX-Ablauf abgeschlossen ist. Zu diesem Zweck können Sie das folgende Code-Snippet in Ihren Antwortcode 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.

Mittleren iFrame in HTML-Seiten einbetten

Füge das folgende Code-Snippet auf allen HTML-Seiten ein, die über Google One angezeigt werden sollen:

<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 Ihres Zwischen-iFrames.