Zum Hauptinhalt springen

Soziale Anmeldung mit Google einrichten (Set up social login with Google)

Integriere das Google OAuth 2.0 Authentifizierungssystem, um „Anmelden mit Google“, Kontoverknüpfung und sicheren Zugriff auf Google APIs zu ermöglichen.

tipp:

Diese Anleitung setzt voraus, dass du ein grundlegendes Verständnis von Logto Connectors hast. Für diejenigen, die damit nicht vertraut sind, verweisen wir auf die Connectors Anleitung, um loszulegen.

Erste Schritte​

Der Google Connector ermöglicht die OAuth 2.0-Integration, damit deine Anwendung:

  • „Anmelden mit Google“-Authentifizierung hinzufügen kann
  • Benutzerkonten mit Google-Identitäten verknüpfen kann
  • Benutzerprofilinformationen von Google synchronisieren kann
  • Zugriff auf Google APIs durch sichere Token-Speicherung im Logto Secret Vault für Automatisierungsaufgaben (z. B. Bearbeiten von Google Docs, Verwalten von Kalenderereignissen in deiner App) erhält

Um diese Authentifizierungsfunktionen einzurichten, erstelle zuerst einen Google Connector in Logto:

  1. Gehe zu Logto-Konsole > Connector > Social connector.
  2. Klicke auf Sozialen Connector hinzufügen, wähle Google aus, klicke auf Weiter und folge dem Schritt-für-Schritt-Tutorial, um die Integration abzuschließen.

Schritt 1: Erstelle ein Projekt auf der Google Auth Platform​

Bevor du Google als Authentifizierungsanbieter verwenden kannst, musst du ein Projekt in der Google Cloud Console einrichten, um OAuth 2.0-Zugangsdaten zu erhalten. Wenn du bereits ein Projekt hast, kannst du diesen Schritt überspringen.

  1. Besuche die Google Cloud Console und melde dich mit deinem Google-Konto an.
  2. Klicke auf die Schaltfläche Projekt auswählen in der oberen Menüleiste und dann auf Neues Projekt, um ein Projekt zu erstellen.
  3. Navigiere in deinem neu erstellten Projekt zu APIs & Dienste > OAuth-Zustimmungsbildschirm, um deine App zu konfigurieren:
    • App-Informationen: Gib den Anwendungsnamen und die Support-E-Mail ein, die auf der Zustimmungsseite angezeigt werden sollen.
    • Zielgruppe (Audience): Wähle deinen bevorzugten Zielgruppentyp:
      • Intern – Nur für Google Workspace-Nutzer innerhalb deiner Organisation
      • Extern – Für jeden Google-Nutzer (erfordert eine Überprüfung für den produktiven Einsatz)
    • Kontaktinformationen: Gib E-Mail-Adressen an, damit Google dich über Änderungen an deinem Projekt benachrichtigen kann.
    • Setze ein Häkchen bei Ich stimme den Google-Richtlinien zu, um die Grundeinrichtung abzuschließen.
  4. Optional kannst du im Bereich Branding Produktinformationen bearbeiten und dein App-Logo hochladen, das auf dem OAuth-Zustimmungsbildschirm angezeigt wird, damit Nutzer deine App erkennen.
tipp:

Wenn du den Zielgruppentyp Extern wählst, musst du während der Entwicklung Testnutzer hinzufügen und deine App für den produktiven Einsatz veröffentlichen.

Schritt 2: Erstelle OAuth 2.0-Zugangsdaten​

Navigiere zur Zugangsdaten-Seite in der Google Cloud Console und erstelle OAuth-Zugangsdaten für deine Anwendung.

  1. Klicke auf Zugangsdaten erstellen > OAuth-Client-ID.
  2. Wähle Webanwendung als Anwendungstyp.
  3. Gib einen Namen für deinen OAuth-Client ein. Dies hilft dir, die Zugangsdaten zu identifizieren und wird Endnutzern nicht angezeigt.
  4. Konfiguriere die autorisierten URIs:
    • Autorisierte JavaScript-Ursprünge: Füge den Ursprung deiner Logto-Instanz hinzu (z. B. https://your-logto-domain.com)
    • Autorisierte Redirect-URIs: Füge die Logto Callback-URI hinzu (kopiere diese aus deinem Logto Google Connector)
  5. Klicke auf Erstellen, um den OAuth-Client zu generieren.

Schritt 3: Konfiguriere den Logto-Connector mit Zugangsdaten​

Nachdem du den OAuth-Client erstellt hast, zeigt Google ein Modal mit deinen Zugangsdaten an:

  1. Kopiere die Client-ID und füge sie in das Feld clientId in Logto ein.
  2. Kopiere das Client-Secret und füge es in das Feld clientSecret in Logto ein.
  3. Klicke auf Speichern und Fertig in Logto, um dein Identitätssystem mit Google zu verbinden.
warnung:

Halte dein Client-Secret sicher und gib es niemals im Client-seitigen Code preis. Wenn es kompromittiert wird, generiere sofort ein neues.

Schritt 4: Konfiguriere Berechtigungen (Scopes)​

Berechtigungen (Scopes) definieren, welche Zugriffsrechte deine App von den Nutzern anfordert und steuern, auf welche Daten deine App in deren Google-Konten zugreifen kann.

Berechtigungen in der Google Cloud Console konfigurieren​

  1. Navigiere zu APIs & Dienste > OAuth-Zustimmungsbildschirm > Berechtigungen (Scopes).
  2. Klicke auf Berechtigungen hinzufügen oder entfernen und wähle nur die Berechtigungen aus, die deine App benötigt:
    • Authentifizierung (erforderlich):
      • https://www.googleapis.com/auth/userinfo.email
      • https://www.googleapis.com/auth/userinfo.profile
      • openid
    • API-Zugriff (optional): Füge alle zusätzlichen Berechtigungen hinzu, die deine App benötigt (z. B. Drive, Kalender, YouTube). Durchsuche die Google API-Bibliothek, um verfügbare Dienste zu finden. Wenn deine App Zugriff auf Google APIs über die grundlegenden Berechtigungen hinaus benötigt, aktiviere zuerst die spezifischen APIs, die deine App verwenden wird (z. B. Google Drive API, Gmail API, Kalender API) in der Google API-Bibliothek.
  3. Klicke auf Aktualisieren, um die Auswahl zu bestätigen.
  4. Klicke auf Speichern und Fortfahren, um die Änderungen zu übernehmen.

Berechtigungen in Logto konfigurieren​

Wähle je nach Bedarf eine oder mehrere der folgenden Vorgehensweisen:

Option 1: Keine zusätzlichen API-Berechtigungen benötigt

  • Lasse das Feld Scopes in deinem Logto Google Connector leer.
  • Die Standardberechtigungen openid profile email werden angefordert, damit Logto grundlegende Benutzerinformationen korrekt abrufen kann.

Option 2: Zusätzliche Berechtigungen beim Anmelden anfordern

  • Gib alle gewünschten Berechtigungen im Feld Scopes ein, getrennt durch Leerzeichen.
  • Alle hier aufgeführten Berechtigungen überschreiben die Standardwerte, daher immer die Authentifizierungsberechtigungen einfügen: https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile openid.
  • Verwende vollständige Scope-URLs. Beispiel: https://www.googleapis.com/auth/calendar.readonly.

Option 3: Zusätzliche Berechtigungen später inkrementell anfordern

  • Nachdem sich der Nutzer angemeldet hat, kannst du bei Bedarf zusätzliche Berechtigungen anfordern, indem du einen föderierten sozialen Autorisierungsfluss erneut initiierst und das gespeicherte Token-Set des Nutzers aktualisierst.
  • Diese zusätzlichen Berechtigungen müssen nicht im Feld Scopes deines Logto Google Connectors eingetragen werden und können über die Social Verification API von Logto erreicht werden.

Wenn du diese Schritte befolgst, fordert dein Logto Google Connector genau die Berechtigungen an, die deine App benötigt – nicht mehr und nicht weniger.

tipp:

Wenn deine App diese Berechtigungen anfordert, um auf die Google API zuzugreifen und Aktionen auszuführen, stelle sicher, dass du Tokens für dauerhaften API-Zugriff speichern im Logto Google Connector aktivierst. Siehe den nächsten Abschnitt für Details.

Schritt 5: Authentifizierungsaufforderungen anpassen​

Konfiguriere Prompts in Logto, um die Benutzererfahrung bei der Authentifizierung zu steuern. Prompts ist ein Array von Zeichenfolgen, das die Art der erforderlichen Benutzerinteraktion angibt:

  • none – Der Autorisierungsserver zeigt keine Authentifizierungs- oder Zustimmungsbildschirme an. Gibt einen Fehler zurück, wenn der Nutzer noch nicht authentifiziert ist und keine vorherige Zustimmung für die angeforderten Berechtigungen erteilt hat. Verwende dies, um auf bestehende Authentifizierung und/oder Zustimmung zu prüfen.
  • consent – Der Autorisierungsserver fordert den Nutzer zur Zustimmung auf, bevor Informationen an den Client zurückgegeben werden. Erforderlich, um Offline-Zugriff für den Google API-Zugriff zu aktivieren.
  • select_account – Der Autorisierungsserver fordert den Nutzer auf, ein Benutzerkonto auszuwählen. Dies ermöglicht Nutzern mit mehreren Google-Konten, das gewünschte Konto für die Authentifizierung auszuwählen.

Schritt 6: Allgemeine Einstellungen​

Hier sind einige allgemeine Einstellungen, die die Verbindung zu Google nicht blockieren, aber die Authentifizierungserfahrung der Endnutzer beeinflussen können.

Profilinformationen synchronisieren​

Im Google Connector kannst du die Richtlinie für das Synchronisieren von Profilinformationen wie Benutzernamen und Avataren festlegen. Wähle aus:

  • Nur bei Registrierung synchronisieren: Profilinformationen werden einmalig beim ersten Anmelden des Nutzers abgerufen.
  • Immer bei Anmeldung synchronisieren: Profilinformationen werden bei jeder Anmeldung des Nutzers aktualisiert.

Tokens speichern, um auf Google APIs zuzugreifen (optional)​

Wenn du auf Google APIs zugreifen und Aktionen mit Benutzerautorisierung durchführen möchtest (egal ob über soziale Anmeldung oder Kontoverknüpfung), muss Logto bestimmte API-Berechtigungen erhalten und Tokens speichern.

  1. Füge die erforderlichen Berechtigungen in deiner Google Cloud Console OAuth-Zustimmungsbildschirm-Konfiguration und im Logto Google Connector hinzu.
  2. Aktiviere Tokens für dauerhaften API-Zugriff speichern im Logto Google Connector. Logto speichert Google-Zugangs- und Auffrischungstokens sicher im Secret Vault.
  3. Um sicherzustellen, dass Auffrischungstokens zurückgegeben werden, konfiguriere deinen Logto Google Connector wie folgt:
    • Setze Prompts so, dass consent enthalten ist.
    • Aktiviere Offline-Zugriff.
warnung:

Du musst offline_access nicht im Logto Scope-Feld hinzufügen – dies kann zu einem Fehler führen. Google verwendet automatisch access_type=offline, wenn Offline-Zugriff aktiviert ist.

Schritt 7: Google One Tap aktivieren (optional)​

Google One Tap ist eine sichere und unkomplizierte Möglichkeit, Nutzern die Anmeldung auf deiner Website mit ihrem Google-Konto über eine Popup-Oberfläche zu ermöglichen.

Sobald du den Google Connector eingerichtet hast, siehst du eine Karte für Google One Tap auf der Connector-Detailseite. Aktiviere Google One Tap, indem du den Schalter umlegst.

Google One Tap Konfigurationsoptionen​

  • Anmeldedaten automatisch auswählen, wenn möglich – Melde den Nutzer automatisch mit dem Google-Konto an, wenn bestimmte Bedingungen erfüllt sind.
  • Aufforderung abbrechen, wenn der Nutzer außerhalb klickt/tippt – Schließe die Google One Tap-Aufforderung, wenn der Nutzer außerhalb des Prompts klickt oder tippt. Wenn deaktiviert, muss der Nutzer auf die Schaltfläche zum Schließen klicken, um die Aufforderung zu schließen.
  • Verbesserte One Tap UX auf ITP-Browsern aktivieren – Aktiviere die verbesserte Google One Tap-Benutzererfahrung auf Intelligent Tracking Prevention (ITP)-Browsern. Weitere Informationen findest du in dieser Dokumentation.
warnung:

Stelle sicher, dass du deine Domain im Abschnitt Autorisierte JavaScript-Ursprünge deiner OAuth-Client-Konfiguration hinzufügst. Andernfalls kann Google One Tap nicht angezeigt werden.

Wichtige Einschränkungen bei Google One Tap​

Wenn du Tokens für dauerhaften API-Zugriff speichern zusammen mit Google One Tap aktivierst, erhältst du nicht automatisch ein Zugangstoken oder die angeforderten Berechtigungen.

Die Google One Tap-Anmeldung (im Gegensatz zum Standard-Button „Mit Google anmelden“) stellt kein OAuth-Zugangstoken aus. Sie gibt nur ein ID-Token (ein signiertes JWT) zurück, das die Identität des Nutzers bestätigt, aber keinen API-Zugriff gewährt.

Um mit Google One Tap-Nutzern auf Google APIs zuzugreifen, kannst du die Social Verification API von Logto verwenden, um nach der Anmeldung mit Google One Tap einen föderierten sozialen Autorisierungsfluss erneut zu initiieren. So kannst du bei Bedarf zusätzliche Berechtigungen anfordern und das gespeicherte Token-Set des Nutzers aktualisieren, ohne dass die Berechtigungen im Logto Google Connector vorab eingetragen werden müssen. Dieser Ansatz ermöglicht eine inkrementelle Autorisierung, sodass Nutzer nur dann um zusätzliche Berechtigungen gebeten werden, wenn deine App sie tatsächlich benötigt.

Weitere Informationen zu Google One Tap-Einschränkungen findest du in der offiziellen Dokumentation.

Schritt 8: Teste und veröffentliche deine App​

Für interne Apps​

Wenn dein Zielgruppentyp (Audience) in Google auf Intern gesetzt ist, steht deine App nur Google Workspace-Nutzern innerhalb deiner Organisation zur Verfügung. Du kannst mit jedem Konto aus deiner Organisation testen.

Für externe Apps​

Wenn dein Zielgruppentyp Extern ist:

  1. Während der Entwicklung: Navigiere zu OAuth-Zustimmungsbildschirm > Testnutzer und füge die E-Mail-Adressen der Testnutzer hinzu. Nur diese Nutzer können sich mit deiner App anmelden.
  2. Für den Produktivbetrieb: Klicke im Bereich OAuth-Zustimmungsbildschirm auf App veröffentlichen, um sie für alle mit einem Google-Konto verfügbar zu machen.
hinweis:

Apps mit sensiblen oder eingeschränkten Berechtigungen benötigen möglicherweise eine Überprüfung durch Google, bevor sie veröffentlicht werden können. Dieser Prozess kann mehrere Wochen dauern.

Den Google Connector nutzen​

Sobald du einen Google Connector erstellt und mit Google verbunden hast, kannst du ihn in deine Endnutzer-Flows einbinden. Wähle die Optionen, die zu deinen Anforderungen passen:

„Anmelden mit Google“ aktivieren​

  1. Gehe in der Logto-Konsole zu Anmeldeerfahrung > Registrierung und Anmeldung.
  2. Füge den Google Connector im Abschnitt Soziale Anmeldung hinzu, damit sich Benutzer mit Google authentifizieren können.
  3. Aktiviere optional Google One Tap auf den Anmelde- und Registrierungsseiten für eine optimierte Authentifizierungserfahrung.

Erfahre mehr über die soziale Anmeldeerfahrung.

Nutze die Account API, um ein benutzerdefiniertes Account Center in deiner App zu erstellen, das angemeldeten Benutzern ermöglicht, ihr Google-Konto zu verknüpfen oder zu trennen. Folge dem Account API-Tutorial

tipp:

Es ist möglich, den Google Connector ausschließlich für Kontoverknüpfung und API-Zugriff zu aktivieren, ohne ihn für die soziale Anmeldung zu aktivieren.

Auf Google APIs zugreifen und Aktionen ausführen​

Deine Anwendung kann gespeicherte Google Zugangstokens (Access tokens) aus dem Secret Vault abrufen, um Google APIs aufzurufen und Backend-Aufgaben zu automatisieren (zum Beispiel Google Drive-Dateien verwalten, Kalenderereignisse erstellen oder E-Mails über Gmail versenden). Siehe die Anleitung zum Abrufen gespeicherter Tokens für den API-Zugriff.

Google-Identität des Benutzers verwalten​

Nachdem ein Benutzer sein Google-Konto verknüpft hat, können Administratoren diese Verbindung in der Logto-Konsole verwalten:

  1. Navigiere zu Logto-Konsole > Benutzerverwaltung und öffne das Benutzerprofil.
  2. Unter Soziale Verbindungen finde den Google-Eintrag und klicke auf Verwalten.
  3. Auf dieser Seite können Administratoren die Google-Verbindung des Benutzers verwalten, alle gewährten und synchronisierten Profilinformationen aus dem Google-Konto einsehen und den Status des Zugangstokens (Access token) überprüfen.

Referenz​

Google Identity: OAuth 2.0 einrichten

Google Identity Services (One Tap)

 Google Cloud Console