Soziale Anmeldung mit Google einrichten
Der Google-Connector bietet eine prägnante Möglichkeit für deine Anwendung, das OAuth 2.0-Authentifizierungssystem von Google zu nutzen.
In diesem Leitfaden gehen wir davon aus, dass du grundlegende Kenntnisse über Logto Connectors hast. Falls nicht, schaue dir den Leitfaden Connectors konfigurieren an, um loszulegen.
Ein Projekt in der Google API Console einrichten
- Besuche die Google API Console und melde dich mit deinem Google-Konto an.
- Klicke auf die Schaltfläche Projekt auswählen in der oberen Menüleiste und klicke auf die Schaltfläche Neues Projekt, um ein Projekt zu erstellen.
- In deinem neu erstellten Projekt klicke auf APIs & Dienste, um das Menü APIs & Dienste aufzurufen.
Deinen Zustimmungsbildschirm konfigurieren
Deine Anwendung konfigurieren und registrieren
- Klicke im linken Menü APIs & Dienste auf die Schaltfläche OAuth-Zustimmungsbildschirm.
- Wähle den gewünschten Benutzertyp aus und klicke auf die Schaltfläche Erstellen. (Hinweis: Wenn du Extern als deinen Benutzertyp auswählst, musst du später Testbenutzer hinzufügen.)
Nun befindest du dich auf der Seite App-Registrierung bearbeiten.
App-Registrierung bearbeiten
OAuth-Zustimmungsbildschirm konfigurieren
- Folge den Anweisungen, um das Formular OAuth-Zustimmungsbildschirm auszufüllen.
- Klicke auf SPEICHERN UND FORTFAHREN, um fortzufahren.
Berechtigungen konfigurieren
- Klicke auf BERECHTIGUNGEN HINZUFÜGEN ODER ENTFERNEN und wähle
../auth/userinfo.email,../auth/userinfo.profileundopenidim Popup-Drawer aus und klicke auf AKTUALISIEREN, um abzuschließen. Es wird empfohlen, alle Berechtigungen hinzuzufügen, die du möglicherweise verwenden möchtest, da sonst einige Berechtigungen, die du in der Konfiguration hinzugefügt hast, möglicherweise nicht funktionieren. - Fülle das Formular nach Bedarf aus.
- Klicke auf SPEICHERN UND FORTFAHREN, um fortzufahren.
Testbenutzer hinzufügen (nur externer Benutzertyp)
- Klicke auf BENUTZER HINZUFÜGEN und füge Testbenutzer hinzu, um diesen Benutzern den Zugriff auf deine Anwendung während des Testens zu ermöglichen.
- Klicke auf SPEICHERN UND FORTFAHREN, um fortzufahren.
Nun solltest du den Google OAuth 2.0-Zustimmungsbildschirm konfiguriert haben.
OAuth 2.0-Anmeldedaten erhalten
- Klicke im linken Menü APIs & Dienste auf die Schaltfläche Anmeldedaten.
- Auf der Seite Anmeldedaten klicke auf die Schaltfläche + ANMELDEDATEN ERSTELLEN in der oberen Menüleiste und wähle OAuth-Client-ID aus.
- Auf der Seite OAuth-Client-ID erstellen wähle Webanwendung als Anwendungstyp aus.
- Fülle die grundlegenden Informationen für deine Anwendung aus.
- Klicke auf + URI hinzufügen, um eine autorisierte Domain zu den Autorisierte JavaScript-Ursprünge hinzuzufügen. Dies ist die Domain, von der deine Logto-Authentifizierungsseite bereitgestellt wird. In unserem Fall wird dies
${your_logto_origin}sein, z. B.https://logto.dev. - Klicke auf + URI hinzufügen im Abschnitt **Autorisierte Weiterleitungs-URIs**, um die **Autorisierte Weiterleitungs-URIs** einzurichten, die den Benutzer nach der Anmeldung zur Anwendung weiterleiten. In unserem Fall wird dies
${your_logto_endpoint}/callback/${connector_id}sein, z. B.https://logto.dev/callback/${connector_id}. Dieconnector_idkann in der oberen Leiste der Logto Admin Console Connector-Detailseite gefunden werden. - Klicke auf Erstellen, um abzuschließen, und dann erhältst du die Client-ID und das Client-Geheimnis.
Deinen Connector konfigurieren
Fülle die Felder clientId und clientSecret mit der Client-ID und dem Client-Geheimnis aus, die du von den OAuth-App-Detailseiten im vorherigen Abschnitt erhalten hast.
scope ist eine durch Leerzeichen getrennte Liste von Berechtigungen. Wenn nicht angegeben, ist der Standardwert für scope openid profile email.
prompts ist ein Array von Zeichenfolgen, das den erforderlichen Benutzereingriffstyp angibt. Die Zeichenfolge kann einen der folgenden Werte haben:
none: Der Autorisierungsserver zeigt keine Authentifizierungs- oder Benutzerzustimmungsbildschirme an; er gibt einen Fehler zurück, wenn der Benutzer nicht bereits authentifiziert ist und keine vorab konfigurierte Zustimmung für die angeforderten Berechtigungen hat. Du kannst none verwenden, um auf bestehende Authentifizierung und/oder Zustimmung zu prüfen.consent: Der Autorisierungsserver fordert den Benutzer zur Zustimmung auf, bevor er Informationen an den Client zurückgibt.select_account: Der Autorisierungsserver fordert den Benutzer auf, ein Benutzerkonto auszuwählen. Dies ermöglicht einem Benutzer, der mehrere Konten beim Autorisierungsserver hat, die Auswahl zwischen den mehreren Konten, für die er möglicherweise aktuelle Sitzungen hat.
Konfigurationstypen
| Name | Typ |
|---|---|
| clientId | string |
| clientSecret | string |
| scope | string |
| prompts | string[] |
Google One Tap aktivieren
Google One Tap ist eine sichere und einfache Möglichkeit, Benutzern die Anmeldung auf deiner Website oder App mit ihrem Google-Konto zu ermöglichen.
Sobald du den Google-Connector eingerichtet hast, siehst du eine Karte für Google One Tap auf der Connector-Detailseite. Du kannst Google One Tap auf deinen Anmelde- und Registrierungsseiten aktivieren, indem du den Schalter umlegst.
Wenn du Google One Tap aktivierst, kannst du die folgenden Optionen konfigurieren:
- Anmeldedaten automatisch auswählen, wenn möglich: Melde den Benutzer automatisch mit dem Google-Konto an, wenn bestimmte Bedingungen erfüllt sind.
- Aufforderung abbrechen, wenn der Benutzer außerhalb klickt/tippt: Schließe die Google One Tap-Aufforderung, wenn der Benutzer außerhalb der Aufforderung klickt oder tippt. Wenn deaktiviert, muss der Benutzer auf die Schaltfläche zum Schließen klicken, um die Aufforderung zu schließen.
- Aktualisierte One Tap UX auf ITP-Browsern aktivieren: Aktiviere die aktualisierte Google One Tap-Benutzererfahrung auf Intelligent Tracking Prevention (ITP)-Browsern. Bitte siehe diese Seite für weitere Informationen.
Um Google One Tap auf deiner Website (über die Logto-Anmeldeerfahrung hinaus) zu aktivieren, befindet sich diese Funktion in der Entwicklung. Bitte bleibe für Updates dran.