Hinweise zur Integration

Mithilfe dieser Schritt-für-Schritt-Anleitung können Sie Entscheidungen zu allen wichtigen Integrationsproblemen treffen.

„Über Google anmelden“ in der Zusammenfassung

Nachfolgend finden Sie die allgemeinen Schritte für Nutzer zur Anmeldung / Registrierung auf Ihrer Website.

  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 deine Webseiten auf, auf denen die Schaltfläche „One Tap“, „Automatische Anmeldung“ oder „Über Google anmelden“ eingebettet ist.

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

    • Wähle eine aktive Google-Sitzung aus, um fortzufahren.
    • Holen Sie die Einwilligung der Endnutzer ein, dass Profilinformationen auf Ihrer Website geteilt werden dürfen, sofern sie noch nicht zugestimmt haben.

    Wenn sich nur eine aktive Google-Sitzung im Browser befindet,

    • One Tap wählt automatisch die einzige Sitzung aus und überspringt daher die Seite zur Kontoauswahl.
    • Die Schaltfläche „Über Google anmelden“ bleibt auf der Kontoauswahlseite, sodass Nutzer bei Bedarf eine neue Google-Sitzung hinzufügen können.

    Wenn das ausgewählte Google-Konto noch nicht mit Ihrer Website verwendet wurde oder die Berechtigung widerrufen wurde, wird eine Einwilligungsseite angezeigt.

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

    Nach der Genehmigung zeichnet Google die Entscheidung auf, damit die Einwilligungsseite beim nächsten Mal übersprungen werden kann.

  4. Die Anmeldedaten eines JSON Web Tokens (auch als ID-Token bezeichnet) mit dem Namen, der E-Mail-Adresse und dem Profilbild des Nutzers werden entweder über einen JavaScript-Callback-Handler oder nach dem Senden an Ihren Back-End-Dienst geteilt.

    Der Zweck der Rückgabe von ID-Tokens an den JavaScript-Callback-Handler auf Clientseite besteht nicht darin, sie im JavaScript-Code zu decodieren, sondern dass Sie sie auf Ihre Weise an Ihren Server senden. Ein gutes Beispiel ist die Verwendung von XmlHttpRequest, um das erneute Laden der Seite zu verhindern, das durch das Senden von Posts verursacht wird.

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

    Sie verwalten den Anmeldestatus der Nutzer auf Ihrer eigenen Website.

    Der Anmeldestatus des Google-Kontos des Nutzers und Ihre Anwendung sind voneinander unabhängig, es sei denn, Sie wissen, dass sich der Nutzer erfolgreich authentifiziert hat und in seinem Google-Konto angemeldet ist. Nutzer bleiben möglicherweise angemeldet, können sich abmelden oder zu einem anderen Google-Konto wechseln, während sie auf Ihrer Website eine aktive, angemeldete Sitzung beibehalten.

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

Auf Google APIs und Google-Dienste zugreifen

Obwohl Sie wie oben beschrieben die Authentication API integriert haben, müssen Sie möglicherweise auch die Authorization API einbinden, wenn Ihre Website im Namen authentifizierter Nutzer auf Google APIs und Google-Dienste zugreifen muss. Während die Authentifizierung Ihrer Website ID-Tokens zur Authentifizierung von Nutzern bereitstellt, erhalten Ihre Website durch die Autorisierung (separate) Zugriffstokens und Berechtigungen zur Verwendung von Google APIs und Diensten. Weitere Informationen finden Sie unter Für das Web autorisieren.

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 separat aufrufen. Siehe Authentifizierungs- und Autorisierungsmomente trennen.

Wenn Ihre Website in der Vergangenheit Authentifizierungs- und Autorisierungstokens zusammen angefordert hat und Sie die JavaScript-Bibliothek der Google Identity Services verwenden möchten, müssen Sie die UX so anpassen, dass der Zeitpunkt der Authentifizierung von dem Zeitpunkt der Autorisierung getrennt wird.

  • Zum Zeitpunkt der Authentifizierung kann Ihre Website mit One Tap, der automatischen Anmeldung oder der Schaltfläche „Über Google anmelden“ verknüpft werden, damit sich Nutzer bei Ihrer Website anmelden oder registrieren können.
  • Im Moment 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 Übergang zur Nutzererfahrung und eine Reduzierung der Komplexität wird der Prozess üblicherweise in zwei getrennte Schritte unterteilt.

  1. Refaktorieren Sie die UX, um Authentifizierungs- und Autorisierungsmomente voneinander zu trennen.

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

HTML API und JavaScript API im Vergleich

Du kannst entweder die HTML API oder die JavaScript API verwenden, um die Schaltfläche „One Tap“, „Automatische Anmeldung“ oder „Über Google anmelden“ in deine Webseiten zu integrieren.

Die HTML API bietet mehr integrierte Funktionen. Beispiel:

  • One Tap oder die Schaltfläche „Über Google anmelden“ beim Seitenaufbau wird gerendert.
  • Senden Sie die zurückgegebenen Anmeldedaten an den serverseitigen Endpunkt, der durch das Attribut data-login_uri angegeben wird, nachdem One Tap, automatische Anmeldung oder das Pop-up-Fenster bzw. die Weiterleitung an die Schaltfläche abgeschlossen ist.
  • Verhindern Sie CSRF-Angriffe mit double-submit-cookie.
  • Generieren Sie den HTML-Code mithilfe des Codegenerators und kopieren Sie ihn dann in Ihre HTML-Seiten.

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

  • Sie können Ihren eigenen Callback-Handler schreiben und dann den Funktionsnamen auf das Attribut data-callback festlegen. Ein gutes Beispiel ist die Verwendung von XmlHttpRequest, um die zurückgegebenen Anmeldedaten an Ihren Server zu senden. So lässt sich verhindern, dass die Seite neu geladen wird, wenn die Seite standardmäßig nach dem Senden gesendet wird.

Die JavaScript API bietet Ihnen bei einigen Szenarien mehr Flexibilität (siehe unten).

  • One Tap und die Schaltfläche „Über Google anmelden“ werden später gerendert. Beispiel: Nachdem Nutzer Login aus dem Menü ausgewählt haben.
  • Mehrmaliges Aufrufen der API Die Schaltfläche „Über Google anmelden“ muss beispielsweise jedes Mal gerendert werden, wenn der Anmeldedialog gerendert wird.
  • Dynamisches Generieren Ihrer HTML-Seiten, wodurch es schwierig wird, API-Aufrufcode darin einzubetten
  • Die JavaScript-Bibliothek von Google Identity Services wird erst viel später geladen.

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

Verwenden Sie die HTML API nicht mit der JavaScript API auf derselben Webseite, um die Seite zu initialisieren oder das One Tap- und Schaltflächenrendering zu verwenden. Überprüfen Sie Ihren HTML- und JavaScript-Code auf mögliche Überlappungen. Hinweis:

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

Die folgenden JavaScript APIs können unabhängig von der Initialisierung oder der Darstellung durch einmaliges Tippen und Schaltflächen verwendet werden. Sie haben keine entsprechenden HTML APIs:

Hinweise zur Schaltfläche „Über Google anmelden“

Pop-up oder Weiterleitung

Die OAuth 2.0-Spezifikation berücksichtigt die HTTP-Weiterleitung, enthält jedoch keine Anleitung zum Rendern von Pop-up-Dialogfeldern. Die Pop-up-UX kann Endnutzern, insbesondere auf Websites für Computer, eine bessere UX bieten. Dies liegt daran, dass Nutzer nicht von Seiten von Drittanbietern weitergeleitet werden und ein dialogorientiertes Pop-up-Fenster für die Erteilung von Berechtigungen im Kontext sorgt.

Bei der Pop-up-UX muss der Identitätsanbieter auf clientseitigen, ursprungsübergreifenden Kommunikationskanälen aufbauen, um OAuth-Antworten aus dem Pop-up-Fenster, in dem die Einwilligungsseite des Identitätsanbieters angezeigt wird, an das Hauptfenster zu übergeben, auf dem die Drittanbieterseite zu sehen ist. Normalerweise sind JavaScript-Codes auf beiden Seiten erforderlich, um die OAuth-Antwort über Windows hinweg zu senden und zu empfangen.

Sowohl Pop-up- als auch Weiterleitungsfunktionen 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 dem Weiterleitungsablauf für die Schaltfläche „Über Google anmelden“ und dem OAuth-Weiterleitungsvorgang.

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

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

Schaltflächen anpassen

Die Verwendung deiner eigenen Schaltfläche wird nicht unterstützt. Es gibt keine API, um einen Schaltflächenablauf programmatisch zu starten.

Wenn Sie die Schaltfläche „Über Google anmelden“ aktivieren möchten, müssen Sie lediglich eine oder mehrere „Über Google anmelden“-Schaltflächen auf Ihren Webseiten rendern. Der Schaltflächenfluss wird initiiert und transparent gehandhabt, wenn Nutzer auf diese Schaltflächen klicken.

Mit der Schaltflächen-Rendering-API kannst du das Design der Schaltfläche „Über Google anmelden“ anpassen. Sie sollten den Codegenerator verwenden, um Ihre Schaltflächen interaktiv zu gestalten. Selbst wenn Sie die JavaScript API verwenden, können Sie zuerst den HTML-Code generieren und ihn dann in die entsprechenden Felder in der JavaScript API kopieren.

Es gibt keine API, mit der Websites steuern 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 findest du unter Informationen zur personalisierten Schaltfläche.

Sie können mehrere Schaltflächen auf einer 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 Rendern von Schaltflächen

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

  1. Im DOM-Baum Ihrer Website wird eine Inline-Schaltflächenversion gerendert. Es ist nur eine Textschaltfläche, es können keine personalisierten Informationen verwendet werden. Damit soll erreicht werden, dass Nutzende die Schaltfläche so schnell wie möglich sehen.
  2. Eine iFrame-Anfrage wird 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 Inline-Versionsschaltfläche entfernt.

Im Folgenden findest du einige Best Practices zum Minimieren der Latenz beim Anzeigen der Schaltfläche „Über Google anmelden“.

  • Laden Sie die JavaScript-Bibliothek für Google Identity Services so früh wie möglich. Ziehen Sie in Betracht, die JavaScript-Bibliothek vor einigen anderen großen Bibliotheken zu laden, insbesondere im mobilen Web.

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

Überlegungen zu One Tap

Automatische Anmeldung

Die stornierbare automatische Anmeldung bietet folgende Vorteile.

  • Die Anmelderate lässt sich möglicherweise verbessern, wenn nur eine Nutzeraktion gespeichert wird.
  • Im Gegensatz zur stillen Anmeldung, die von der früheren, verworfenen JavaScript-Bibliothek Google Log-in bereitgestellt wurde, sehen Nutzer bei der automatischen Anmeldung immer eine UI. So erfahren sie, warum und wie sie auf Ihrer Website angemeldet sind. Nutzer können bei Bedarf auch kündigen.
  • Es wird automatisch das Konto ausgewählt, das der Nutzer zuvor verwendet hat. Dadurch wird möglicherweise verhindert, dass der Nutzer doppelte Konten auf Ihrer Website erstellt.

Ob Sie die automatische Anmeldung aktivieren, hängt von den UX- und Geschäftsanforderungen Ihrer Website ab. Vor allem, wenn die meisten Abmeldungen von Ihrer Website durch eine Zeitüberschreitung der Sitzung und nicht durch eine explizite Auswahl durch den Nutzer verursacht werden, kann die automatische Anmeldung eine gute Möglichkeit für Ihre Nutzer sein, den Sitzungsstatus wiederherzustellen.

Wann die One Tap-Benutzeroberfläche angezeigt werden soll

Mit der HTML API wird One Tap beim Seitenaufbau immer angezeigt. Mit dem JavaScript-Code

API steuern, wann die One Tap-Benutzeroberfläche angezeigt wird. Hinweis: Die One Tap-Benutzeroberfläche wird nach dem Aufruf der API möglicherweise nicht immer angezeigt. Dies kann verschiedene Gründe haben (siehe unten).

  • Keine aktive Google-Sitzung im Browser.
  • Alle aktiven Google-Sitzungen sind deaktiviert.
  • Wartezeit läuft.

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

Empfohlen

  • Das Anmeldedialogfeld mit der Passwort-Anmeldung und der Schaltfläche „Über Google anmelden“ anzeigen und gleichzeitig die One Tap API aufrufen. Dadurch wird sichergestellt, dass Nutzern immer eine Anmeldemethode für deine Website angeboten wird.

Nicht empfohlen

  • Wenn Sie nur One Tap anbieten, funktioniert die Anmeldung möglicherweise nicht, wenn One Tap nicht angezeigt wird.
  • Verwendung eines UI-Status-Callbacks zum Anzeigen einer anderen UI, wenn One Tap nicht angezeigt wird. Dies wird nicht empfohlen, da der UI-Status-Callback in einem zukünftigen Release möglicherweise nicht gut mit der föderierten Anmeldedatenverwaltung funktioniert.

One Tap bei ITP-Browsern

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

Die One Tap-UX kann bei ITP-Browsern deaktiviert werden, wenn Sie möchten. Weitere Informationen finden Sie unter One Tap-Unterstützung für ITP-Browser.

In Nicht-ITP-Browsern wie Chrome unter Android/macOS/Linux und Edge kann diese UX nicht aktiviert werden.

Aufforderung abbrechen, wenn der Nutzer weg klickt

Standardmäßig wird die One Tap-Aufforderung automatisch geschlossen, wenn der Nutzer auf eine Stelle außerhalb der Aufforderung klickt. Dieses Verhalten kann bei Bedarf geändert werden.

Es wird empfohlen, die One Tap-Aufforderung auf der Desktop-Website geöffnet zu lassen, da die Bildschirmgröße groß genug ist.

Position der One Tap-UX ändern

Auf einem Computer können Sie die Position der Aufforderung durch einmaliges Tippen ändern. Diese Funktion wird jedoch nicht empfohlen, da sie in einem zukünftigen Release von der Verwaltung von föderierten Anmeldedaten nicht 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 innerhalb eines Anmeldekontexts verwendet. Die Sprache der UI enthält bestimmte Formulierungen, z. B. „Anmelden“. Sie können das Kontextattribut ändern, um andere Formulierungen zu erstellen. Sie können einen der One Tap-Header auswählen, der am besten zu Ihrem UX-Ablauf passt.

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

Status der One Tap-Benutzeroberfläche beobachten

Für eine nahtlose Integration in Ihren größeren UX-Ablauf kann One Tap Sie benachrichtigen, wenn sich der Status der Benutzeroberfläche ändert. Diese Funktion wird jedoch in zukünftigen Versionen der föderierten Anmeldedatenverwaltung nicht unterstützt.

One Tap für mehrere Subdomains

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

One Tap in statischen HTML-Seiten

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

  • Wenn kein Nutzer angemeldet ist, sollte der One Tap-HTML-Code in die Ergebnisseite eingefügt werden, damit One Tap ausgelöst wird, damit sich Nutzer auf Ihrer Website anmelden können.
  • Wenn Nutzer bereits angemeldet sind, sollte der One Tap-HTML-Code auf der angezeigten Seite nicht enthalten sein.

In diesem Fall liegt es in der Verantwortung Ihres Webservers, One Tap HTML API-Code hinzuzufügen oder zu entfernen.

One Tap HTML API-Code kann auf andere Weise funktionieren. Er wurde für Websites entwickelt, die viele statische HTML-Inhalte hosten. Sie können jederzeit den One Tap-HTML-API-Code in Ihre statischen HTML-Seiten einbinden und den Namen des Sitzungscookies auf Ihrer Website angeben.

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

In diesem Fall wird durch den Status Ihres Sitzungscookies gesteuert, ob der One Tap-Ablauf ausgelöst werden soll, und nicht vom Vorhandensein des One Tap-HTML-API-Codes auf Ihrer Webseite.

Serverseitige Integration

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

Überlegungen zur Nutzererfahrung

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

  • Gibt an, ob One Tap oder „Über Google anmelden“ ausgelöst wird.
  • Gibt an, ob die HTML API oder die JavaScript API verwendet wird.
  • Gibt an, ob der Anmelde-URI oder die JavaScript-Callback-Funktion verwendet wird, um die Antwort zu verarbeiten.

Die tatsächliche UX wird wie unten beschrieben beschrieben.

  1. UX-Modus für den Weiterleitungs-UX-Modus für 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 weg weitergeleitet wurden.
    • UX-Zusammenfassung: Nach dem Klicken auf die Schaltfläche „Über Google anmelden“ wird Nutzern eine ganzseitige Weiterleitung zu einer Google-Benutzeroberfläche zur Auswahl und Genehmigung der Sitzung angezeigt. Anschließend wird eine ganzseitige POST an den von Ihnen angegebenen Anmelde-URI gesendet.

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

    • Die Authentifizierungsantworten werden an die JavaScript-Callback-Funktion zurückgegeben.
    • UX-Zusammenfassung: Die One Tap-Aufforderung oder ein Pop-up-Fenster wird über Ihrer Webseite angezeigt. Nachdem Nutzer die Benutzeroberfläche in der Aufforderung oder im Pop-up-Fenster zur Auswahl und Genehmigung der Sitzung beendet haben, empfängt die JavaScript-Callback-Funktion die Antworten. Der anschließende UX-Vorgang wird dadurch bestimmt, wie die Callback-Funktion die Antworten an Ihren Server sendet.

  3. Andernfalls (HTML API mit Anmelde-URI-Groß-/Kleinschreibung):

    • Die Authentifizierungsantworten werden an den Anmelde-URI gesendet.
    • UX-Zusammenfassung: Über der Webseite wird die One Tap-Aufforderung oder ein Pop-up-Fenster angezeigt. Nachdem Nutzer den Vorgang in der Aufforderung oder im Pop-up-Fenster zur Auswahl und Genehmigung der Sitzung abgeschlossen haben, werden die Authentifizierungsantworten in einer ganzseitigen POST-Übermittlung an die von Ihnen angegebene Anmelde-URL gesendet.

Es wird empfohlen, beim Senden der One Tap-Antworten und der Antworten auf die Schaltfläche „Über Google anmelden“ eine einheitliche Methode zu verwenden.

Sicherheitsaspekte

Zum Verhindern von Cross-Site Request Forgery-Angriffen:

  • Für Posts, die von der JavaScript-Bibliothek des Google Identity Service-Clients ausgelöst werden, können Sie das integrierte Muster „Double-Submit-Cookie“ verwenden. Weitere Informationen finden Sie unter Google-ID-Token auf Serverseite verifizieren.
  • Für die Übertragung an Ihren eigenen Ursprung mithilfe von XmlHttpRequest können Sie den benutzerdefinierten HTTP-Header oder andere von Ihrem Sicherheitsteam genehmigte Sicherheitsmaßnahmen verwenden.

Zum Prüfen der ID-Tokens in den Authentifizierungsantworten wird dringend empfohlen, eine Google API-Clientbibliothek für Ihre Plattform oder eine allgemeine JWT-Bibliothek zu verwenden.

FAQ

  • Ist One Tap und die Schaltfläche „Über Google anmelden“ in WebView verfügbar?

    Nein. Aus Sicherheitsgründen sollten Nutzer keine Google-Sitzungen in WebViews einfügen. Daher ist GIS in WebViews deaktiviert, da keine Google-Sitzungen vorhanden sein sollen.

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

    Bei „Über Google anmelden“ gibt es diese Funktion jedoch nicht mehr. Alle „Über Google anmelden“-Schaltflächen müssen von der JavaScript-Bibliothek der Google Identity Services generiert werden. Für diese Änderung gibt es zwei Gründe.

    • Einige vertrauensvolle Parteien haben die Richtlinien nicht befolgt, was zu uneinheitlichen „Über Google anmelden“-Schaltflächen auf den Websites führt.
    • Wenn Sie die Generierung durch die Bibliothek vornehmen, müssen Sie keine Änderungen vornehmen, wenn sich die Branding-Richtlinien für die Anmeldung ändern.

    Zum Erzwingen dieser Regel stellt die JavaScript-Bibliothek nur eine API zum Rendern einer Schaltfläche bereit, aber nicht die API zum Starten des Anmeldevorgangs.

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

    Wir empfehlen, sowohl One Tap als auch die Schaltfläche „Über Google anmelden“ auf Ihrer Website zu verwenden. Aufgrund exponentieller Wartezeit wird One Tap möglicherweise nicht immer angezeigt. Wenn Nutzer sich wirklich mit ihren Google-Konten auf Ihrer Website anmelden möchten, können sie das Haupt-Anmeldedialogfeld aufrufen und sich dort mit der Schaltfläche „Über Google anmelden“ anmelden. Eine erfolgreiche Anmeldung über die Schaltfläche „Über Google anmelden“ löscht den Status der One Tap-Abkühlphase, sodass One Tap bei der nächsten Anmeldung angezeigt werden kann. Andere Schaltflächenflüsse von Google können den One Tap-Abkühlstatus nicht löschen, da sie sich in verschiedenen JavaScript-Binärprogrammen befinden.

    Wenn auf Ihrer Website nur One Tap und nicht die Schaltfläche „Über Google anmelden“ aktiviert ist, kann es zu einem Leistungsabfall für Ihren One Tap-Ablauf kommen, da die exponentiellen Cooldown-Status nicht rechtzeitig gelöscht werden.

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

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

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

    Beachten Sie auch, dass das Parsen und Ausführen des HTML API-Codes einmalig ist.

    • Nach dem Parsen und der Ausführung werden alle nachfolgenden Änderungen am HTML API-Code ignoriert.
    • Es gibt keine API für Entwickler, um den Parsing- oder Ausführungsprozess auszulösen.