Google Identity Services wird zu FedCM APIs migriert. Folgen Sie der Migrationsanleitung, um potenzielle Änderungen zu überprüfen und negative Auswirkungen auf die Nutzeranmeldung auf Ihrer Website zu vermeiden.

Diese Seite wurde von der Cloud Translation API übersetzt.

Einrichtung

Wenn Sie Ihrer Website die Schaltfläche „Über Google anmelden“ oder One Tap- und automatische Anmeldeaufforderungen hinzufügen möchten, müssen Sie zuerst Folgendes tun:

eine OAuth 2.0-Client-ID abrufen,
OAuth-Branding und ‑Einstellungen konfigurieren,
die Clientbibliothek für Google Identity Services laden und
optional eine Content Security Policy einrichten und
Cross-Origin-Opener-Richtlinie aktualisieren

Google API-Client-ID abrufen

Wenn Sie Google Identity Services auf Ihrer Website aktivieren möchten, müssen Sie zuerst eine Google API-Client-ID einrichten. Führen Sie dazu folgende Schritte aus:

Öffnen Sie die des .
Erstellen oder wählen Sie ein -Projekt aus. Wenn Sie bereits ein Projekt für die Schaltfläche „Über Google anmelden“ oder Google One Tap haben, verwenden Sie das vorhandene Projekt und die Webclient-ID. Wenn Sie Produktionsanwendungen erstellen, sind möglicherweise mehrere Projekte erforderlich. Wiederholen Sie die restlichen Schritte in diesem Abschnitt für jedes Projekt, das Sie verwalten.
Klicken Sie auf Client erstellen und wählen Sie als Anwendungstyp Webanwendung aus, um eine neue Client-ID zu erstellen. Wenn Sie eine vorhandene Client-ID verwenden möchten, wählen Sie den Typ Webanwendung aus.
Fügen Sie den URI Ihrer Website zu Autorisierte JavaScript-Quellen hinzu. Der URI enthält nur das Schema und den vollständig qualifizierten Hostnamen. Beispiel: https://www.example.com

Wichtig: Fügen Sie für lokale Tests oder die Entwicklung sowohl http://localhost als auch http://localhost:<port_number> hinzu.
Wichtig: Google One Tap kann nur in HTTPS-Domains angezeigt werden.
Optional können Anmeldedaten auch über eine Weiterleitung an einen von Ihnen gehosteten Endpunkt statt über einen JavaScript-Callback zurückgegeben werden. Fügen Sie in diesem Fall Ihre Weiterleitungs-URIs unter Autorisierte Weiterleitungs-URIs hinzu. Weiterleitungs-URIs enthalten das Schema, den voll qualifizierten Hostnamen und den Pfad und müssen den Gültigkeitsregeln für Weiterleitungs-URIs entsprechen. Beispiel: https://www.example.com/auth-receiver.

Fügen Sie die Client-ID in Ihrer Webanwendung mit den Feldern data-client_id oder client_id ein.

OAuth-Zustimmungsbildschirm konfigurieren

Sowohl die Anmeldung über Google als auch die One-Tap-Authentifizierung umfassen einen Einwilligungsbildschirm, auf dem Nutzer sehen, welche Anwendung Zugriff auf ihre Daten anfordert, welche Art von Daten angefordert werden und welche Nutzungsbedingungen gelten.

Öffnen Sie die im Bereich „Google Auth Platform“ der.
Wählen Sie bei Aufforderung das Projekt aus, das Sie gerade erstellt haben.
Füllen Sie auf der Seite das Formular aus und klicken Sie auf die Schaltfläche „Speichern“.
1. Name der Anwendung:Der Name der Anwendung, für die die Einwilligung eingeholt werden soll. Der Name sollte Ihre App genau widerspiegeln und mit dem Namen der App übereinstimmen, den Nutzer an anderer Stelle sehen.
2. App-Logo:Dieses Bild wird auf dem Einwilligungsbildschirm angezeigt, damit Nutzer Ihre App erkennen. Das Logo wird auf dem Einwilligungsbildschirm für die Anmeldung über Google und in den Kontoeinstellungen angezeigt, aber nicht im One-Tap-Dialogfeld.
3. Support-E-Mail-Adresse:Wird auf dem Zustimmungsbildschirm für den Nutzersupport und für G Suite-Administratoren angezeigt, die den Zugriff auf Ihre Anwendung für ihre Nutzer prüfen. Diese E-Mail-Adresse wird Nutzern auf dem Einwilligungsbildschirm für die Anmeldung über Google angezeigt, wenn sie auf den Namen der Anwendung klicken.
4. Autorisierte Domains:Um Sie und Ihre Nutzer zu schützen, erlaubt Google die Nutzung autorisierter Domains nur solchen Anwendungen, die OAuth verwenden. Die Links Ihrer Apps müssen auf autorisierten Domains gehostet werden. Weitere Informationen
5. Link zur Startseite der App:Wird auf dem Einwilligungsbildschirm für „Über Google anmelden“ und unter der Schaltfläche „Weiter als“ mit einem DSGVO-konformen Haftungsausschluss angezeigt. Muss auf einer autorisierten Domain gehostet werden.
6. Link zur Datenschutzerklärung der Anwendung:Wird auf dem Einwilligungsbildschirm für die Anmeldung über Google und unter der Schaltfläche „Als [Name] fortfahren“ angezeigt. Muss auf einer autorisierten Domain gehostet werden.
7. Link zu den Nutzungsbedingungen der App (optional): Wird auf dem Bildschirm für die Einwilligung bei der Anmeldung über Google und unter der Schaltfläche „Als [Name] fortfahren“ angezeigt. Muss auf einer autorisierten Domain gehostet werden.
Rufen Sie auf, um Bereiche für Ihre App zu konfigurieren.
1. Bereiche für Google APIs: Mit Bereichen kann Ihre Anwendung auf die privaten Daten Ihrer Nutzer zugreifen. Für die Authentifizierung ist der Standardumfang (E-Mail, Profil, OpenID) ausreichend. Sie müssen keine vertraulichen Bereiche hinzufügen. Im Allgemeinen wird empfohlen, Zugriffsbereiche schrittweise anzufordern, wenn der Zugriff erforderlich ist, und nicht im Voraus.
Prüfen Sie den „Überprüfungsstatus“. Wenn Ihre Anwendung bestätigt werden muss, klicken Sie auf die Schaltfläche „Zur Überprüfung einreichen“, um sie einzureichen. Weitere Informationen finden Sie unter Anforderungen an die OAuth-Bestätigung.

OAuth-Einstellungen bei der Anmeldung anzeigen

One Tap mit FedCM

OAuth-Zustimmungseinstellungen, wie sie von Chrome One Tap mit FedCM angezeigt werden

Die autorisierte Domain auf oberster Ebene wird bei der Nutzereinwilligung in Chrome angezeigt. Die Verwendung von One Tap nur in ursprungsübergreifenden, aber auf derselben Website befindlichen iframes ist eine unterstützte Methode.

One Tap ohne FedCM

OAuth-Zustimmungseinstellungen, wie sie von „Mit nur einem Tippen“ angezeigt werden

Der Name der App wird während der Nutzereinwilligung angezeigt.

Abbildung 1. OAuth-Zustimmungseinstellungen, die von One Tap in Chrome angezeigt werden

Clientbibliothek laden

Laden Sie die Clientbibliothek der Google Identity Services auf jeder Seite, auf der sich ein Nutzer anmelden kann. Verwenden Sie das folgende Code-Snippet:

<script src="https://accounts.google.com/gsi/client" async></script>

Sie können die Ladegeschwindigkeit Ihrer Seiten optimieren, wenn Sie das Script mit dem Attribut async laden.

Eine Liste der von der Bibliothek unterstützten Methoden und Eigenschaften finden Sie in den HTML- und JavaScript-API-Referenzen.

Content Security Policy

Eine Content Security Policy ist zwar optional, wird aber empfohlen, um Ihre App zu schützen und Cross-Site-Scripting-Angriffe (XSS) zu verhindern. Weitere Informationen finden Sie unter Einführung in CSP und CSP und XSS.

Ihre Content-Sicherheitsrichtlinie kann eine oder mehrere Anweisungen enthalten, z. B. connect-src, frame-src, script-src, style-src oder default-src.

Wenn Ihr CSP Folgendes enthält:

connect-src-Richtlinie https://accounts.google.com/gsi/ hinzufügen, damit eine Seite die übergeordnete URL für serverseitige Endpunkte von Google Identity Services laden kann.
frame-src-Richtlinie hinzufügen, https://accounts.google.com/gsi/, um die übergeordnete URL der iFrames der Schaltflächen „One Tap“ und „Über Google anmelden“ zuzulassen.
script-src-Richtlinie https://accounts.google.com/gsi/client hinzu, um die URL der JavaScript-Bibliothek von Google Identity Services zuzulassen.
style-src-Richtlinie hinzufügen, um die URL der Stylesheets der Google Identity Services zuzulassen.https://accounts.google.com/gsi/style
Die Anweisung default-src dient als Fallback, wenn eine der vorherigen Anweisungen (connect-src, frame-src, script-src oder style-src) nicht angegeben ist. Fügen Sie https://accounts.google.com/gsi/ hinzu, damit eine Seite die übergeordnete URL für serverseitige Endpunkte der Google Identity Services laden kann.

Geben Sie bei der Verwendung von connect-src keine einzelnen GIS-URLs an. So lassen sich Fehler beim Aktualisieren des GIS minimieren. Verwenden Sie beispielsweise anstelle von https://accounts.google.com/gsi/status die GIS-übergeordnete URL https://accounts.google.com/gsi/.

Mit diesem Beispiel für einen Antwortheader können Google Identity Services erfolgreich geladen und ausgeführt werden:

Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;

Cross-Origin-Opener-Richtlinie

Für die Schaltfläche „Über Google anmelden“ und Google One Tap sind möglicherweise Änderungen an deinem Cross-Origin-Opener-Policy (COOP) erforderlich, damit Pop-ups erfolgreich erstellt werden können.

Wenn FedCM aktiviert ist, werden Pop-ups direkt vom Browser gerendert und es sind keine Änderungen erforderlich.

Wenn FedCM jedoch deaktiviert ist, musst du den COOP-Header festlegen:

bis zum same-origin und
enthalten same-origin-allow-popups.

Wenn Sie die richtige Überschrift nicht festlegen, wird die Kommunikation zwischen den Fenstern unterbrochen, was zu einem leeren Pop-up-Fenster oder ähnlichen Fehlern führt.