Einrichtung

Bevor Sie „Über Google anmelden“, „One Tap“ oder die automatische Anmeldung auf Ihrer Website hinzufügen, müssen Sie Ihre OAuth-Konfiguration und optional die Inhaltssicherheitsrichtlinie Ihrer Website einrichten.

Google API-Client-ID abrufen

Wenn Sie „Über Google anmelden“ auf Ihrer Website aktivieren möchten, müssen Sie zuerst Ihre 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 oder wählen Sie ein Google APIs-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. 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 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.

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 Ihre Weiterleitungs-URIs unter Autorisierte Weiterleitungs-URIs hinzu. Weiterleitungs-URIs enthalten das Schema, den vollständig qualifizierten Hostnamen und den Pfad und müssen den Validierungsregeln für Weiterleitungs-URIs entsprechen. Beispiel: https://www.example.com/auth-receiver.

OAuth-Zustimmungsbildschirm konfigurieren

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

1. Öffnen Sie in der Google Developer Console im Bereich „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, für die die Einwilligung eingeholt werden soll. Der Name sollte Ihre App genau beschreiben und mit dem Namen der App übereinstimmen, der Nutzern an anderer Stelle angezeigt wird.

   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. Bereiche für Google APIs:Mit Bereichen kann Ihre Anwendung auf die privaten Daten Ihrer Nutzer zugreifen. Für die Authentifizierung ist der Standardbereich (E-Mail, Profil, OpenID) ausreichend. Sie müssen keine vertraulichen Bereiche hinzufügen. Es wird empfohlen, Zugriffsbereiche schrittweise anzufordern, wenn der Zugriff erforderlich ist, und nicht im Voraus. Weitere Informationen

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

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

   7. Link zur Datenschutzerklärung der Anwendung:Wird auf dem Zustimmungsbildschirm für „Über Google anmelden“ und in einem DSGVO-konformen Haftungsausschluss unter der Schaltfläche „Weiter als“ angezeigt. Muss auf einer autorisierten Domain gehostet werden.

   8. 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.

4. 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.

Anzeige der OAuth-Einstellungen bei der Anmeldung

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

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 sowie unter 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.

Ihre CSP umfasst Folgendes:

• connect-src-Richtlinie https://accounts.google.com/gsi/ hinzu, damit eine Seite die übergeordnete URL für serverseitige Endpunkte von Google Identity Services laden kann.
• frame-src-Richtlinie hinzufügen, um die übergeordnete URL der iFrames der Schaltflächen „One Tap“ und „Über Google anmelden“ zuzulassen.https://accounts.google.com/gsi/
• script-src-Richtlinie https://accounts.google.com/gsi/client hinzu, um die URL der JavaScript-Bibliothek von Google Identity Services zuzulassen.
• style-src und fügen Sie https://accounts.google.com/gsi/style hinzu, um die URL der Google Identity Services-Stylesheets zuzulassen.
• 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 Beispielantwortheader kann 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 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 same-origin und
• same-origin-allow-popups enthalten.

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.