Einrichtung

Bevor du „Über Google anmelden“, „One Tap“ oder „Automatische Anmeldung“ auf deiner Website hinzufügst, musst du deine OAuth-Konfiguration einrichten und optional die Content Security Policy deiner Website konfigurieren.

Google API-Client-ID abrufen

Wenn du die Funktion „Über Google anmelden“ auf deiner Website aktivieren möchtest, musst du zuerst deine Google API-Client-ID einrichten. Führen Sie dazu folgende Schritte aus:

  1. Öffnen Sie in der Google APIs Console die Seite Anmeldedaten.
  2. Erstellen Sie ein Google APIs-Projekt oder wählen Sie eines aus. Wenn du bereits ein Projekt für die Schaltfläche „Über Google anmelden“ oder für Google One Tap hast, verwende dieses Projekt und die Web-Client-ID. Beim Erstellen von Produktionsanwendungen können mehrere Projekte erforderlich sein. Wiederholen Sie die verbleibenden Schritte dieses Abschnitts für jedes von Ihnen verwaltete Projekt.
  3. Klicken Sie auf Anmeldedaten erstellen > OAuth-Client-ID 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 den 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

  5. 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 die 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.

Sowohl die „Über Google anmelden“- als auch die One Tap-Authentifizierung enthalten einen Zustimmungsbildschirm, auf dem Nutzer über die App informiert werden, die Zugriff auf ihre Daten anfordert, welche Art von Daten sie benötigen und welche Bedingungen gelten.

  1. Öffnen Sie in der Google Developer Console im Abschnitt „APIs und Dienste“ die Seite OAuth-Zustimmungsbildschirm.
  2. Wenn Sie dazu aufgefordert werden, wählen Sie das soeben erstellte Projekt aus.

  3. Füllen Sie auf der Seite „OAuth-Zustimmungsbildschirm“ das Formular aus und klicken Sie auf die Schaltfläche „Speichern“.

    1. Name der Anwendung:Der Name der Anwendung, in der die Einwilligung eingeholt wird. 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 leichter erkennen. Es wird auf dem Zustimmungsbildschirm für „Über Google anmelden“ und in den Kontoeinstellungen angezeigt, nicht aber im One Tap-Dialogfeld.

    3. Support-E-Mail-Adresse:Wird auf dem Zustimmungsbildschirm für Nutzersupport und G Suite-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 Namen der Anwendung klicken.

    4. Bereiche für Google APIs:Über Bereiche 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 empfiehlt es sich, Bereiche inkrementell anzufordern, wenn Zugriff erforderlich ist, und nicht im Voraus. Weitere Informationen

    5. Autorisierte Domains:Um Sie und Ihre Nutzer zu schützen, erlaubt Google nur Anwendungen, die sich mit OAuth authentifizieren, autorisierte Domains. Die Links Ihrer Anwendungen müssen in autorisierten Domains gehostet werden. Weitere Informationen

    6. Link zur Startseite der Anwendung:Wird auf dem Zustimmungsbildschirm von „Über Google anmelden“ und dem DSGVO-konformen Haftungsausschluss mit One Tap unter der Schaltfläche „Weiter als“ angezeigt. Muss auf einer autorisierten Domain gehostet werden.

    7. Link zur Datenschutzerklärung der Anwendung:Wird auf dem Zustimmungsbildschirm von „Über Google anmelden“ und mit One Tap DSGVO-konformen Haftungsausschlussinformationen unter der Schaltfläche „Weiter als“ angezeigt. Muss auf einer autorisierten Domain gehostet werden.

    8. Link zu den Nutzungsbedingungen (optional): Wird auf dem Zustimmungsbildschirm für „Über Google anmelden“ und unter der Schaltfläche „Weiter als“ angezeigt, um die DSGVO-konformen Informationen zum Haftungsausschluss mit One Tap zu erhalten. Muss auf einer autorisierten Domain gehostet werden.

  4. Wenn Ihr Antrag überprüft werden muss, prüfen Sie den „Bestätigungsstatus“. Klicken Sie dann auf die Schaltfläche „Zur Überprüfung einreichen“, um den Antrag einzureichen. Weitere Informationen finden Sie unter Anforderungen für die OAuth-Überprüfung.

Anzeige der OAuth-Einstellungen bei der Anmeldung

One Tap mit FedCM

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

Die Top-Level-Autorisierte Domain wird während der Nutzereinwilligung in Chrome angezeigt.

One Tap ohne FedCM

OAuth-Einwilligungseinstellungen, die von One Tap angezeigt werden

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

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

Content Security Policy

Eine Content Security Policy ist zwar optional, wird jedoch empfohlen, um Ihre Anwendung zu sichern und Cross-Site-Scripting-Angriffe (XSS) zu verhindern. Weitere Informationen finden Sie unter Einführung in die CSP sowie 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 umfasst:

  • connect-src, 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.
  • frame-src, fügen Sie https://accounts.google.com/gsi/ hinzu, um die übergeordnete URL der iFrames der Schaltfläche „One Tap“ und „Über Google anmelden“ zuzulassen.
  • script-src, fügen Sie https://accounts.google.com/gsi/client hinzu, um die URL der JavaScript-Bibliothek für Google Identity Services zuzulassen.
  • style-src fügen Sie https://accounts.google.com/gsi/style hinzu, um die URL der Google Identity Services-Stylesheets zuzulassen.
  • Die default-src-Anweisung ist ein Fallback, 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 Endpunkte von Google Identity Services laden kann.

Bei Verwendung von connect-src sollten Sie einzelne GIS-URLs nicht auflisten. So werden Fehler beim Aktualisieren des GIS minimiert. Verwenden Sie beispielsweise die übergeordnete GIS-URL https://accounts.google.com/gsi/, anstatt https://accounts.google.com/gsi/status hinzuzufügen.

Mit diesem beispielhaften 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 für Google One Tap sind möglicherweise Änderungen an deinem 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, lege den COOP-Header fest:

  • an same-origin und
  • same-origin-allow-popups enthalten.

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