Zu FedCM migrieren

In diesem Leitfaden erfahren Sie, welche Änderungen an Ihrer Webanwendung durch die Federated Credentials Management API (FedCM) erforderlich sind.

Wenn FedCM aktiviert ist, werden im Browser Nutzeraufforderungen angezeigt und keine Drittanbieter-Cookies verwendet.

Übersicht

FedCM ermöglicht eine privatere Anmeldung, ohne dass Drittanbieter-Cookies erforderlich sind. Der Browser steuert die Nutzereinstellungen, zeigt Nutzeraufforderungen an und kontaktiert einen Identitätsanbieter wie Google erst nach ausdrücklicher Nutzereinwilligung.

Bei den meisten Websites erfolgt die Migration nahtlos durch abwärtskompatible Updates der JavaScript-Bibliothek von Google Identity Services.

Updates zur Funktion „Automatische Anmeldung“

Die Betaversion von Federated Credential Management (FedCM) für Google Identity Services wurde im August 2023 eingeführt. Viele Entwickler haben die API getestet und uns wertvolles Feedback gegeben.

Google hat von Entwicklern Feedback zur Anforderung für die Nutzergeste beim automatischen Anmeldevorgang in FedCM erhalten. Aus Gründen des Datenschutzes müssen Nutzer in Chrome in jeder Chrome-Instanz bestätigen, dass sie sich mit ihrem Google-Konto auf der Website anmelden möchten, auch wenn sie die Website vor der Einführung von FedCM genehmigt haben. Diese einmalige Bestätigung erfolgt durch einen einzigen Klick auf die Aufforderung zum One-Tap-Login, um die Absicht des Nutzers zur Anmeldung zu bestätigen. Diese Änderung kann bei einigen Websites zu einer anfänglichen Unterbrechung der Conversion-Raten für die automatische Anmeldung führen.

In Chrome M121 wurde vor Kurzem eine Änderung an der UX des automatischen Anmeldevorgangs von FedCM vorgenommen. Die Bestätigung ist nur erforderlich, wenn Drittanbieter-Cookies eingeschränkt sind. Das bedeutet:

  1. Bei der automatischen Anmeldung über FedCM ist keine erneute Bestätigung für wiederkehrende Nutzer erforderlich. Wenn Nutzer die Bestätigung über die FedCM-Benutzeroberfläche noch einmal vornehmen, wird diese Bestätigung auf die Anforderung für Nutzergesten nach der 3PCD-Ära angerechnet.

  2. Bei der automatischen Anmeldung über FedCM wird der Status der Bestätigung geprüft, wenn Drittanbieter-Cookies derzeit manuell von Nutzern eingeschränkt werden oder in Zukunft standardmäßig in Chrome.

Aufgrund dieser Änderung empfehlen wir allen Entwicklern von automatischer Anmeldung, so schnell wie möglich zu FedCM zu migrieren, um Unterbrechungen bei den Conversion-Raten für die automatische Anmeldung zu vermeiden.

Bei der automatischen Anmeldung löst GIS JavaScript FedCM in einer älteren Chrome-Version (vor M121) nicht aus, auch wenn auf Ihrer Website FedCM aktiviert ist.

Unterschiede bei der User Journey

Die One-Tap-Funktionen mit und ohne FedCM sind sich sehr ähnlich und unterscheiden sich nur geringfügig.

Neunutzer mit einer Sitzung

Bei der Verwendung von FedCM wird in One Tap der Domainname der obersten Ebene anstelle des Anwendungsnamens angezeigt.

FedCM verwenden Ohne FedCM
Neuer Nutzer mit einer einzelnen Sitzung, der FedCM verwendet Neunutzer mit einer einzelnen Sitzung ohne FedCM

Wiederkehrender Nutzer mit einer einzelnen Sitzung (automatische Anmeldung deaktiviert)

Bei der Verwendung von FedCM wird in One Tap der Domainname der obersten Ebene anstelle des Anwendungsnamens angezeigt.

FedCM verwenden Ohne FedCM
Kaufprozess für wiederkehrende Nutzer mit einer Sitzung und FedCM (automatische Anmeldung deaktiviert) Nutzerpfad für wiederkehrende Nutzer mit einer einzelnen Sitzung ohne FedCM (automatische Anmeldung deaktiviert)

Zurückkehrender Nutzer mit einer einzelnen Sitzung (mit aktivierter automatischer Anmeldung)

Mit FedCM können Nutzer innerhalb von 5 Sekunden auf das X klicken, um die automatische Anmeldung abzubrechen, anstatt auf die Schaltfläche Abbrechen zu klicken.

FedCM verwenden Ohne FedCM
Aufrufabfolge für wiederkehrende Nutzer mit einer einzelnen Sitzung und FedCM (mit aktivierter automatischer Anmeldung) Nutzerfluss für wiederkehrende Nutzer mit einer einzelnen Sitzung ohne FedCM (mit aktivierter automatischer Anmeldung)

Mehrere Sitzungen

Bei der Verwendung von FedCM wird in One Tap der Domainname der obersten Ebene anstelle des Anwendungsnamens angezeigt.

FedCM verwenden Ohne FedCM
Nutzer mit mehreren Sitzungen, die FedCM verwenden Nutzer mit mehreren Sitzungen ohne FedCM

Hinweis

Prüfen Sie, ob Ihre Browsereinstellungen und ‑version die FedCM API unterstützen. Es wird empfohlen, auf die neueste Version zu aktualisieren.

  • Die FedCM API ist in Chrome 117 oder höher verfügbar.

  • Die Einstellung Anmeldung über Drittanbieter ist in Chrome aktiviert.

  • Wenn Sie die Chrome-Version 119 oder niedriger verwenden, öffnen Sie chrome://flags und aktivieren Sie die experimentelle Funktion FedCmWithoutThirdPartyCookies. Dieser Schritt ist mit der Chrome-Version 120 oder höher nicht erforderlich.

Web-App migrieren

So aktivieren Sie FedCM, bewerten die potenziellen Auswirkungen der Migration und nehmen bei Bedarf Änderungen an Ihrer vorhandenen Webanwendung vor:

1. Fügen Sie ein boolesches Flag hinzu, um FedCM bei der Initialisierung zu aktivieren:

2. Entfernen Sie die Verwendung der Methoden isDisplayMoment(), isDisplayed(), isNotDisplayed() und getNotDisplayedReason() aus Ihrem Code.

Zum Schutz der Privatsphäre von Nutzern gibt der google.accounts.id.prompt-Callback im PromptMomentNotication-Objekt keine Benachrichtigungen zu Displaymomenten mehr zurück. Entfernen Sie jeglichen Code, der von den Methoden für den Displaymoment abhängt. Das sind die Methoden isDisplayMoment(), isDisplayed(), isNotDisplayed() und getNotDisplayedReason().

3. Entfernen Sie die Verwendung der getSkippedReason()-Methode aus Ihrem Code.

Der Zeitpunkt des Überspringens, isSkippedMoment(), wird zwar weiterhin über den Rückruf google.accounts.id.prompt im Objekt PromptMomentNotication aufgerufen, aber es wird kein detaillierter Grund angegeben. Entfernen Sie aus Ihrem Code jeglichen Code, der von der Methode getSkippedReason() abhängt.

Die Benachrichtigung zur geschlossenen Erinnerung, isDismissedMoment(), und die zugehörige Methode für den detaillierten Grund, getDismissedReason(), bleiben unverändert, wenn FedCM aktiviert ist.

4. Entfernen Sie position-Stilattribute aus data-prompt_parent_id und intermediate_iframes.

Größe und Position von Nutzeraufforderungen werden vom Browser gesteuert. Benutzerdefinierte Positionen für One Tap auf dem Computer werden nicht unterstützt.

5. Aktualisieren Sie bei Bedarf das Seitenlayout.

Größe und Position von Nutzeraufforderungen werden vom Browser gesteuert. Je nach Layout der einzelnen Seiten werden einige Inhalte möglicherweise überlagert, da benutzerdefinierte Positionen für One Tap auf dem Computer nicht unterstützt werden, z. B. das style-Attribut, data-prompt_parent_id, intermediate_iframes, benutzerdefinierter iframe und andere kreative Methoden.

Ändern Sie das Seitenlayout, um die Nutzerfreundlichkeit zu verbessern, wenn wichtige Informationen verdeckt sind. Konstruieren Sie Ihre UX nicht um den Prompt für die One-Tap-Funktion herum, auch wenn Sie davon ausgehen, dass er sich an der Standardposition befindet. Da die FedCM API browserbasiert ist, kann die Position des Prompts je nach Browseranbieter leicht variieren.

6. Fügen Sie dem übergeordneten Frame das Attribut allow="identity-credentials-get" hinzu, wenn Ihre Webanwendung die One Tap API über iframes mit unterschiedlichen Ursprüngen aufruft.

Ein Iframe gilt als seitenübergreifend, wenn seine Quelle nicht genau mit der des übergeordneten Elements übereinstimmt. Beispiel:

  • Unterschiedliche Domains: https://example1.com und https://example2.com
  • Unterschiedliche Top-Level-Domains: https://example.uk und https://example.jp
  • Subdomains: https://example.com und https://login.example.com

Wenn Sie One Tap in einem iframe mit unterschiedlichen Ursprüngen verwenden, kann das für Nutzer verwirrend sein. In der One-Tap-Aufforderung wird der Name der Top-Level-Domain und nicht der des Iframes angezeigt, um das Abfangen von Anmeldedaten zu verhindern. Die ID-Tokens werden jedoch an den Ursprung des iframes ausgestellt. Weitere Informationen finden Sie in diesem GitHub-Problem.

Da diese Abweichung irreführend sein kann, ist es eine unterstützte Methode, One Tap nur in ursprungsübergreifenden, aber auf derselben Website befindlichen Iframes zu verwenden. Beispiel: Eine Seite in der Top-Level-Domain https://www.example.com, auf der eine Seite mit One Tap auf https://login.example.com über einen iFrame eingebettet ist. In der Aufforderung für One Tap wird „Über google.com bei beispiel.de anmelden“ angezeigt.

Alle anderen Fälle, z. B. unterschiedliche Domains, werden nicht unterstützt. Verwenden Sie stattdessen alternative Integrationsmethoden wie:

  • Implementieren Sie die Schaltfläche Über Google anmelden.
  • One Tap für die Top-Level-Domain implementieren
  • Die OAuth 2.0-Endpunkte von Google für eine individuellere Integration verwenden
  • Wenn Sie die Website eines Drittanbieters in einen iFrame einbetten und die One Tap-Implementierung nicht ändern können, können Sie verhindern, dass die One Tap-Aufforderung im iFrame angezeigt wird. Entferne dazu das Attribut allow="identity-credentials-get" aus dem iframe-Tag im übergeordneten Frame. Dadurch wird die Aufforderung unterdrückt und Sie können Ihre Nutzer direkt zur Anmeldeseite der eingebetteten Website weiterleiten.

Wenn die One Tap API von iframes mit unterschiedlichen Ursprüngen aufgerufen wird, müssen Sie das Attribut allow="identity-credentials-get" in jedem übergeordneten Frame-iframe-Tag hinzufügen:

  <iframe src="https://your.cross-origin/onetap.page" allow="identity-credentials-get"></iframe>

Wenn Ihre App einen Iframe verwendet, der einen anderen Iframe enthält, muss das Attribut jedem Iframe hinzugefügt werden, einschließlich aller untergeordneten Iframes.

Betrachten Sie beispielsweise das folgende Szenario:

  • Das oberste Dokument (https://www.example.uk) enthält einen iFrame namens „Iframe A“, in dem eine Seite (https://logins.example.com) eingebettet ist.

  • Diese eingebettete Seite (https://logins.example.com) enthält auch einen iFrame namens „Iframe B“, in dem eine Seite (https://onetap.example2.com) eingebettet ist, auf der One Tap gehostet wird.

    Damit One Tap richtig angezeigt werden kann, muss das Attribut sowohl dem Iframe A- als auch dem Iframe B-Tag hinzugefügt werden.

    Bereiten Sie sich darauf vor, dass Kunden Fragen dazu stellen, warum der One Tap-Prompt nicht angezeigt wird. Andere Websites mit anderen Ursprüngen können Ihre Seiten, auf denen One Tap gehostet wird, in ihren iframes einbetten. Sie erhalten möglicherweise mehr Supportanfragen von Endnutzern oder anderen Website-Inhabern, die sich darauf beziehen, dass One Tap nicht angezeigt wird. Die Aktualisierungen können nur von den Websiteinhabern auf ihren Seiten vorgenommen werden. Sie können jedoch Folgendes tun, um die Auswirkungen zu minimieren:

  • Aktualisieren Sie Ihre Entwicklerdokumentation, um anzugeben, wie der Iframe richtig eingerichtet wird, um Ihre Website aufzurufen. Sie können in Ihrer Dokumentation einen Link zu dieser Seite einfügen.

  • Aktualisieren Sie gegebenenfalls die Seite mit den FAQs für Entwickler.

  • Informiere dein Supportteam über diese bevorstehende Änderung und bereite dich frühzeitig auf die Antwort auf die Anfrage vor.

  • Wenden Sie sich proaktiv an die betroffenen Partner, Kunden oder Websiteinhaber, um die Umstellung auf FedCM reibungslos zu gestalten.

7. Fügen Sie diese Anweisungen Ihrer Content Security Policy (CSP) hinzu.

Dieser Schritt ist optional, da nicht alle Websites einen CSP definieren.

  • Wenn auf Ihrer Website keine CSP verwendet wird, sind keine Änderungen erforderlich.

  • Wenn Ihr CSP für die aktuelle One-Tap-Funktion funktioniert und Sie connect-src, frame-src, script-src, style-src oder default-src nicht verwenden, sind keine Änderungen erforderlich.

  • Andernfalls folgen Sie dieser Anleitung, um Ihren Preisvergleichsportalanbieter einzurichten. Ohne korrekte CSP-Einrichtung wird FedCM One Tap nicht auf der Website angezeigt.

8. Entfernen Sie die Unterstützung von Accelerated Mobile Pages (AMP) für die Anmeldung.

Die Unterstützung der Nutzeranmeldung für AMP ist eine optionale Funktion von GIS, die in Ihrer Webanwendung implementiert sein kann. In diesem Fall

Löschen Sie alle Verweise auf:

  • amp-onetap-google-Benutzerdefiniertes Element und 
  • <script async custom-element="amp-onetap-google" src="https://cdn.ampproject.org/v0/amp-onetap-google-0.1.js"></script>

    Sie können Anmeldeanfragen von AMP an den HTML-Anmeldevorgang Ihrer Website weiterleiten. Die zugehörige Intermediate Iframe Support API ist davon nicht betroffen.

Migration testen und prüfen

Nachdem Sie die erforderlichen Änderungen anhand der vorherigen Schritte vorgenommen haben, können Sie prüfen, ob die Migration erfolgreich war.

  1. Prüfen Sie, ob Ihr Browser FedCM unterstützt und ob Sie eine Google-Kontositzung haben.

  2. Rufen Sie die Seite(n) für die One-Tap-Funktion in Ihrer App auf.

  3. Prüfen Sie, ob die Aufforderung für die One-Tap-Funktion angezeigt wird und die zugrunde liegenden Inhalte sicher überlagert.

  4. Prüfen Sie, ob beim Anmelden in Ihrer Anwendung mit One Tap die richtigen Anmeldedaten an Ihren Endpunkt oder Ihre Rückrufmethode zurückgegeben werden.

  5. Wenn die automatische Anmeldung aktiviert ist, prüfen Sie, ob die Abmeldung funktioniert und die richtigen Anmeldedaten an Ihren Endpunkt oder Ihre Rückrufmethode zurückgegeben werden.

Wartezeit für One Tap

Wenn Sie rechts oben auf „One Tap“  klicken, wird die Aufforderung geschlossen und die Wartezeit beginnt, während der die Aufforderung für „One Tap“ vorübergehend nicht angezeigt wird. Wenn Sie in Chrome möchten, dass die Aufforderung zum Bezahlen mit nur einem Tastenanschlag noch einmal angezeigt wird, bevor die Wartezeit abgelaufen ist, können Sie den Wartezeitstatus zurücksetzen. Klicken Sie dazu in der Adressleiste auf das Schlosssymbol und dann auf die Schaltfläche Berechtigung zurücksetzen.

Ruhezeit für die automatische Anmeldung

Beim Testen der automatischen Anmeldung mit One Tap über FedCM gibt es zwischen jedem automatischen Anmeldeversuch eine Ruhezeit von 10 Minuten. Die Ruhezeit kann nicht zurückgesetzt werden. Sie müssen 10 Minuten warten oder ein anderes Google-Konto für den Test verwenden, um die automatische Anmeldung wieder zu aktivieren.

Hilfreiche Ressourcen

Das Privacy Sandbox Analysis Tool (PSAT) ist eine Chrome DevTools-Erweiterung, die bei der Einführung alternativer APIs wie FedCM unterstützt. Das Tool scannt Ihre Website auf betroffene Funktionen und stellt eine Liste mit empfohlenen Änderungen bereit.