Bouw CapacitorJS-authenticatie met Logto
In deze handleiding demonstreren we hoe je de authenticatiestroom kunt bouwen met Logto in Capacitor. Hiermee kun je eenvoudig platformonafhankelijke aanmeld- en registratiestromen creëren.
Founder
Inleiding
- Logto is een modern alternatief voor Auth0 om klantidentiteitsinfrastructuur met minimale inspanning te bouwen. Het ondersteunt verschillende aanmeldmethoden, waaronder gebruikersnaam, e-mail, telefoonnummer en populaire sociale aanmeldingen zoals Google en GitHub.
- Capacitor is een open-source native runtime voor het bouwen van Web Native apps.
In deze handleiding demonstreren we hoe je de authenticatiestroom kunt bouwen met Logto in Capacitor. Hiermee kun je eenvoudig platformonafhankelijke aanmeld- en registratiestromen creëren.
Vereisten
Voordat je begint, zorg ervoor dat je het volgende hebt:
- Een Logto-account. Als je er nog geen hebt, kun je gratis aanmelden.
- Een Capacitor-project. Je kunt de officiële handleiding volgen om er een te maken.
Maak een Logto-toepassing
Om te beginnen, maak je een Logto-toepassing van het type "Native". Logto-toepassingen dienen als clienttoepassingen in de OAuth 2.0- en OpenID Connect (OIDC)-stromen. Volg deze stappen om een Logto-toepassing te maken:
- Meld je aan bij de Logto Cloud Console.
- Klik in de linker navigatiebalk op Toepassingen.
- Klik op Toepassing maken.
- Selecteer Native als het type toepassing en voer de toepassingsnaam in.
- Klik op Maken.
Na het maken van de Logto-toepassing, configureer je de omleidings-URI. De omleidings-URI wordt gebruikt om de gebruiker na de authenticatiestroom terug te leiden naar je toepassing.
Zorg ervoor dat de URI verwijst naar de Capacitor-app, bijvoorbeeld com.example.app://callback. De waarde kan variëren, afhankelijk van je Capacitor-appconfiguratie. Voor meer details, zie Capacitor Deep Links.
Vergeet niet op Wijzigingen opslaan te klikken na het bijwerken van de omleidings-URI.
Als je niet zeker weet wat de omleidings-URI moet zijn, kun je deze voorlopig leeg laten en later bijwerken.
Capacitor instellen
Ervan uitgaande dat je al een Capacitor-project hebt, is deze handleiding framework-agnostisch, dus je kunt elk UI-framework gebruiken dat je verkiest en de code dienovereenkomstig aanpassen.
Installeer vereisten
Initialiseer Logto-client
- De
endpointis het Logto API-eindpunt. Je kunt het vinden in de ingebouwde gids of de Domeinen sectie in de tenant-instellingen. - De
appIdis de Logto-toepassings-ID. Je kunt het vinden op de toepassingsdetailpagina.
Implementeer de aanmeldknop
Voeg de volgende code toe aan de onClick-handler van de aanmeldknop:
Vervang com.example.app://callback door de omleidings-URI die je configureerde in de Logto-toepassing.
Checkpoint: Start de authenticatiestroom
Voer de Capacitor-app uit en klik op de aanmeldknop. Een browservenster wordt geopend en leidt door naar de Logto-aanmeldpagina.
Uitloggen
Aangezien Capacitor gebruikmaakt van de Safari View Controller op iOS en Chrome Custom Tabs op Android, kan de authenticatiestatus een tijdje bewaard blijven. Soms wil de gebruiker echter meteen uit de toepassing uitloggen. In dit geval kunnen we de signOut-methode gebruiken om de gebruiker uit te loggen:
De signOut-methode heeft een optionele parameter voor de omleidings-URI na het uitloggen. Als deze niet is opgegeven, wordt de gebruiker naar de Logto-uitlogpagina geleid:
De gebruiker moet op "Gereed" klikken om de webweergave te sluiten en terug te keren naar de Capacitor-app. Als je de gebruiker automatisch terug wilt leiden naar de Capacitor-app, kun je de omleidings-URI na het uitloggen opgeven:
Zorg ervoor dat de omleidings-URI na het uitloggen verwijst naar de Capacitor-app, en vergeet niet de omleidings-URI na het uitloggen toe te voegen aan de Logto-console:
Checkpoint: Voltooi de authenticatiestroom
Voer de Capacitor-app opnieuw uit en klik op de aanmeldknop. Als alles goed gaat, ontvangt de Capacitor-app het aanmeldresultaat wanneer de authenticatiestroom is voltooid en print de gebruikersclaims in de console.
Klik dan op de uitlogknop en de Capacitor-app wordt omgeleid naar de Logto-uitlogpagina. Het zal automatisch terugleiden naar de Capacitor-app als de omleidings-URI na het uitloggen is ingesteld.
Nu kun je de authenticatiestroom configureren in de Logto Cloud Console zonder complexe code te schrijven. De configuratie wordt toegepast op alle clienttoepassingen, waardoor een consistente gebruikerservaring wordt verzekerd.
Als je problemen ondervindt tijdens de integratie, aarzel dan niet om contact met ons op te nemen via e-mail op [email protected] of sluit je aan bij onze Discord-server!