Einrichtung

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

eine OAuth 2.0-Client-ID abrufen,
OAuth-Branding und ‑Einstellungen konfigurieren,
die Google Identity Services-Clientbibliothek laden und
optional eine Content Security Policy einrichten und
die 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 Seite „Clients“ in der Google Cloud Console.
Erstellen oder wählen Sie ein Cloud Console-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 Web-Client-ID. Beim Erstellen von Produktionsanwendungen sind möglicherweise mehrere Projekte erforderlich. Wiederholen Sie die verbleibenden Schritte in diesem Abschnitt für jedes Projekt, das Sie verwalten.
Klicken Sie auf Client erstellen und wählen Sie unter Anwendungstyp die Option Webanwendung aus, um eine neue Client-ID zu erstellen. Wenn Sie eine vorhandene Client-ID verwenden möchten, wählen Sie eine vom Typ Webanwendung aus.
Fügen Sie die URI Ihrer Website unter Autorisierte JavaScript-Quellen hinzu. Die URI enthält nur das Schema und den voll qualifizierten Hostnamen. Beispiel: https://www.example.com.

Wichtiger Hinweis: Fügen Sie für lokale Tests oder die Entwicklung sowohl http://localhost als auch http://localhost:<port_number>
Wichtiger Hinweis: Google One Tap kann nur in HTTPS-Domains angezeigt werden.
Optional können Anmeldedaten über eine Weiterleitung zu einem von Ihnen gehosteten Endpunkt anstelle eines JavaScript-Callbacks 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 Validierungsregeln für Weiterleitungs-URIs entsprechen. Beispiel: https://www.example.com/auth-receiver.

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

OAuth-Zustimmungsbildschirm konfigurieren

Sowohl die Authentifizierung mit „Über Google anmelden“ als auch mit One Tap umfasst einen Zustimmungsbildschirm, auf dem Nutzer darüber informiert werden, welche Anwendung Zugriff auf ihre Daten anfordert, welche Art von Daten angefordert wird und welche Bedingungen gelten.

Öffnen Sie in der Cloud Console die Seite „Branding“ im Bereich „Google Auth Platform“.
Wählen Sie bei Aufforderung das gerade erstellte Projekt aus.
Füllen Sie auf der Seite „Branding“ das Formular aus und klicken Sie auf die Schaltfläche „Speichern“ .
1. Anwendungsname:Der Name der Anwendung, die um Zustimmung bittet. Der Name sollte Ihre Anwendung genau widerspiegeln und mit dem Anwendungsnamen übereinstimmen, den Nutzer an anderer Stelle sehen.
2. Anwendungslogo: Dieses Bild wird auf dem Zustimmungsbildschirm angezeigt, damit Nutzer Ihre App erkennen können. Das Logo wird auf dem Zustimmungsbildschirm von „Über Google anmelden“ und in den Kontoeinstellungen angezeigt, aber nicht im One Tap-Dialogfeld.
3. E‑Mail-Adresse für den Support:Wird zur Unterstützung des Nutzers auf dem Zustimmungsbildschirm und für Google Workspace-Administratoren angezeigt, die den Zugriff auf Ihre Anwendung für ihre Nutzer bewerten. Diese E‑Mail-Adresse wird Nutzern auf dem Zustimmungsbildschirm von „Über Google anmelden“ angezeigt, wenn sie auf den Anwendungsnamen klicken.
4. Autorisierte Domains:Um Sie und Ihre Nutzer zu schützen, erlaubt Google die Nutzung autorisierter Domains nur solchen Anwendungen, die sich mit OAuth authentifizieren. Die Links Ihrer Anwendungen müssen auf autorisierten Domains gehostet werden. Weitere Informationen.
5. Link zur Startseite der Anwendung:Wird auf dem Zustimmungsbildschirm von „Über Google anmelden“ und unter der Schaltfläche „Weiter als“ in den datenschutzrechtlichen Hinweisen für One Tap angezeigt. Muss auf einer autorisierten Domain gehostet werden.
6. Link zur Datenschutzerklärung der Anwendung:Wird auf dem Zustimmungsbildschirm von „Über Google anmelden“ und unter der Schaltfläche „Weiter als“ in den datenschutzrechtlichen Hinweisen für One Tap angezeigt. Muss auf einer autorisierten Domain gehostet werden.
7. Link zu den Nutzungsbedingungen der Anwendung (optional) : Wird auf dem Zustimmungsbildschirm von „Über Google anmelden“ und unter der Schaltfläche „Weiter als“ in den datenschutzrechtlichen Hinweisen für One Tap angezeigt. Muss auf einer autorisierten Domain gehostet werden.
Rufen Sie die Seite „Datenzugriff“ 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 reicht der Standardbereich („email“, „profile“, „openid“) aus. Sie müssen keine vertraulichen Bereiche hinzufügen. Im Allgemeinen ist es eine Best Practice, Bereiche inkrementell anzufordern, wenn der Zugriff erforderlich ist, und nicht im Voraus.
Prüfen Sie den „Überprüfungsstatus“. Wenn Ihre Anwendung überprüft werden muss, klicken Sie auf die Schaltfläche „Zur Überprüfung einreichen“, um sie zur Überprüfung einzureichen. Weitere Informationen finden Sie unter OAuth-Überprüfungsanforderungen.

Anzeige der OAuth-Einstellungen bei der Anmeldung

One Tap mit FedCM

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

Die autorisierte Domain der obersten Ebene wird während der Nutzereinwilligung in Chrome angezeigt. Die Verwendung von One Tap in anfrageübergreifenden, aber gleichseitigen iFrames ist eine unterstützte Methode.

One Tap ohne FedCM

OAuth-Zustimmungseinstellungen, wie sie von One Tap angezeigt werden

Der Anwendungsname wird während der Nutzereinwilligung angezeigt.

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

Clientbibliothek laden

Achten Sie darauf, dass die Google Identity Services-Clientbibliothek auf jeder Seite geladen wird, auf der sich ein Nutzer anmelden kann. Verwenden Sie den folgenden Code-Snippet:

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

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

Eine Liste der Methoden und Eigenschaften, die von der Bibliothek unterstützt werden, finden Sie in der HTML- und JavaScript API-Referenz.

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 einer Einführung in CSP und CSP und XSS.

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

Wenn Ihre CSP Folgendes enthält:

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

Vermeiden Sie es, einzelne GIS-URLs aufzulisten, wenn Sie connect-src verwenden. So werden Fehler minimiert, wenn GIS aktualisiert wird. Verwenden Sie beispielsweise anstelle von https://accounts.google.com/gsi/status die übergeordnete GIS-URL https://accounts.google.com/gsi/.

Dieser Beispielantwortheader ermöglicht das erfolgreiche Laden und Ausführen von Google Identity Services:

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 Ihrer Cross-Origin-Opener-Policy (COOP) erforderlich, damit Pop-ups erstellt werden können.

Wenn FedCM aktiviert ist, rendert der Browser Pop-ups direkt und es sind keine Änderungen erforderlich.

Wenn FedCM jedoch deaktiviert ist, legen Sie den COOP-Header so fest:

auf same-origin und
fügen Sie same-origin-allow-popups hinzu.

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