Google Log-in mit FedCM APIs

<ph type="x-smartling-placeholder">

In diesem Leitfaden werden die Auswirkungen der Einstellung von Drittanbieter-Cookies auf die Google Anmeldeplattformbibliothek. Zu den Themen gehören die Zeitachse und Nächste Schritte für ein abwärtskompatibles Update der Bibliothek, Auswirkungen abschätzen und prüfen, ob die Nutzeranmeldung weiterhin möglich ist wie erwartet funktionieren und gegebenenfalls eine Anleitung zur Aktualisierung Ihrer Web-App. Optionen zur Verwaltung des Übergangszeitraums und zur Hilfe werden ebenfalls behandelt.

Status der Bibliothek

Neue Web-Apps dürfen die eingestellte Google Log-in-Plattform nicht mehr verwenden und Apps, die die Bibliothek verwenden, können bis auf Weiteres fortgesetzt werden. A Das endgültige Ablaufdatum für die Bibliothek wurde noch nicht festgelegt. Weitere Informationen finden Sie unter Einstellung des Supports und Einstellung.

Das Blockieren von Drittanbieter-Cookies durch die Privacy Sandbox in Chrome wirkt sich auf Web-Apps aus die die Bibliothek der Google Log-in-Plattform verwenden. Um das bestehende Verhalten beizubehalten, ohne dass Drittanbieter-Cookies verwendet werden müssen, ist ein abwärtskompatibles Update Dieser Bibliothek werden FedCM APIs hinzugefügt. Die meisten Änderungen sind nahtlos, Aktualisierung der Änderungen bei Aufforderungen zur Nutzereinwilligung, iFrames permissions-policy und Content Security Policy (CSP). Diese Änderungen kann sich auf Ihre Webanwendung auswirken und erfordert Änderungen am Anwendungscode und der Website. Konfiguration.

Während der Übergangsphase wird über eine Konfigurationsoption festgelegt, ob FedCM APIs werden bei der Nutzeranmeldung verwendet.

Zeitachse

Zuletzt aktualisiert im Juli 2024

Dies sind die Daten und Änderungen, die sich auf das Anmeldeverhalten der Nutzer auswirken:

  • März 2023 Der Support für die Google Log-in-Plattform wird eingestellt Bibliothek.
  • Januar 2024: Chrome blockiert 1% der Drittanbieter-Cookies, der Google Log-in-Funktion Plattformbibliothek wird eine vorübergehende Ausnahme von Drittanbieter-Cookies gewährt durch einen Test zur Einstellung blockiert.
  • Juli 2024 beginnt und Bibliothek der Google Log-in-Plattform Unterstützung für FedCM APIs hinzugefügt. Standardmäßig steuert Google den Prozentsatz der Nutzeranmeldungsanfragen über FedCM in dieser Zeit. Web-Apps können können Sie dieses Verhalten explizit mit dem Parameter use_fedcm überschreiben.
  • Obligatorische Einführung (Datum wird festgelegt) von FedCM APIs durch Google Anmeldeplattformbibliothek, nach der der use_fedcm-Parameter ignoriert wird, und für alle Anmeldeanfragen von Nutzern wird FedCM verwendet.

Nach der Umstellung auf FedCM APIs ist die Bibliothek der Google Log-in-Plattform nicht mehr verfügbar die von der Blockierung von Drittanbieter-Cookies betroffen sind. Neuigkeiten zu Drittanbieter-Cookies finden Sie in der Privacy Sandbox-Zeitachse von Chrome.

Nächste Schritte

Es gibt drei Optionen:

  1. Führen Sie eine Folgenabschätzung durch und aktualisieren Sie bei Bedarf Ihre Webanwendung. Bei diesem Ansatz wird bewertet, ob Funktionen, die Änderungen an Ihrer Webanwendung erfordern, verwendet wird. Eine entsprechende Anleitung finden Sie im nächsten Abschnitt dieses Leitfadens.
  2. Verschieben Sie die GIS-Bibliothek (Google Identity Services). Um auf die neuesten und unterstützte Anmeldebibliothek wird dringend empfohlen. Folgen Sie dazu dieser Anleitung.
  3. Nichts unternehmen: Ihre Web-App wird automatisch aktualisiert, wenn der Die Google Log-in-Bibliothek wird für die Nutzeranmeldung in die FedCM APIs verschoben. Dies ist die nicht zu wenig Arbeit. Es besteht jedoch das Risiko, dass Nutzer sich nicht mehr Ihrer Webanwendung.

Folgenabschätzung durchführen

Folgen Sie dieser Anleitung, um herauszufinden, ob Ihre Web-App nahtlos aktualisiert werden kann. oder wenn Änderungen notwendig sind, um Nutzer können sich nicht anmelden, wenn die Bibliothek der Google Log-in-Plattform vollständig verwendet FedCM APIs.

Einrichtung

Browser-APIs und die neueste Version der Google Log-in-Plattformbibliothek die für die Verwendung von FedCM bei der Nutzeranmeldung erforderlich sind.

Bevor Sie fortfahren:

  • Aktualisieren Sie Chrome auf die neueste Version. Chrome für Android erfordert Version M128 oder höher und kann nicht mit früheren Versionen getestet werden.

  • Öffnen Sie chrome://flags und legen Sie die folgenden Werte für die folgenden Funktionen fest:

    • #fedcm-authz Aktiviert, wenn für Ihre Website eine Content Security Policy verwendet wird das https://accounts.google.com/gsi/ottoken blockiert.
    • #tracking-protection-3pcd aktiviert
    • #third-party-cookie-deprecation-trial Deaktiviert
    • #tpcd-metadata-grants Deaktiviert
    • #tpcd-heuristics-grants Deaktiviert

    und starten Sie Chrome neu.

  • Legen Sie use_fedcm beim Initialisieren der Google Log-in-Plattform auf true fest Bibliothek in Ihrer Webanwendung. In der Regel sieht die Initialisierung so aus:

    • gapi.client.init({use_fedcm: true}) oder
    • gapi.auth2.init({use_fedcm: true}) oder
    • gapi.auth2.authorize({use_fedcm: true}).

  • Im Cache gespeicherte Versionen der Google Log-in-Plattformbibliothek entwerten. In der Regel ist dieser Schritt nicht erforderlich, da die neueste Version der Bibliothek direkt in den Browser heruntergeladen, indem api.js, client.js oder platform.js in einem <script src>-Tag (für die Anfrage können folgende Werte verwendet werden) Bundle-Namen für die Bibliothek).

  • Bestätigen Sie die OAuth-Einstellungen für Ihre OAuth-Client-ID:

    1. Öffnen Sie im Google API Consoledie Seite „Anmeldedaten“

    2. Überprüfen Sie, ob der URI Ihrer Website in Autorisierte JavaScript-Quellen Der URI enthält das Schema und voll qualifizierten Hostnamen. Beispiel: https://www.example.com.

    3. Optional können Anmeldedaten mithilfe einer Weiterleitung an einen Endpunkt zurückgegeben werden statt über einen JavaScript-Callback. In diesem Fall Prüfen Sie, ob Ihre Weiterleitungs-URIs unter Autorisierte Weiterleitungs-URIs enthalten sind. Weiterleitungs-URIs enthalten das Schema, den voll qualifizierten Hostnamen und den Pfad Außerdem müssen sie den Validierungsregeln für Weiterleitungs-URIs entsprechen. Beispiel: https://www.example.com/auth-receiver.

Test

Folgen Sie der Anleitung unter „Einrichtung“:

Anfrage zur Google Log-in-Bibliothek suchen

Prüfen, ob Änderungen an permissions-policy und Content Security Policy vorgenommen wurden indem Sie die Anfrage für die Bibliothek der Google Log-in-Plattform prüfen. Suchen Sie dazu die Anfrage anhand des Namens und der Quelle der Bibliothek:

  • Öffnen Sie in Chrome in den Entwicklertools den Bereich Netzwerk und aktualisieren Sie die Seite.
  • Verwenden Sie die Werte in den Spalten Domain und Name, um die Bibliothek zu finden. Anfrage: <ph type="x-smartling-placeholder">
      </ph>
    • Domain ist apis.google.com und
    • Der Name lautet entweder api.js, client.js oder platform.js. Die spezifischen für Name hängt vom vom Dokument angeforderten Bibliotheks-Bundle ab.

Filtern Sie beispielsweise in der Spalte Domain nach apis.google.com und platform.js in der Spalte Name.

Richtlinie für iFrame-Berechtigungen prüfen

Ihre Website verwendet möglicherweise die Google Log-in-Plattformbibliothek in einem ursprungsübergreifenden iFrame. In diesem Fall ist ein Update erforderlich.

Nachdem Sie der Anleitung Google Log-in-Bibliotheksanfrage suchen die Google Log-in-Bibliotheksanfrage in den Entwicklertools Netzwerk und suchen Sie die Kopfzeile Sec-Fetch-Site in der Abschnitt Request Headers auf dem Tab Headers Wenn der Wert des Headers lautet:

  • same-siteoder same-origin, dann gelten die ursprungsübergreifenden Richtlinien nicht und keine Änderungen erforderlich sind.
  • Bei Verwendung eines iFrames können cross-origin-Änderungen erforderlich sein.

So prüfen Sie, ob ein iFrame vorhanden ist:

  • Wählen Sie in den Chrome-Entwicklertools den Bereich Elemente aus.
  • Verwenden Sie Strg+F, um einen iFrame im Dokument zu finden.

Wenn ein iFrame gefunden wird, prüfen Sie das Dokument auf Aufrufe von gapi.auth2. Funktionen oder script src-Anweisungen, die die Google Log-in-Bibliothek laden innerhalb des iFrames platziert. Trifft das auf Sie zu, haben Sie folgende Möglichkeiten:

Wiederholen Sie diesen Vorgang für jeden iFrame im Dokument. iFrames können verschachtelt sein, müssen Sie die Anweisung "allow" zu allen übergeordneten iFrames hinzufügen, die Sie umgeben.

Content Security Policy prüfen

Wenn Ihre Website eine Content Security Policy verwendet, müssen Sie möglicherweise Ihre CSP aktualisieren, um die Nutzung der Google Log-in-Bibliothek zulassen.

Nachdem Sie der Anleitung Google Log-in-Bibliotheksanfrage suchen die Google Log-in-Bibliotheksanfrage in den Entwicklertools Netzwerk und suchen Sie die Kopfzeile Content-Security-Policy in der Abschnitt Response Headers (Antwortheader) auf dem Tab Headers (Header).

Wenn der Header nicht gefunden wird, sind keine Änderungen erforderlich. Prüfen Sie andernfalls, ob eine der folgenden diese CSP-Anweisungen sind im CSP-Header definiert und aktualisieren sie folgendermaßen:

  • https://apis.google.com/js/, https://accounts.google.com/gsi/ werden hinzugefügt, und https://acounts.google.com/o/fedcm/ auf beliebige connect-src, default-src- oder frame-src-Anweisungen.

  • Wird https://apis.google.com/js/bundle-name.js zu script-src hinzugefügt . Ersetzen Sie bundle-name.js durch api.js, client.js oder platform.jsbasierend auf dem Bibliotheks-Bundle die Dokumentanfragen.

Auf Änderungen von Nutzeraufforderungen prüfen

Es gibt einige Unterschiede im Verhalten von Nutzeraufforderungen. FedCM fügt ein modales Dialogfeld hinzu. die im Browser angezeigt werden, und aktualisiert die Aktivierungsanforderungen für Nutzer.

Bild des modalen FedCM-Dialogfelds

Überprüfen Sie das Layout Ihrer Website, um sicherzustellen, dass die zugrunde liegenden Inhalte zuverlässig verarbeitet werden können. überlagert und vorübergehend vom modalen Dialogfeld des Browsers verdeckt. Wenn dieses müssen Sie vielleicht das Layout oder die Position einiger Elemente Ihrer Website.

Nutzeraktivierung

FedCM enthält aktualisierte Anforderungen für die Nutzeraktivierung. Durch Drücken einer Taste oder Das Klicken auf einen Link sind Beispiele für Nutzergesten, mit denen Drittanbieterquellen gefunden werden können. um Netzwerkanfragen zu senden oder Daten zu speichern. Bei FedCM fordert der Browser Einwilligung der Nutzer in den folgenden Fällen:

  • sich ein Nutzer zuerst über eine neue Browserinstanz in einer Web-App anmeldet oder
  • GoogleAuth.signIn wird aufgerufen.

Wenn sich der Nutzer schon einmal auf Ihrer Website angemeldet hat, erhalten Sie Anmeldedaten des Nutzers beim Initialisieren der Google Log-in-Bibliothek mit gapi.auth2.init ohne weitere Nutzerinteraktionen.

Da Drittanbieter-Cookies eingestellt werden, ist dies nur möglich, wenn die Der Nutzer hat sich mindestens einmal für die FedCM-Anmeldung registriert.

Wenn Sie FedCM aktivieren und GoogleAuth.signIn anrufen, erfolgt beim nächsten Mal Nutzer Ihre Website besucht, kann gapi.auth2.init die Anmeldedaten des Nutzers abrufen Informationen während der Initialisierung ohne Nutzerinteraktion.

Gängige Anwendungsfälle

Die Entwicklerdokumentation für die Google Log-in-Bibliothek enthält Leitfäden und Code. Beispiele für häufige Anwendungsfälle. In diesem Abschnitt wird erläutert, wie sich FedCM verhalten.

  • Google Log-in in Ihre Webanwendung integrieren

    In dieser demo rendern ein <div>-Element und eine Klasse die Schaltfläche. Für bereits angemeldete Nutzer gibt das Ereignis der Seite onload den Nutzer zurück Anmeldedaten. Für die Anmeldung und das Einrichten eines neuen Kontos ist eine Interaktion des Nutzers erforderlich Sitzung.

    Die Initialisierung der Bibliothek erfolgt durch die Klasse g-signin2, die diese aufruft gapi.load und gapi.auth2.init.

    Eine Nutzergeste, ein Ereignis vom Typ onclick eines <div>-Elements, ruft auth2.signIn auf. bei der Anmeldung oder auth2.signOut bei der Abmeldung

  • Benutzerdefinierte Google Log-in-Schaltfläche erstellen

    In demo one wird mit benutzerdefinierten Attributen das Erscheinungsbild von Anmeldeschaltfläche und für bereits angemeldete Nutzer das Ereignis der Seite onload gibt die Anmeldedaten des Nutzers zurück. Für die Anmeldung ist eine Nutzerinteraktion erforderlich. eine neue Sitzung zu starten.

    Die Initialisierung der Bibliothek erfolgt über ein onload-Ereignis für die platform.js-Bibliothek und die Schaltfläche wird von gapi.signin2.render angezeigt.

    Durch eine Nutzergeste, die auf die Anmeldeschaltfläche drückt, wird auth2.signIn aufgerufen.

    In Demo zwei werden ein <div>-Element, CSS-Stile und eine benutzerdefinierte Grafik wird verwendet, um die Darstellung der Anmeldeschaltfläche zu steuern. Nutzerinteraktion ist erforderlich, um sich anzumelden und eine neue Sitzung einzurichten.

    Die Initialisierung der Bibliothek erfolgt beim Laden des Dokuments mithilfe einer Startfunktion. die gapi.load, gapi.auth2.init und gapi.auth2.attachClickHandler

    Eine Nutzergeste, ein Ereignis vom Typ onclick eines <div>-Elements, ruft auth2.signIn auf. Verwenden von auth2.attachClickHandler bei der Anmeldung oder auth2.signOut auf melden Sie sich ab.

  • Sitzungsstatus des Nutzers überwachen

    In dieser demo wird das Drücken einer Schaltfläche zum An- und Abmelden verwendet. Für die Anmeldung und das Erstellen einer neuen Sitzung ist eine Nutzerinteraktion erforderlich.

    Die Initialisierung der Bibliothek erfolgt direkt durch Aufrufen von gapi.load. gapi.auth2.init und danach gapi.auth2.attachClickHandler() platform.js wird mit script src geladen.

    Eine Nutzergeste, ein Ereignis vom Typ onclick eines <div>-Elements, ruft auth2.signIn auf. Verwenden von auth2.attachClickHandler bei der Anmeldung oder auth2.signOut auf melden Sie sich ab.

  • Zusätzliche Berechtigungen anfordern

    In dieser demo wird per Tastendruck zusätzliches OAuth 2.0 angefordert. Zugriffsbereiche, rufen Sie ein neues Zugriffstoken ab. Für bereits angemeldete Nutzer Seiten-onload-Ereignis gibt Nutzeranmeldedaten zurück. Nutzerinteraktion ist erforderlich um sich anzumelden und eine neue Sitzung zu starten.

    Die Initialisierung der Bibliothek erfolgt über das Ereignis onload für die platform.js über einen Anruf bei gapi.signin2.render.

    Eine Nutzergeste, die auf ein <button>-Element klickt, löst eine Anfrage für zusätzliche OAuth 2.0-Bereiche mit googleUser.grant oder auth2.signOut wenn Sie sich abmelden.

  • Google Log-in mit Hörern einbinden

    In dieser demo gilt für bereits angemeldete Nutzer das Ereignis der Seite onload. gibt die Anmeldedaten des Nutzers zurück. Für die Anmeldung ist eine Nutzerinteraktion erforderlich. eine neue Sitzung zu starten.

    Die Initialisierung der Bibliothek erfolgt beim Laden des Dokuments mithilfe einer Startfunktion. die gapi.load, gapi.auth2.init und gapi.auth2.attachClickHandler Als Nächstes auth2.isSignedIn.listen und auth2.currentUser.listen werden verwendet, um eine Benachrichtigung über Änderungen einzurichten an Sitzungsstatus. Zuletzt wird auth2.SignIn aufgerufen, um Anmeldedaten für angemeldeten Nutzer.

    Eine Nutzergeste, ein Ereignis vom Typ onclick eines <div>-Elements, ruft auth2.signIn auf. Verwenden von auth2.attachClickHandler bei der Anmeldung oder auth2.signOut auf melden Sie sich ab.

  • Google Log-in für serverseitige Apps

    In dieser demo wird eine Nutzergeste verwendet, um einen OAuth 2.0-Authentifizierungscode anzufordern. und ein JS-Callback startet einen AJAX-Aufruf, um die Antwort an das Back-End zu senden. Server für die Überprüfung.

    Die Initialisierung der Bibliothek erfolgt mit einem onload-Ereignis für platform.js. die über eine Startfunktion gapi.load und gapi.auth2.init.

    Eine Nutzergeste, die auf ein <button>-Element klickt, löst eine Anfrage für durch Aufrufen von auth2.grantOfflineAccess einen Autorisierungscode erhalten.

  • Plattformübergreifende SSO

    FedCM verlangt die Einwilligung für jede Browserinstanz, selbst wenn Android-Nutzer bereits angemeldet sind, ist eine einmalige Einwilligung erforderlich.

Übergangsphase verwalten

Während der Übergangsphase kann ein bestimmter Prozentsatz der Nutzer FedCM verwenden. kann der genaue Prozentsatz variieren und sich im Laufe der Zeit ändern. Standardmäßig steuert Google wie viele Anmeldeanfragen FedCM verwenden. Sie können sich jedoch mit FedCM während der Übergangsphase. Am Ende der Übergangsphase FedCM wird obligatorisch und wird für alle Anmeldeanfragen verwendet.

Wenn Sie sich für die Option entscheiden, wird der Nutzer durch den FedCM-Anmeldevorgang weitergeleitet, während er die Nutzer über den bestehenden Anmeldevorgang weiterleiten. Dieses Verhalten ist werden über den Parameter use_fedcm gesteuert.

Opt-in

Es kann hilfreich sein, festzulegen, ob alle oder nur einige Anmeldeversuche an Ihrem FedCM APIs verwendet. Setzen Sie dazu use_fedcm bei der Initialisierung auf true der Plattformbibliothek. In diesem Fall werden für die Anmeldeanfrage des Nutzers FedCM APIs verwendet.

Deaktivieren

Während der Übergangsphase versucht ein bestimmter Prozentsatz der Nutzer, die sich auf Ihrer Website anmelden. verwenden standardmäßig FedCM APIs. Wenn Sie mehr Zeit benötigen, um Änderungen an Ihrem können Sie die FedCM APIs vorübergehend deaktivieren. Legen Sie dazu use_fedcm auf false, wenn die Plattformbibliothek initialisiert wird. Die Nutzeranmeldung werden in diesem Fall keine FedCM APIs verwendet.

Nach der obligatorischen Übernahme werden alle use_fedcm-Einstellungen vom Bibliothek der Google Log-in-Plattform.

Hilfe

Suchen Sie in Stack Overflow oder stellen Sie Fragen mit dem Tag google-signin.