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:

1. eine OAuth 2.0-Client-ID abrufen
2. OAuth-Branding und ‑Einstellungen konfigurieren
3. die Google Identity Services-Clientbibliothek laden und
4. Optional: Content Security Policy einrichten
5. Cross-Origin-Opener-Richtlinie aktualisieren

Hinweis :Sie benötigen eine Client-ID, um „Mit Google anmelden“ zu konfigurieren und ID-Tokens in Ihrem Backend zu bestätigen. Eine Client-ID sieht so aus: 1234567890-abc123def456.apps.googleusercontent.com

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:

1. Öffnen Sie in der Google Cloud Console die Seite „Clients“.
2. Erstellen Sie ein Cloud Console-Projekt oder wählen Sie ein vorhandenes Projekt aus. Wenn Sie bereits ein Projekt für den Button „Über Google anmelden“ oder Google One Tap haben, verwenden Sie das vorhandene Projekt und die Web-Client-ID. Wenn Sie Produktionsanwendungen erstellen, sind möglicherweise mehrere Projekte erforderlich. Wiederholen Sie die verbleibenden Schritte dieses Abschnitts für jedes Projekt, das Sie verwalten.
3. Klicken Sie auf Client erstellen und wählen Sie für 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.

4. Fügen Sie den URI Ihrer Website zu Autorisierte JavaScript-Quellen hinzu. Der URI enthält nur das Schema und den voll qualifizierten Hostnamen. Beispiel: https://www.example.com

   Wichtig:Für lokale Tests oder die Entwicklung müssen Sie sowohl http://localhost als auch http://localhost:<port_number> hinzufügen.
   Wichtig:Google One Tap kann nur in HTTPS-Domains angezeigt werden.

5. Optional können Anmeldedaten über eine Weiterleitung an einen von Ihnen gehosteten Endpunkt zurückgegeben werden, anstatt über einen JavaScript-Callback. Fügen Sie in diesem Fall Ihre Weiterleitungs-URIs zu 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 in Ihre Web-App ein. Verwenden Sie dazu die Felder data-client_id oder client_id.

Wichtig :Wenn Sie mit „http“ und „localhost“ testen, legen Sie den Header Referrer-Policy in Ihrer Web-App auf Referrer-Policy: no-referrer-when-downgrade fest. Das Laden von gsi/client von accounts.google.com ist eine ursprungsübergreifende Anfrage. Es wird eine Referrer-Policy von strict-origin-when-cross-origin empfohlen.

OAuth-Zustimmungsbildschirm konfigurieren

Sowohl bei „Über Google anmelden“ als auch bei der One Tap-Authentifizierung wird ein Zustimmungsbildschirm angezeigt, auf dem Nutzer darüber informiert werden, welche Anwendung Zugriff auf ihre Daten anfordert, welche Art von Daten abgefragt wird und welche Nutzungsbedingungen gelten.

1. Öffnen Sie in der Cloud Console im Bereich „Google Auth Platform“ die Seite „Branding“.
2. Wählen Sie bei Aufforderung das Projekt aus, das Sie gerade erstellt haben.

3. Füllen Sie auf der Seite „Branding“ das Formular aus und klicken Sie auf „Speichern“.

   1. Anwendungsname:Der Name der Anwendung, die um Einwilligung bittet. Der Name sollte Ihre Anwendung genau widerspiegeln und mit dem Namen der Anwendung übereinstimmen, den Nutzer an anderer Stelle sehen.

   2. Anwendungslogo:Dieses Bild wird auf dem Zustimmungsbildschirm angezeigt, damit Nutzer Ihre App leichter erkennen. Das Logo wird auf dem Zustimmungsbildschirm für „Über Google anmelden“ und in den Kontoeinstellungen angezeigt, aber nicht im One Tap-Dialogfeld.

   3. Support-E-Mail-Adresse:Wird zur Unterstützung des Nutzers auf dem Zustimmungsbildschirm angezeigt und für Google Workspace-Administratoren, die den Zugriff auf Ihre Anwendung für ihre Nutzer prüfen. Diese E-Mail-Adresse wird Nutzern auf dem Zustimmungsbildschirm „Ü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 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 für „Über Google anmelden“ und unter der Schaltfläche „Weiter als“ in den Informationen zum Ein-Klick-Haftungsausschluss gemäß DSGVO angezeigt. Muss auf einer autorisierten Domain gehostet werden.

   6. Link zur Datenschutzerklärung der Anwendung:Wird auf dem Einwilligungsbildschirm für „Über Google anmelden“ und unter dem Button „Weiter als“ in den DSGVO-konformen Informationen für die One Tap-Anmeldung angezeigt. Muss auf einer autorisierten Domain gehostet werden.

   7. Link zu den Anwendungs-Nutzungsbedingungen (optional): Wird auf dem Einwilligungsbildschirm für „Mit Google anmelden“ und unter der Schaltfläche „Weiter als“ in den DSGVO-konformen Informationen für die Einmalanmeldung angezeigt. Muss auf einer autorisierten Domain gehostet werden.

4. 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 sensiblen Bereiche hinzufügen. Es ist generell eine Best Practice, Bereiche inkrementell anzufordern, wenn der Zugriff erforderlich ist, und nicht im Voraus.

5. Prüfen Sie den „Bestätigungsstatus“. Wenn Ihre Anwendung bestätigt werden muss, klicken Sie auf die Schaltfläche „Zur Bestätigung einreichen“, um die Bestätigung zu beantragen. Weitere Informationen finden Sie unter Voraussetzungen für die OAuth-Überprüfung.

Anzeige der OAuth-Einstellungen bei der Anmeldung

One Tap mit FedCM

Die autorisierte Domain der obersten Ebene wird während der Nutzereinwilligung in Chrome angezeigt. Die Verwendung von One Tap in Same-Site-Iframes mit ursprungsübergreifenden Anfragen ist eine unterstützte Methode.

One Tap ohne FedCM

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

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

Clientbibliothek laden

Achten Sie darauf, die Google Identity Services-Clientbibliothek auf jeder Seite zu laden, 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 Methoden und Eigenschaften, die von der Bibliothek unterstützt werden, finden Sie in den API-Referenzen für HTML und JavaScript.

Hinweis: Die Google Identity Services-Bibliothek soll über ein <script>-Element auf Ihrer Webseite von https://accounts.google.com/gsi/client geladen werden. So erhält Ihre Integration immer wichtige Sicherheitsupdates und kritische Kompatibilitätskorrekturen. Beachten Sie, dass Self-Hosting oder die Verwendung einer Offlinekopie kein unterstützter Anwendungsfall ist und zu unerwartetem Verhalten oder zukünftigen Integrationsfehlern führen kann.

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 Security Policy kann eine oder mehrere Anweisungen wie connect-src, frame-src, script-src, style-src oder default-src enthalten.

Wenn Ihr CSP Folgendes umfasst:

• Fügen Sie https://accounts.google.com/gsi/ hinzu, um zuzulassen, dass auf einer Seite die übergeordnete URL für serverseitige Endpunkte von Google Identity Services geladen wird.connect-src
• Fügen Sie der frame-src-Anweisung https://accounts.google.com/gsi/ hinzu, um die übergeordnete URL der iFrames für One Tap und den Button „Über Google anmelden“ zuzulassen.
• Fügen Sie der script-src-Anweisung https://accounts.google.com/gsi/client hinzu, um die URL der Google Identity Services-JavaScript-Bibliothek zuzulassen.
• Fügen Sie der style-src-Anweisung https://accounts.google.com/gsi/style hinzu, um die URL der Google Identity Services-Stylesheets zuzulassen.
• Die default-src-Anweisung ist ein Fallback, wenn eine der vorhergehenden 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 von Google Identity Services laden kann.

Vermeiden Sie es, einzelne GIS-URLs aufzulisten, wenn Sie connect-src verwenden. Dadurch werden Fehler bei der Aktualisierung von GIS minimiert. Fügen Sie beispielsweise anstelle von https://accounts.google.com/gsi/status die GIS-Übergeordneten-URL https://accounts.google.com/gsi/ hinzu.

Mit diesem Beispielantwortheader können die Google Identity Services 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 Ihrem Cross-Origin-Opener-Policy (COOP) erforderlich, damit Pop-ups erfolgreich 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 fest:

• an same-origin und
• Schließen Sie same-origin-allow-popups ein.

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.