Hinweise zur Integration

Diese detaillierte Anleitung hilft Ihnen bei der Entscheidung zu allen wichtigen Integrationsproblemen.

„Über Google anmelden“ im Abstract

Im Folgenden finden Sie die allgemeinen Schritte, die Nutzer ausführen müssen, um sich auf Ihrer Website anzumelden oder zu registrieren.

  1. Nutzer melden sich auf einer Google-Website an.

    Damit „Über Google anmelden“ funktioniert, muss im Browser eine aktive Google-Sitzung vorhanden sein. One Tap und die automatische Anmeldung werden nur ausgelöst, wenn sich Nutzer vor dem Laden Ihrer Webseiten bei Google angemeldet haben. Dieser Schritt ist für den Ablauf der Schaltfläche „Über Google anmelden“ optional, da Nutzer aufgefordert werden, sich bei Google anzumelden, wenn sie auf die Schaltfläche klicken.

  2. Nutzer rufen Ihre Webseiten auf, auf denen die Schaltflächen „One Tap“, „Automatische Anmeldung“ oder „Über Google anmelden“ eingebettet sind.

  3. Nutzer interagieren mit One Tap, der Schaltfläche „Über Google anmelden“ und den nachfolgenden UX-Abläufen, um:

    • Wählen Sie eine aktive Google-Sitzung aus, um fortzufahren.
    • Holen Sie die Einwilligung der Endnutzer ein, um Profilinformationen an Ihre Website weiterzugeben, falls Sie dies noch nicht getan haben.

    Wenn im Browser nur eine aktive Google-Sitzung vorhanden ist,

    • Bei der One-Tap-Funktion wird die einzige Sitzung automatisch ausgewählt und die Seite mit der Kontoauswahl wird übersprungen.
    • Die Schaltfläche „Über Google anmelden“ bleibt auf der Seite mit der Kontoauswahl, sodass Nutzer bei Bedarf eine neue Google-Sitzung hinzufügen können.

    Wenn das ausgewählte Google-Konto noch nicht für Ihre Website verwendet wurde oder die Berechtigung widerrufen wurde, wird eine Einwilligungsseite angezeigt.

    Zustimmungsbildschirm für die Schaltfläche „Über Google anmelden“

    Nach der Genehmigung speichert Google die Entscheidung, damit die Einwilligungsseite beim nächsten Mal übersprungen wird.

  4. Ein JSON-Webtoken (auch als ID-Token bezeichnet) ist ein Anmeldedaten-Objekt, das den Namen, die E-Mail-Adresse und das Profilbild des Nutzers enthält. Es wird entweder über einen JavaScript-Callback-Handler oder über eine Post-Einreichung an Ihren Backend-Dienst freigegeben.

    ID-Tokens werden nicht clientseitig an den JavaScript-Callback-Handler zurückgegeben, damit Sie sie im JavaScript-Code decodieren, sondern damit Sie sie auf Ihre eigene Weise an Ihren Server senden. Ein gutes Beispiel ist die Verwendung eines XmlHttpRequest, um das durch die Post-Einreichung verursachte Seitenaktualisieren zu vermeiden.

  5. Auf der Serverseite werden die von Google ausgestellten JWT-Anmeldedaten validiert und verwendet, um ein neues Konto zu erstellen oder eine authentifizierte Sitzung auf Ihrer Website zu erstellen.

    Sie verwalten den Anmeldestatus der Nutzer auf Ihrer eigenen Website.

    Der Anmeldestatus des Nutzers in seinem Google-Konto und Ihre App sind voneinander unabhängig, mit Ausnahme des Anmeldevorgangs selbst, wenn Sie wissen, dass der Nutzer erfolgreich authentifiziert wurde und in seinem Google-Konto angemeldet ist. Nutzer können angemeldet bleiben, sich abmelden oder zu einem anderen Google-Konto wechseln, während auf Ihrer Website eine aktive Sitzung mit Anmeldung besteht.

Zusammenfassend lässt sich sagen, dass „Über Google anmelden“ eine weitere Möglichkeit zur Authentifizierung von Nutzern im Web ist, ähnlich wie die passwortbasierte Anmeldung. „Über Google anmelden“ bietet nach der Authentifizierung keine Funktionen für die Sitzungsverwaltung auf Ihrer Website.

Auf Google APIs und Google-Dienste zugreifen

Sie haben die Authentifizierungs-API wie oben beschrieben eingebunden. Möglicherweise müssen Sie auch die Autorisierungs-API einbinden, wenn Ihre Website im Namen authentifizierter Nutzer auf Google APIs und ‑Dienste zugreifen muss. Während die Authentifizierung Ihrer Website ID-Tokens zur Authentifizierung von Nutzern zur Verfügung stellt, erhalten Sie durch die Autorisierung (separate) Zugriffstokens und Berechtigungen zur Verwendung von Google APIs und ‑Diensten. Weitere Informationen finden Sie unter Autorisierung für das Web.

UX-Trennung für Authentifizierung und Autorisierung

Wenn Ihre Website sowohl Authentifizierungs- als auch Autorisierungs-APIs aufrufen muss, müssen Sie sie zu unterschiedlichen Zeitpunkten aufrufen. Weitere Informationen finden Sie unter Authentifizierung und Autorisierung trennen.

Wenn Ihre Website in der Vergangenheit Authentifizierungs- und Autorisierungstokens gemeinsam angefordert hat, müssen Sie bei Verwendung der JavaScript-Bibliothek von Google Identity Services die UX so anpassen, dass die Authentifizierung vom Autorisierungsvorgang getrennt wird.

  • Bei der Authentifizierung kann Ihre Website mit One Tap, der automatischen Anmeldung oder der Schaltfläche „Über Google anmelden“ verknüpft werden, damit sich Nutzer auf Ihrer Website anmelden oder registrieren können.
  • Zum Zeitpunkt der Autorisierung kann Ihre Website die Autorisierungs-API aufrufen, um die Berechtigungen und Tokens für den Zugriff auf Google APIs oder ‑Dienste abzurufen.

Für einen reibungslosen UX-Übergang und zur Verringerung der Komplexität wird der Prozess häufig in zwei separate Schritte unterteilt.

  1. Überarbeiten Sie die UX, um die Authentifizierung und Autorisierung zu trennen.

  2. Migrieren Sie zur JavaScript-Bibliothek von Google Identity Services.

HTML API und JavaScript API im Vergleich

Sie können entweder die HTML API oder die JavaScript API verwenden, um die Schaltfläche „One Tap“, „Automatische Anmeldung“ oder „Über Google anmelden“ in Ihre Webseiten einzubinden.

Mit der HTML API stehen Ihnen mehr integrierte Funktionen zur Verfügung. Beispiel:

  • Beim Laden der Seite wird One Tap oder die Schaltfläche „Über Google anmelden“ gerendert.
  • Reichen Sie die zurückgegebenen Anmeldedaten an Ihren serverseitigen Endpunkt ein, der durch das Attribut data-login_uri angegeben ist, nachdem die UX für die One-Tap-, automatische Anmeldung oder das Pop-up-Fenster/die Weiterleitung mit Schaltfläche abgeschlossen ist.
  • Mit dem double-submit-cookie können Sie CSRF-Angriffe verhindern.
  • Erstellen Sie mit dem Codegenerator den HTML-Code und kopieren Sie ihn dann in Ihre HTML-Seiten.

Mit der HTML API können Sie auch JavaScript schreiben, um das Verhalten anzupassen.

  • Sie können einen eigenen Callback-Handler schreiben und dann den Funktionsnamen auf das Attribut data-callback festlegen. Ein gutes Beispiel ist die Verwendung eines XmlHttpRequest, um die zurückgegebenen Anmeldedaten an Ihren Server zu senden, um das Neuladen der Seite durch die standardmäßige Post-Einreichung zu vermeiden.

Mit der JavaScript API haben Sie in einigen Fällen mehr Flexibilität.

  • One Tap und die Schaltfläche „Über Google anmelden“ werden zu einem späteren Zeitpunkt gerendert. Beispielsweise, nachdem Nutzer im Menü Anmelden ausgewählt haben.
  • Die API mehrmals aufrufen Beispielsweise muss die Schaltfläche „Über Google anmelden“ jedes Mal gerendert werden, wenn das Anmeldedialogfeld gerendert wird.
  • Ihre HTML-Seiten werden dynamisch generiert, was es schwierig macht, API-Aufrufcode darin einzubetten.
  • Die JavaScript-Bibliothek von Google Identity Services wird erst viel später geladen.

HTML API-Code kann nur einmal aufgerufen werden, entweder beim Onload-Ereignis der Seite oder beim Onload-Ereignis der JavaScript-Bibliothek der Google Identity Services, je nachdem, was später eintritt. Sie sollten die JavaScript API verwenden, wenn das Verhalten der HTML API nicht Ihren Erwartungen entspricht.

Verwenden Sie die HTML API nicht zusammen mit der JavaScript API auf derselben Webseite, um die Seite zu initialisieren oder One-Tap- und Schaltflächen-Renderings zu erstellen. Prüfen Sie Ihren Code, sowohl HTML als auch JavaScript, auf Überschneidungen. Wichtige Hinweise:

  • Du verwendest die HTML API, wenn eines oder mehrere der Elemente in <div id='g_id_onload' ... ><id> oder <div class='g_id_signin' ...></div> in deinem HTML-Code vorhanden sind.
  • Sie verwenden die JavaScript API, wenn eine oder mehrere der Methoden in initialize(), prompt() oder render() in Ihrem JavaScript-Code aufgerufen werden, unabhängig davon, ob sie inline eingefügt oder aus einer separaten JavaScript-Datei geladen werden.

Die folgenden JavaScript APIs können unabhängig von der Initialisierung oder dem Rendern von One Tap und Schaltflächen verwendet werden. Für sie gibt es keine entsprechenden HTML-APIs:

Hinweise zur Schaltfläche „Über Google anmelden“

In diesem Abschnitt werden die Aspekte erläutert, die Sie bei der Einbindung der Schaltfläche „Über Google anmelden“ auf Ihrer Website berücksichtigen sollten.

Pop-up-Fenster im Vergleich zu Weiterleitungen

Die OAuth 2.0-Spezifikation berücksichtigt HTTP-Weiterleitungen, enthält aber keine Anleitung zum Rendern von Pop-up-Dialogfeldern. Die Pop-up-UX kann insbesondere auf dem Computer eine bessere UX für Endnutzer bieten. Das liegt daran, dass Nutzer nicht von den Seiten Dritter weitergeleitet werden und ein dialogähnliches Pop-up-Fenster die Berechtigungserteilung im Kontext bietet.

Bei der Pop-up-UX muss der Identitätsanbieter clientseitige plattformübergreifende Kommunikationskanäle nutzen, um OAuth-Antworten aus dem Pop-up-Fenster, in dem die Einwilligungsseite des Identitätsanbieters angezeigt wird, an das Hauptfenster weiterzuleiten, in dem die Seite des Drittanbieters angezeigt wird. Normalerweise sind JavaScript-Codes auf beiden Seiten erforderlich, um die OAuth-Antwort über Fenster zu senden und zu empfangen.

Sowohl das Pop-up als auch die Weiterleitung werden von der Schaltfläche „Über Google anmelden“ unterstützt. Standardmäßig wird die Pop-up-UX verwendet. Sie können die UX ändern, indem Sie das Attribut data-ux_mode festlegen.

Es gibt einige Unterschiede zwischen der Weiterleitung über die Schaltfläche „Über Google anmelden“ und der OAuth-Weiterleitung.

  • Beim Weiterleitungsvorgang über die Schaltfläche „Über Google anmelden“ wird immer die Methode POST verwendet, um die Anmeldedaten an Ihren Webserver zu senden. Bei der OAuth-Weiterleitung wird normalerweise die Methode GET verwendet.
  • Die Parameter, die über die Weiterleitungsschaltfläche „Über Google anmelden“ gesendet werden, unterscheiden sich von denen der OAuth-Weiterleitung.

Für Entwickler, die die HTML API verwenden, werden die Anmeldedaten unabhängig von der verwendeten UX immer mit der POST-Methode und denselben Parametern an data-login_uri gesendet. So können Sie den UX-Modus ohne weitere Codeänderungen wechseln. Für die UX der Weiterleitung muss die data-login_uri den autorisierten Weiterleitungs-URIs für Ihren Client in der Google APIs Console hinzugefügt werden.

Schaltflächen anpassen

Die Verwendung einer eigenen Schaltfläche wird nicht unterstützt. Es gibt keine API, mit der ein Schaltflächenvorgang programmatisch gestartet werden kann.

Wenn Sie die Schaltfläche „Über Google anmelden“ verwenden möchten, müssen Sie lediglich eine oder mehrere Schaltflächen „Über Google anmelden“ auf Ihren Webseiten einfügen. Der Schaltflächenfluss wird gestartet und transparent verarbeitet, wenn Nutzer auf diese Schaltflächen klicken.

Mit der Button Rendering API können Sie das Erscheinungsbild der Schaltfläche „Über Google anmelden“ anpassen. Wir empfehlen, den Codegenerator zu verwenden, um Schaltflächen interaktiv zu gestalten. Auch wenn Sie die JavaScript API verwenden, können Sie zuerst den HTML-Code generieren und dann in die entsprechenden Felder in der JavaScript API kopieren.

Es gibt keine API, mit der Websites festlegen können, ob die personalisierten Informationen zum Rendern der Schaltflächen verwendet werden sollen. Die personalisierten Schaltflächen werden angezeigt, wenn alle Bedingungen erfüllt sind. Weitere Informationen finden Sie unter Die Schaltfläche „Personalisiert“.

Sie können mehrere Schaltflächen auf derselben Webseite platzieren. Der Codegenerator kann jeweils nur eine Schaltfläche erstellen. Sie können ihn mehrmals ausführen und den generierten <div class='g_id_signin' ...></div>-Code in die Webseite kopieren.

Best Practices für das Schaltflächen-Rendering

Aus Datenschutzgründen wird die personalisierte Schaltfläche in einem iFrame aus der Domain accounts.google.com angezeigt. Das Laden eines iFrames kann in einem langsamen Netzwerk zeitaufwendig sein. Um dieses Latenzproblem zu minimieren, werden die Schaltflächen in zwei Schritten gerendert:

  1. Eine Inline-Schaltfläche wird im DOM-Baum Ihrer Website gerendert. Es handelt sich dabei nur um eine Textschaltfläche. Es können keine personalisierten Informationen verwendet werden. So soll die Schaltfläche möglichst schnell für Nutzer sichtbar sein.
  2. Es wird eine Iframe-Anfrage an Google gesendet, um den Iframe der Schaltfläche zu laden, der möglicherweise personalisierte Informationen enthält. Sobald der iFrame der Schaltfläche geladen ist, wird die Schaltfläche für die Inlineversion entfernt.

Im Folgenden finden Sie einige Best Practices, mit denen Sie die Latenz beim Anzeigen der Schaltfläche „Über Google anmelden“ minimieren können.

  • Laden Sie die JavaScript-Bibliothek von Google Identity Services so früh wie möglich. Es empfiehlt sich, die JavaScript-Bibliothek vor einigen anderen großen Bibliotheken zu laden, insbesondere im mobilen Web.

  • Die Schaltfläche „Über Google anmelden“ wird erst gerendert, wenn der Nutzer im Menü Anmelden auswählt. Sie können die Schaltfläche „Über Google anmelden“ zuerst in einem ausgeblendeten Element rendern und dann sichtbar machen, nachdem der Nutzer im Menü Anmelden ausgewählt hat.

Hinweise zu One Tap

Automatische Anmeldung

Mit der Funktion zur automatischen Anmeldung können sich Nutzer auf Ihrer Website anmelden, ohne auf die Aufforderung zum One-Tap-Login zu klicken, wenn sie Ihrer Website zuvor die Berechtigung erteilt haben.

Die abbrechenbare automatische Anmeldung bietet folgende Vorteile:

  • Die Anmelderate kann sich verbessern, da eine Nutzeraktion gespeichert wird.
  • Im Gegensatz zur stillen Anmeldung, die von der älteren, eingestellten JavaScript-Bibliothek Google Sign-In bereitgestellt wurde, sehen Nutzer bei der automatischen Anmeldung immer eine Benutzeroberfläche, die ihnen Aufschluss darüber gibt, warum und wie sie auf Ihrer Website angemeldet sind. Nutzer können das Abo auch jederzeit kündigen.
  • Es wird automatisch das Konto ausgewählt, das der Nutzer zuvor verwendet hat. Dadurch kann der Nutzer möglicherweise keine doppelten Konten auf Ihrer Website erstellen.

Ob Sie die automatische Anmeldung aktivieren, müssen Sie anhand der UX- und Geschäftsanforderungen Ihrer Website entscheiden. Insbesondere, wenn die meisten Abmeldungen von Ihrer Website aufgrund einer Sitzungsüberschreitung und nicht aufgrund einer expliziten Nutzerauswahl erfolgen, ist die automatische Anmeldung eine gute Möglichkeit für Ihre Nutzer, den Sitzungsstatus wiederherzustellen.

Wann wird die One-Tap-Benutzeroberfläche angezeigt?

Mit der HTML API wird One Tap immer beim Seitenaufbau angezeigt. Mit der JavaScript API können Sie festlegen, wann die One-Tap-Benutzeroberfläche angezeigt wird. Die One Tap-Benutzeroberfläche wird aus folgenden Gründen möglicherweise nicht immer nach der API-Aufruf angezeigt:

  • Es gibt keine aktive Google-Sitzung im Browser.
  • Alle aktiven Google-Sitzungen sind deaktiviert.
  • Die Ruhezeit läuft.

Versuchen Sie nicht, bei einem Klickereignis nur die One Tap-Benutzeroberfläche anzuzeigen. Die One-Tap-Benutzeroberfläche wird möglicherweise aus den oben genannten Gründen nicht angezeigt und die Nutzerfreundlichkeit ist möglicherweise beeinträchtigt, da nach der Nutzeraktion nichts angezeigt wird. Bei einem Klickereignis auf eine Schaltfläche:

Empfohlen

  • Zeigen Sie Ihr Anmeldedialogfeld mit der Passwort-Anmeldung und der Schaltfläche „Über Google anmelden“ an und rufen Sie gleichzeitig die One Tap API auf. So wird sichergestellt, dass Nutzern immer eine Anmeldemethode für Ihre Website angeboten wird.

Nicht empfohlen

  • Wenn Sie nur „One Tap“ anbieten, kann es zu Problemen bei der Anmeldung kommen, wenn „One Tap“ nicht angezeigt wird.
  • Mit einem UI-Status-Callback eine andere Benutzeroberfläche anzeigen, wenn „One Tap“ nicht angezeigt wird. Dies wird nicht empfohlen, da der UI-Status-Callback in einer zukünftigen Version möglicherweise nicht gut mit der föderierten Anmeldedatenverwaltung funktioniert.

One Tap in ITP-Browsern

Aufgrund von Intelligent Tracking Prevention (ITP) funktioniert die normale One Tap-UX in ITP-Browsern wie Chrome auf iOS, Safari und Firefox nicht. Stattdessen wird in diesen Browsern eine andere UX mit einer Begrüßungsseite angezeigt.

Die One-Tap-UX in ITP-Browsern kann bei Bedarf deaktiviert werden. Weitere Informationen finden Sie unter Unterstützung für One Tap in ITP-Browsern.

Diese UX kann nicht in Browsern aktiviert werden, die nicht ITP-kompatibel sind, z. B. Chrome unter Android/macOS/Linux und Edge.

Aufforderung abbrechen, wenn der Nutzer wegklickt

Standardmäßig wird die Aufforderung zum Direktkauf automatisch geschlossen, wenn der Nutzer außerhalb der Aufforderung klickt. Dieses Verhalten kann bei Bedarf geändert werden.

Wir empfehlen, die Aufforderung für die One-Tap-Funktion auf dem Computer geöffnet zu lassen, da die Bildschirmgröße groß genug ist.

Position der One-Tap-UX ändern

Auf dem Computer können Sie die Position des Prompts für die One-Tap-Funktion ändern. Diese Funktion wird jedoch nicht empfohlen, da sie in einer zukünftigen Version nicht von der verwalteten Anmeldedaten-Funktion unterstützt wird.

Anmeldekontext ändern

„One Tap“ sollte Teil eines größeren UX-Flows auf Ihrer Website sein. Standardmäßig wird die One Tap-Benutzeroberfläche in einem Anmeldekontext verwendet. Die Sprache in der Benutzeroberfläche enthält bestimmte Formulierungen, z. B. „Anmelden“. Sie können das Kontextattribut ändern, um eine andere Formulierung zu erstellen. Sie können eine der One-Tap-Überschriften auswählen, die am besten zu Ihrem UX-Flow passt.

Kontext
signin „Über Google anmelden“
signup „Über Google registrieren“
use „Mit Google verwenden“

Auf den Status der One Tap-Benutzeroberfläche achten

Damit sich One Tap nahtlos in Ihren größeren UX-Flow einbinden lässt, können Sie sich benachrichtigen lassen, wenn sich der UI-Status ändert. Diese Funktion wird jedoch in zukünftigen Releases der föderierten Anmeldedatenverwaltung nicht unterstützt.

Ein-Tap-Funktion für Subdomains

Standardmäßig werden die Wartezeit für One Tap und andere Status pro Ursprung erfasst. Wenn auf Ihrer Website One Tap über mehrere Subdomains angezeigt wird, müssen Sie dies in Ihrem API-Code angeben.

One Tap auf statischen HTML-Seiten

Standardmäßig geht die GIS-Bibliothek davon aus, dass Ihre Webseiten dynamisch generiert werden. Ihr HTTP-Server prüft beim Generieren des HTML-Codes den Anmeldestatus des Nutzers.

  • Wenn kein Nutzer angemeldet ist, sollte die resultierende Seite One-Tap-HTML-Code enthalten, um One-Tap auszulösen und Nutzern die Anmeldung auf Ihrer Website zu ermöglichen.
  • Wenn Nutzer bereits angemeldet sind, sollte der One Tap-HTML-Code nicht in der resultierenden Seite enthalten sein.

In diesem Fall ist es Sache Ihres Webservers, den One Tap HTML API-Code hinzuzufügen oder zu entfernen.

Der One Tap HTML API-Code kann auch anders funktionieren. Diese Variante ist für Websites mit vielen statischen HTML-Inhalten konzipiert. Sie können den One Tap HTML API-Code jederzeit in Ihre statischen HTML-Seiten einfügen und den Namen des Sitzungscookies angeben, der auf Ihrer Website verwendet wird.

  • Wenn das Sitzungscookie nicht vorhanden ist, wird der One-Tap-Vorgang ausgelöst.
  • Wenn das Sitzungscookie vorhanden ist, wird der Ablauf mit nur einem Tippen übersprungen.

In diesem Fall wird der Ablauf von One Tap nicht durch das Vorhandensein des One Tap HTML API-Codes auf Ihrer Webseite, sondern durch den Status Ihres Sitzungscookies gesteuert.

Serverseitige Integration

Nachdem der UX-Flow für One Tap, die automatische Anmeldung oder die Schaltfläche „Über Google anmelden“ abgeschlossen ist, wird ein ID-Token ausgestellt und an Ihre Website gesendet. Für die Authentifizierung des Nutzers sind einige serverseitige Änderungen erforderlich, um das ID-Token zu empfangen und zu validieren.

UX-Aspekte

Normalerweise müssen Sie in Ihrem eigenen Ursprung einen HTTP-Endpunkt hinzufügen, um die Antworten auf Ihrer Serverseite zu verarbeiten. Die folgenden Faktoren können sich auf die UX auswirken.

  • Ob „One Tap“ oder „Über Google anmelden“ ausgelöst wird.
  • Ob die HTML API oder die JavaScript API verwendet wird.
  • Ob die Anmelde-URI oder die JavaScript-Callback-Funktion für die Verarbeitung der Antwort verwendet wird.

Die tatsächliche UX wird so beschrieben:

  1. Für den UX-Modus der Weiterleitung über die Schaltfläche „Über Google anmelden“:

    • Unabhängig davon, ob die HTML API oder die JavaScript API verwendet wird, müssen Sie den Anmelde-URI festlegen. Es ist nicht möglich, eine JavaScript-Callback-Funktion zum Verarbeiten der Antwort zu verwenden, da Nutzer bereits von Ihrer Webseite weitergeleitet wurden.
    • UX-Zusammenfassung: Nachdem Nutzer auf die Schaltfläche „Über Google anmelden“ geklickt haben, werden sie auf eine Google-Benutzeroberfläche weitergeleitet, auf der sie die Sitzung auswählen und genehmigen können. Danach wird eine vollständige Seite mit POST an den von dir angegebenen Anmelde-URI gesendet.

  2. Für den UX-Modus des Pop-ups „One Tap“ oder der Schaltfläche „Über Google anmelden“, wenn die JavaScript API oder die HTML API verwendet wird und eine JavaScript-Callback-Funktion bereitgestellt wird:

    • Die Authentifizierungsantworten werden an die JavaScript-Callback-Funktion zurückgegeben.
    • UX-Zusammenfassung: Die Aufforderung für die One-Tap-Funktion oder ein Pop-up-Fenster wird über Ihrer Webseite angezeigt. Nachdem die Nutzer die UX im Prompt oder Pop-up-Fenster für die Sitzungsauswahl und -genehmigung abgeschlossen haben, werden die Antworten an die JavaScript-Callback-Funktion gesendet. Die nachfolgende UX wird davon bestimmt, wie Ihre Rückruffunktion die Antworten an Ihren Server sendet.

  3. Andernfalls (HTML API mit Anmelde-URI):

    • Die Authentifizierungsantworten werden an den Anmelde-URI gesendet.
    • UX-Zusammenfassung: Die Aufforderung für die One-Tap-Funktion oder ein Pop-up-Fenster wird über Ihrer Webseite angezeigt. Nachdem Nutzer die UX im Prompt oder Pop-up-Fenster für die Sitzungsauswahl und -genehmigung abgeschlossen haben, werden die Authentifizierungsantworten über eine vollständige POST-Einreichung an die von Ihnen angegebene Anmelde-URL gesendet.

Wir empfehlen, die Antworten für die Schaltfläche „Mit Google anmelden“ und die Antworten für die Schaltfläche „Über Google anmelden“ auf einheitliche Weise einzureichen.

Sicherheitsaspekte

So verhindern Sie Cross-Site Request Forgery-Angriffe:

  • Für die von der Google Identity Service-Client-JavaScript-Bibliothek ausgelöste Posteinreichung können Sie das integrierte Double-Submit-Cookie-Muster verwenden. Weitere Informationen finden Sie unter Google-ID-Token serverseitig überprüfen.
  • Für die Einreichung an Ihren eigenen Ursprung mit einem XmlHttpRequest können Sie den benutzerdefinierten HTTP-Header oder andere Sicherheitsmaßnahmen verwenden, die von Ihrem Sicherheitsteam genehmigt wurden.

Zur Überprüfung der ID-Tokens in den Authentifizierungsantworten wird dringend empfohlen, eine Google API-Clientbibliothek für Ihre Plattform oder eine JWT-Bibliothek für allgemeine Zwecke zu verwenden.

FAQ

  • Sind die Schaltflächen „One Tap“ und „Über Google anmelden“ in Webviews verfügbar?

    Nein. Aus Sicherheitsgründen sollten Nutzer keine Google-Sitzungen in Webviews hinzufügen. Daher sind GIS in Webviews deaktiviert, da dort keine Google-Sitzungen vorhanden sein sollten.

  • Kann ich meine eigene Schaltfläche „Über Google anmelden“ verwenden? Nein. Mit dem serverseitigen OAuth-Vorgang oder der früheren Version der Google Sign-in-JavaScript-Bibliothek konnten die entsprechenden Parteien anhand der Branding-Richtlinien für die Anmeldung eigene Versionen der Google Sign-in-Schaltflächen erstellen.

    Diese Funktion wurde jedoch aus „Über Google anmelden“ entfernt. Alle Schaltflächen für die Anmeldung über Google müssen von der JavaScript-Bibliothek von Google Identity Services generiert werden. Dafür gibt es zwei Gründe.

    • Einige vertrauende Seiten haben die Richtlinien nicht eingehalten, was zu inkonsistenten „Über Google anmelden“-Schaltflächen auf Websites führt.
    • Da die Bibliothek die Assets generiert, müssen Sie keine Änderungen vornehmen, wenn sich die Branding-Richtlinien für die Anmeldung ändern.

    Um diese Regel durchzusetzen, stellt die JavaScript-Bibliothek nur eine API zum Rendern einer Schaltfläche bereit, aber nicht die API, um den Anmeldevorgang zu starten.

  • Was ist, wenn auf meiner Website nur One Tap aktiviert ist, aber nicht die Schaltfläche „Über Google anmelden“?

    Wir empfehlen, auf Ihrer Website sowohl One Tap als auch die Schaltfläche „Über Google anmelden“ zu verwenden. Aufgrund der exponentiellen Wartezeit wird die Funktion „One Tap“ möglicherweise nicht jedes Mal angezeigt. Wenn Nutzer sich mit ihren Google-Konten auf Ihrer Website anmelden möchten, können sie das über das Hauptanmeldefenster tun und sich dort über die Schaltfläche „Über Google anmelden“ anmelden. Wenn Sie sich über die Schaltfläche „Über Google anmelden“ anmelden, wird der Cool-down-Status von One Tap gelöscht, sodass One Tap bei der nächsten Anmeldung angezeigt werden kann. Andere Schaltflächen-Abläufe von Google können den Cool-down-Status von One Tap nicht löschen, da sie sich in verschiedenen JavaScript-Binärdateien befinden.

    Wenn auf Ihrer Website nur „One Tap“, aber nicht die Schaltfläche „Über Google anmelden“ aktiviert ist, kann es zu Leistungseinbußen beim One Tap-Vorgang kommen, da die Status des exponentiellen Zeitlimits nicht rechtzeitig gelöscht werden.

  • Wann wird mein HTML-API-Code geparst? Kann ich meinen HTML API-Code später ändern?

    Die JavaScript-Bibliothek von Google Identity Services analysiert und führt Ihren HTML API-Code entweder beim Laden der JavaScript-Bibliothek oder beim DomContentLoaded-Ereignis aus, je nachdem, was später eintritt.

    • Wenn das Ereignis „DOMContentLoaded“ beim Laden der JavaScript-Bibliothek ausgelöst wird, wird Ihr HTML API-Code sofort geparst und ausgeführt.
    • Andernfalls fügt die JavaScript-Bibliothek einen Listener für das Ereignis „DomContentLoaded“ hinzu. Wenn der Listener ausgelöst wird, wird Ihr HTML API-Code geparst und ausgeführt.

    Beachte außerdem, dass das Parsen und Ausführen deines HTML API-Codes deaktiviert ist.

    • Nach dem Parsen und Ausführen werden alle nachfolgenden Änderungen am HTML API-Code ignoriert.
    • Es gibt keine API, mit der Entwickler das Parsen oder Ausführen auslösen können.