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 Content Security Policy Ihrer Website einrichten.

Google API-Client-ID abrufen

Um „Über Google anmelden“ auf deiner Website zu aktivieren, musst du zuerst dein Google API-Client-ID 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 Eventuell sind mehrere Projekte erforderlich. Wiederholen Sie die restlichen Schritte. dieses Abschnitts für jedes von Ihnen verwaltete Projekt.
  3. Klicken Sie auf Anmeldedaten erstellen > OAuth-Client-ID und Anwendungstyp Wählen Sie 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 vollständig 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. Zu den Weiterleitungs-URIs gehören das Schema, den voll qualifizierten Hostnamen und den Pfad enthält und Validierungsregeln für Weiterleitungs-URIs. Beispiel: https://www.example.com/auth-receiver.

Sowohl die Authentifizierung über „Über Google anmelden“ als auch die Authentifizierung über One Tap enthalten einen Zustimmungsbildschirm. die den Nutzern mitteilt, welche Art von Daten, nach denen sie gefragt werden, und den geltenden Bedingungen.

  1. Öffnen Sie in der Google Developer Console im Bereich „APIs und Dienste“ die Seite OAuth-Zustimmungsbildschirm.
  2. Wählen Sie bei Aufforderung das Projekt aus, das Sie gerade erstellt haben.

  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, die um Zustimmung bittet. 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 in der Einwilligung für „Über Google anmelden“ angezeigt wenn der Nutzer auf den Namen der App klickt.

    4. Bereiche für Google APIs:Bereiche ermöglichen Ihrer Anwendung den Zugriff auf Ihre Nutzerdaten zu schützen. Standardbereich für die Authentifizierung (E-Mail-Adresse, Profil, OpenID) reicht aus, Sie müssen keine vertrauliche Bereiche. Es empfiehlt sich, Bereiche anzufordern, schrittweise, zum Zeitpunkt des Zugriffs, anstatt 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 müssen in autorisierten Domains gehostet werden. Weitere Informationen

    6. Link zur Startseite der Anwendung:Wird angezeigt, wenn „Über Google anmelden“ eingeblendet wird und mit nur einmal tippen auf den DSGVO-konformen Haftungsausschluss unter der „Fortfahren als“ Schaltfläche. Muss in einer autorisierten Domain gehostet werden.

    7. 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 in 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 OAuth-Bestätigungsanforderungen .

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.

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

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

Deine Content Security Policy 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-Anweisung, fügen Sie https://accounts.google.com/gsi/ hinzu, um Folgendes zuzulassen: Seite zum serverseitigen Laden der übergeordneten URL für Google Identity Services Endpunkten.
  • frame-src-Richtlinie hinzufügen, 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-Anweisung, https://accounts.google.com/gsi/style zum Zulassen hinzufügen Die URL der Google Identity Services-Stylesheets
  • Die Anweisung default-src ist bei Verwendung ein Fallback, falls eine der Vorgängeranweisungen (connect-src, frame-src, script-src oder style-src) nicht angegeben ist, https://accounts.google.com/gsi/ hinzufügen zu Seiten erlauben, die übergeordnete URL für Google Identity Services serverseitig zu laden Endpunkten.

Vermeiden Sie es, bei der Verwendung von connect-src einzelne GIS-URLs aufzulisten. So lassen sich Fehler beim Aktualisieren des GIS minimieren. Anstatt beispielsweise https://accounts.google.com/gsi/status verwenden die übergeordnete GIS-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:

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

Wenn die richtige Kopfzeile nicht festgelegt wird, wird die Kommunikation zwischen den Fenstern unterbrochen, sodass leeres Pop-up-Fenster oder ähnliche Fehler auftreten.