Erstelle CapacitorJS-Authentifizierung mit Logto
In diesem Tutorial zeigen wir, wie man den Authentifizierungsfluss mit Logto in Capacitor erstellt. Dies ermöglicht es dir, plattformübergreifende Anmelde- und Registrierungsabläufe einfach zu erstellen.
Founder
Einführung
- Logto ist eine moderne Alternative zu Auth0, um mit minimalem Aufwand eine Kundenidentitätsinfrastruktur aufzubauen. Es unterstützt verschiedene Anmeldemethoden, einschließlich Benutzername, E-Mail, Telefonnummer und beliebte soziale Anmeldungen wie Google und GitHub.
- Capacitor ist eine Open-Source-Laufzeitumgebung für native Web-Anwendungen.
In diesem Tutorial zeigen wir, wie man den Authentifizierungsfluss mit Logto in Capacitor erstellt. Dies ermöglicht es dir, plattformübergreifende Anmelde- und Registrierungsabläufe einfach zu erstellen.
Voraussetzungen
Bevor du anfängst, stelle sicher, dass du Folgendes hast:
- Ein Logto-Konto. Wenn du noch keines hast, kannst du dich kostenlos registrieren.
- Ein Capacitor-Projekt. Du kannst der offiziellen Anleitung folgen, um eins zu erstellen.
Erstelle eine Logto-Anwendung
Um zu starten, erstelle eine Logto-Anwendung vom Typ „Native“. Logto-Anwendungen dienen als Client-Anwendungen in den OAuth 2.0 und OpenID Connect (OIDC) Flows. Folge diesen Schritten, um eine Logto-Anwendung zu erstellen:
- Melde dich im Logto Cloud Console an.
- Klicke in der linken Navigationsleiste auf Anwendungen.
- Klicke auf Anwendung erstellen.
- Wähle Native als Anwendungstyp und gib den Anwendungsnamen ein.
- Klicke auf Erstellen.
Nach der Erstellung der Logto-Anwendung konfiguriere die Umleitungs-URI. Die Umleitungs-URI wird verwendet, um den Benutzer nach dem Authentifizierungsfluss zu deiner Anwendung zurückzuleiten.
Stelle sicher, dass die URI zur Capacitor-App umleitet, zum Beispiel com.example.app://callback. Der Wert kann je nach Konfiguration deiner Capacitor-App variieren. Für weitere Details siehe Capacitor Deep Links.
Denke daran, nach dem Aktualisieren der Umleitungs-URI auf Änderungen speichern zu klicken.
Wenn du dir bezüglich der Umleitungs-URI unsicher bist, kannst du sie vorerst leer lassen und später aktualisieren.
Capacitor einrichten
Angenommen, du hast bereits ein Capacitor-Projekt, ist dieses Tutorial framework-agnostisch, sodass du jedes gewünschte UI-Framework verwenden und den Code entsprechend aktualisieren kannst.
Abhängigkeiten installieren
Logto-Client initialisieren
- Der
endpointist der Logto-API-Endpunkt. Du findest ihn in der eingebauten Anleitung oder im Abschnitt Domains in den Mandanteneinstellungen. - Die
appIdist die Logto-Anwendungs-ID. Du findest sie auf der Anwendungsdetailseite.
Anmelden-Button implementieren
Füge den folgenden Code zum onClick-Handler des Anmelde-Buttons hinzu:
Ersetze com.example.app://callback mit der Umleitungs-URI, die du in der Logto-Anwendung konfiguriert hast.
Kontrollpunkt: Authentifizierungsfluss auslösen
Führe die Capacitor-App aus und klicke den Anmelde-Button. Ein Browserfenster öffnet sich und leitet zur Logto-Anmeldeseite weiter.
Abmelden
Da Capacitor den Safari View Controller auf iOS und Chrome Custom Tabs auf Android nutzt, kann der Authentifizierungszustand eine Weile bestehen bleiben. Gelegentlich möchte der Benutzer jedoch sofort aus der Anwendung abgemeldet werden. In diesem Fall kann die signOut-Methode verwendet werden, um den Benutzer abzumelden:
Die signOut-Methode hat einen optionalen Parameter für die Umleitungs-URI nach der Abmeldung. Wenn sie nicht bereitgestellt wird, wird der Benutzer zur Logto-Abmeldeseite weitergeleitet:
Der Benutzer muss auf "Fertig" klicken, um die Webansicht zu schließen und zur Capacitor-App zurückzukehren. Wenn du den Benutzer automatisch zurück zur Capacitor-App leiten möchtest, kannst du die Umleitungs-URI nach der Abmeldung angeben:
Stelle sicher, dass die Umleitungs-URI nach der Abmeldung zur Capacitor-App umleitet und füge sie in der Logto-Konsole hinzu:
Kontrollpunkt: Authentifizierungsfluss abschließen
Führe die Capacitor-App erneut aus und klicke den Anmelde-Button. Wenn alles gut geht, erhält die Capacitor-App nach Abschluss des Authentifizierungsflusses das Anmeldeergebnis und druckt die Benutzeransprüche in der Konsole.
Klicke dann den Abmelde-Button und die Capacitor-App wird zur Logto-Abmeldeseite weitergeleitet. Sie wird automatisch zurück zur Capacitor-App leiten, wenn die Umleitungs-URI nach der Abmeldung konfiguriert ist.
Nun kannst du den Authentifizierungsfluss in der Logto Cloud Console konfigurieren, ohne komplexen Code zu schreiben. Die Konfiguration wird auf alle Client-Anwendungen angewendet, um eine konsistente Benutzererfahrung sicherzustellen.
Wenn du während der Integration auf Probleme stößt, zögere nicht, uns per E-Mail an [email protected] zu kontaktieren oder unserem Discord-Server beizutreten!