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.
GaoFounder
Verschwenden Sie keine Wochen mit Benutzerauthentifizierung
Bringen Sie sichere Apps schneller mit Logto auf den Markt. Integrieren Sie Benutzerauthentifizierung in Minuten und konzentrieren Sie sich auf Ihr Kernprodukt.
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.
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:
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.
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.
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:
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.
