One Tap mithilfe eines iFrame einbinden

Google One Tap kann innerhalb eines iFrames gerendert werden. (iFrame) zwischengeschalteter Content, der auf Ihrer eigenen Website gehostet wird. Es gibt keine wahrnehmbaren bei One Tap UX ändern, wenn ein dazwischenliegender iFrame verwendet wird.

Die iFrame-basierte Zwischenintegration bringt einige Flexibilität und Risiken mit sich:

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

    Nach Abschluss von One Tap UX können Sie den nachfolgenden UX-Ablauf innerhalb der in einem Zwischen-iFrame. So können One Tap und nachfolgende UX sowohl in die aktuelle Content-Seite einfügen. Ein Beispiel dafür sehen Sie unten.

    Ein Beispiel für die eingebettete UX mit dazwischenliegendem iFrame.

    Ohne den Zwischen-iFrame benötigen Sie normalerweise eine Ganzseitennavigation, den nachfolgenden UX-Flow abbilden, der in einigen Fällen aufdringlich sein kann.

  • Einmal einbinden und überall präsentieren:

    Den gesamten One Tap-Integrationscode (One Tap API-Aufruf und nachfolgende UX). Verarbeitung) im zwischengeschalteten iFrame gekapselt. Auf Inhaltsseiten wo One Tap angezeigt werden kann, müssen Sie nur die Zwischen- iFrame.

    Diese Architektur ermöglicht die Trennung von Problembereichen und reduziert Integrations- und Wartungskosten.

  • Schränken Sie den Zugriffsbereich des ID-Tokens ein.

    Die ID-Tokens werden direkt vom dazwischenliegenden iFrame verbraucht. Sie sind die Inhaltsseiten nie sichtbar sind. Diese Architektur kann den Angriffsbereich von ID-Tokens verringern.

    Diese Methode eignet sich auch für Websites, die bereits eine eigene Log-in-bezogene Subdomain (z. B. login.beispiel.de) und mehrere inhaltsbezogene Sub-Domains, z. B. sport.beispiel.de und spiele.beispiel.de.

  • One Tap-Anzeigen von Domains:

    Gemäß den OAuth-Richtlinien von Google müssen alle Domains, die OAuth erhalten, Antworten müssen in der Google Cloud Console vorregistriert sein. Mit normalem One Tippintegration müssen Entwickler alle Domains vorregistrieren, die von One Tap angezeigt werden, da ID-Tokens an diese Domains zurückgegeben werden. Einige Websites ihren Nutzern die dynamische Erstellung von Sub-Domains ermöglichen, die vorregistriert werden kann. Daher kann One Tap in dieser dynamisch erstellten Subdomains.

    Dieses Problem kann mithilfe des dazwischen liegenden iFrames behoben werden. In diesem Fall nur die Domain des zwischengeschalteten iFrames muss vorregistriert werden. Es Domains der Content-Seiten müssen nicht registriert werden, da ID-Tokens Content-Seiten ausgeliefert wird.

  • Datenschutzrisiken.

    Entwickler müssen Maßnahmen ergreifen, um zu verhindern, dass die dazwischenliegenden iFrames in unerwartete Domains eingebettet. Beispielsweise kann böswillig.com Ihre in einen Zwischen-iFrame ein. Dadurch wird Ihre One Tap-UX auf der Website angezeigt. Dieses wird Endnutzer auf jeden Fall für Datenschutzbedenken sorgen.

  • Sicherheitsrisiken.

    Aufgrund des oben genannten unerwarteten Framing-Problems iFrame sollten niemals sicherheitsrelevante oder datenschutzsensible Daten an das übergeordnete Element senden. wie ID-Tokens, Sitzungscookiewerte, Nutzerdaten usw. Wenn Sie diese Regel einhalten, sind Ihre Websites möglicherweise gefährden.

One Tap im dazwischenliegenden iFrame rendern

Platzieren Sie den folgenden Code, um One Tap innerhalb des zwischengeschalteten iFrames anzuzeigen in den HTML-Code des zwischengeschalteten 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 verwendet wird, wird Google One Tap ausgeführt iFrame-Zwischenmodus aktiviert ist. Sie können eine Domain oder eine kommagetrennte Domainliste als Attributwert hinzu. Platzhalter-Subdomains werden ebenfalls unterstützt.

(Optional) Rendering der nachfolgenden UX im Zwischen-iFrame

In der Anmeldeantwort können Sie einen beliebigen HTML-Code zurückgeben, der möglicherweise einige für Endnutzer sichtbar ist. Wenn Sie z. B. nach zusätzlichen Profilinformationen fragen, oder der Zustimmung zu den Nutzungsbedingungen. Nachdem die Seite eingereicht wurde, können Sie weitere Seiten anzeigen. beispielsweise für eine Zahlung oder ein Abo.

Sie können die Größe des zwischengeschalteten 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 die vollständigen UX-Abläufe bei der Anmeldung oder Anmeldung möglich sind. als eingebettetes UX-Design implementiert werden.

Auf der ersten Seite nach der UX-Funktion von One Tap musst du die notifyParentResize() aufrufen aus folgenden Gründen zweimal verwenden.

  1. Der zwischengeschaltete iFrame wird ausgeblendet, 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 iFrame-Höhe auf 1 Pixel ändern, sichtbar sind. Sobald der Attributwert offsetHeight verfügbar ist, können Sie passen Sie die Höhe an.

Der folgende Beispielcode zeigt, wie Sie den übergeordneten Ursprung validieren und die Größe des Zwischen-iFrame für die Benutzeroberfläche nach One Tap 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>

Entfernen des dazwischenliegenden iFrames in UX Done

Sie müssen die Seite mit den übergeordneten Inhalten benachrichtigen, damit der dazwischenliegende iFrame entfernt wird, wenn der UX-Flow abgeschlossen ist. Zu diesem Zweck können Sie das folgende Code-Snippet Ihren Anmeldeantwortcode.

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

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

IFrame in HTML-Seiten einbetten

Füge das folgende Code-Snippet in alle HTML-Seiten ein, auf denen Google One Tap zum Anzeigen:

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