Erstelle Expo (React Native) Authentifizierung mit Logto
Lerne, wie man einen Benutzer-Authentifizierungsablauf mit Expo (React Native) durch die Integration des Logto SDKs erstellt.
Founder
Erste Schritte
Einführung
- Logto ist eine Open-Source-Alternative zu Auth0 für den Aufbau von Identitätsinfrastrukturen. Es unterstützt verschiedene Anmeldemethoden, einschließlich Benutzername, E-Mail, Telefonnummer und beliebte soziale Anmeldungen wie Google und GitHub.
- Expo (React Native) ist ein Ökosystem von Werkzeugen, die dir helfen, universelle native Apps mit React zu erstellen, die auf Android, iOS und dem Web laufen.
In diesem Tutorial zeigen wir Ihnen, wie Sie mit Expo (React Native) einen Benutzerauthentifizierungsablauf durch die Integration des Logto SDK erstellen. Das Tutorial verwendet TypeScript als Programmiersprache.
Voraussetzungen
Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:
- Ein Logto-Konto. Wenn Sie noch keins haben, können Sie sich kostenlos registrieren.
- An Expo (React Native)-Entwicklungsumgebung und ein Projekt.
Erstellen Sie eine Logto-Anwendung
Um loszulegen, erstellen Sie eine Logto-Anwendung mit dem Typ "Native". Befolgen Sie diese Schritte, um eine Logto-Anwendung zu erstellen:
- Melden Sie sich bei der Logto-Konsole an.
- Klicken Sie in der linken Navigationsleiste auf Anwendungen.
- Klicken Sie auf Anwendung erstellen.
- Suchen Sie auf der geöffneten Seite den Abschnitt "Native" und finden Sie die Karte "Expo (React Native)".
- Klicken Sie auf Mit dem Bauen beginnen und geben Sie den Namen Ihrer Anwendung ein.
- Klicken Sie auf Erstellen.
Dann sollten Sie eine interaktive Anleitung sehen, die Sie durch den Prozess der Integration des Logto SDK in Ihre Expo (React Native)-Anwendung führt. Der folgende Inhalt kann als Referenz für die zukünftige Verwendung dienen.
Integration mit Logto SDK
Installation
Installiere das Logto SDK und die Peer-Abhängigkeiten über deinen bevorzugten Paketmanager:
Das Paket @logto/rn ist das SDK für Logto. Die verbleibenden Pakete sind seine Peer-Abhängigkeiten. Sie konnten nicht als direkte Abhängigkeiten aufgelistet werden, weil das Expo CLI verlangt, dass alle Abhängigkeiten für native Module direkt im package.json des Root-Projekts installiert werden.
Logto-Provider initialisieren
Importiere und verwende LogtoProvider, um einen Logto-Kontext bereitzustellen:
Anmeldung und Abmeldung implementieren
Wechsle zur Anwendungsdetailseite der Logto-Konsole. Füge eine native Redirect-URI hinzu (zum Beispiel io.logto://callback), und klicke dann auf "Speichern".
-
Für iOS spielt das Redirect-URI-Schema keine wirkliche Rolle, da die Klasse
ASWebAuthenticationSessionauf die Redirect-URI unabhängig davon hört, ob sie registriert ist. -
Für Android muss das Redirect-URI-Schema in Expos
app.jsonDatei ausgefüllt werden, zum Beispiel:
Zurück in deiner App kannst du den useLogto Hook verwenden, um dich anzumelden und abzumelden:
Benutzerinformationen anzeigen
Um die Informationen des Benutzers anzuzeigen, kannst du die Methode getIdTokenClaims() verwenden:
Checkpoint: Anwendung ausführen
Jetzt können Sie die Anwendung ausführen und versuchen, sich mit Logto an- und abzumelden:
- Öffnen Sie die Anwendung in Ihrem Browser, Sie sollten die Schaltfläche "Anmelden" sehen.
- Klicken Sie auf die Schaltfläche "Anmelden" und Sie sollten zur Logto-Anmeldeseite weitergeleitet werden.
- Nachdem Sie sich angemeldet haben, sollten Sie zurück zur Anwendung weitergeleitet werden und die Benutzerdaten und die Schaltfläche "Abmelden" sehen.
- Klicken Sie auf die Schaltfläche "Abmelden" und Sie sollten zur Logto-Abmeldeseite weitergeleitet werden und dann zurück zur Anwendung mit einem abgemeldeten Zustand.
Wenn Sie während der Integration auf Probleme stoßen, zögern Sie nicht, unserem Discord-Server beizutreten, um mit der Community und dem Logto-Team zu chatten!