Een praktische gids en voorbeeld om Passport.js met Logto te integreren.
Passport.js is een authenticatiemiddleware voor Node.js die onopvallend kan worden toegevoegd aan elke op Express gebaseerde webtoepassing. Deze uitgebreide gids zal zich richten op het gebruik van de passport-openidconnect plugin, die een eenvoudige maar effectieve manier biedt om Logto met Passport.js te integreren. Gedurende deze tutorial zullen we Express.js gebruiken om onze applicatie te bouwen. Alle code die we bespreken is beschikbaar in een openbaar GitHub repository.
Voordat we in het integratieproces duiken, moeten we het basisproject opzetten door Express.js en zijn sessie-middleware te installeren.
Aangenomen dat je een TypeScript-projectomgeving hebt voorbereid (zo niet, raadpleeg de officiële TypeScript-documentatie), begin dan met het installeren van de benodigde pakketten:
Maak src/app.ts met de volgende code:
Dit script initialiseert de Express-app en configureert cookieParser en session middleware voor op cookies gebaseerde sessiebeheer, cruciaal voor het opslaan van authenticatieresultaten in Passport.js. Het gebruikt vervolgens de http module om de dienst te lanceren.
Om verder te gaan, is een Logto-applicatie nodig. Maak er een door naar de Logto Console te gaan, naar "Toepassingen" te navigeren en op "Toepassing maken" te klikken. Selecteer "Express", geef je applicatie een naam en klik op "Toepassing maken".
Na het voltooien of het lezen van de creatiegids, vind je een gedetailleerde pagina met configuratie-informatie voor de volgende stappen.
Op de applicatiedetailpagina configureer je twee waarden:
http://localhost:3000/callback om in lijn te zijn met de callback-route van het project.http://localhost:3000 voor eenvoud, zodat gebruikers na afmelden worden doorgestuurd naar de homepage.Je kunt deze waarden later wijzigen.
Installeer passport en de OIDC-strategieplugin, passport-openidconnect:
Maak app/config.ts voor configuratiebeheer:
Stel de omgevingsvariabelen dienovereenkomstig in:
| Omgevingsvariabele | Beschrijving | Voorbeeld |
|---|---|---|
APP_ID | App ID van Logto | 4ukboxxxxxxxxx |
APP_SECRET | App Secret van Logto | 5aqccxxxxxxx |
ENDPOINT | Logto Endpoint | https://g5xxx.logto.app/ |
Maak src/passport.ts
Deze code initialiseert Passport met de OpenIDConnectStrategy. De serialize- en deserialize-methoden zijn ingesteld voor demonstratiedoeleinden.
Zorg ervoor dat je Passport middleware initialiseert en bevestigt in je applicatie:
We gaan nu specifieke routes maken voor authenticatieprocessen:
/sign-inDeze route bouwt en leidt door naar een OIDC-authenticatieroute.
/callbackDit behandelt de OIDC-inlogcallback, slaat tokens op en leidt door naar de homepage.
/sign-outDit leidt door naar Logto's sessie-eind-URL en vervolgens terug naar de homepage.
Ontwikkel de homepage met authenticatiestatus:
Hier wordt gebruikersinformatie weergegeven met behulp van JSON.stringify, en het bestaan van request.user wordt gebruikt om routes te beveiligen.
Gefeliciteerd met het integreren van Passport.js met Logto. Hopelijk kan deze gids je helpen bij het migreren van bestaande systemen naar het gebruik van Logto. Voor een verbeterde authenticatie-ervaring, overweeg vandaag nog Logto Cloud uit te proberen. Veel plezier met coderen!