Gebruikers aanmelden in een voorbeeld Node.js webtoepassing

Artikel
10/04/2023

In deze handleiding wordt een voorbeeld van een Node.js webtoepassing gebruikt om te laten zien hoe u verificatie toevoegt aan een webtoepassing. Met de voorbeeldtoepassing kunnen gebruikers zich aanmelden en afmelden. De voorbeeldwebtoepassing gebruikt Microsoft Authentication Library for Node (MSAL Node) voor Node om verificatie af te handelen.

In dit artikel voert u de volgende taken uit:

Registreer een webtoepassing in het Microsoft Entra-beheercentrum.
Maak een gebruikersstroom voor aanmelden en afmelden in Microsoft Entra beheercentrum.
Koppel uw webtoepassing aan de gebruikersstroom.
Werk een voorbeeld Node.js webtoepassing bij met behulp van uw eigen Microsoft Entra-id voor tenantgegevens van klanten.
Voer de voorbeeldwebtoepassing uit en test deze.

Vereisten

Node.js.
Visual Studio Code of een andere code-editor.
Microsoft Entra-id voor de tenant van de klant. Als u nog geen abonnement hebt, meldt u zich aan voor een gratis proefversie.

De web-app registreren

Als u wilt dat uw toepassing gebruikers kan aanmelden met Microsoft Entra, moet Microsoft Entra-id voor klanten op de hoogte worden gebracht van de toepassing die u maakt. De app-registratie brengt een vertrouwensrelatie tot stand tussen de app en Microsoft Entra. Wanneer u een toepassing registreert, genereert Externe id een unieke id die bekend staat als een toepassings-id (client),een waarde die wordt gebruikt om uw app te identificeren bij het maken van verificatieaanvragen.

In de volgende stappen ziet u hoe u uw app registreert in het Microsoft Entra-beheercentrum:

Meld u aan bij het Microsoft Entra-beheercentrum als ten minste een toepassingsontwikkelaar.
Als u toegang hebt tot meerdere tenants, gebruikt u het filter Mappen en abonnementen in het bovenste menu om over te schakelen naar de tenant van uw klant.
Blader naar Identiteitstoepassingen>>App-registraties.
Selecteer + Nieuwe registratie.
Op de pagina Een toepassing registreren die wordt weergegeven;
1. Voer een betekenisvolle toepassingsnaam in die wordt weergegeven voor gebruikers van de app, bijvoorbeeld ciam-client-app.
2. Onder Ondersteunde accounttypen selecteert u Enkel accounts in deze organisatieadreslijst.
Selecteer Registreren.
Het deelvenster Overzicht van de toepassing wordt weergegeven wanneer de registratie is voltooid. Noteer de toepassings-id (client)-id die moet worden gebruikt in de broncode van uw toepassing.

Voer de volgende stappen uit om uw app-type op te geven voor uw app-registratie:

Selecteer Verificatie onder Beheren.
Selecteer op de pagina Platformconfiguratiesde optie Een platform toevoegen en selecteer vervolgens de optie Web .
Voer voor de omleidings-URI's in http://localhost:3000/auth/redirect
Selecteer Configureren om uw wijzigingen op te slaan.
Selecteer op de pagina Platformconfiguraties onder Web de optie URI toevoegen en voer vervolgens in http://localhost:3000/
Selecteer Opslaan om uw wijzigingen op te slaan en zorg ervoor dat beide URI's worden weergegeven.

App-clientgeheim toevoegen

Maak vervolgens een clientgeheim voor de geregistreerde toepassing. De toepassing gebruikt het clientgeheim om de identiteit te bewijzen wanneer er tokens worden aangevraagd.

Selecteer op de pagina App-registraties de toepassing die u hebt gemaakt (zoals ciam-client-app) om de pagina Overzicht te openen.
Selecteer onder Beheren de optie Certificaten en geheimen.
Selecteer Nieuw clientgeheim.
Voer in het vak Beschrijving een beschrijving in voor het clientgeheim (bijvoorbeeld ciam app clientgeheim).
Selecteer onder Verloopt een duur waarvoor het geheim geldig is (volgens de beveiligingsregels van uw organisatie) en selecteer vervolgens Toevoegen.
Noteer de Waarde van het geheim. U gebruikt deze waarde voor configuratie in een latere stap.

Notitie

De geheime waarde wordt niet meer weergegeven en kan op geen enkele manier worden opgehaald nadat u de pagina Certificaten en geheimen hebt verwijderd. Zorg er dus voor dat u deze opneemt.
Voor verbeterde beveiliging kunt u overwegen certificaten te gebruiken in plaats van clientgeheimen.

API-machtigingen verlenen

Aangezien gebruikers zich met deze app aanmelden, voegt u gedelegeerde machtigingen toe:

Selecteer op de pagina App-registraties de toepassing die u hebt gemaakt (zoals ciam-client-app) om de pagina Overzicht te openen.
Selecteer onder Beheren de optie API-machtigingen.
Selecteer onder Geconfigureerde machtigingen de optie Een machtiging toevoegen.
Selecteer het tabblad Microsoft API's .
Selecteer in de sectie Veelgebruikte Microsoft-API'sde optie Microsoft Graph.
Selecteer de optie Gedelegeerde machtigingen .
Zoek en selecteer in de sectie Machtigingen selecteren zowel openid als offline_access machtigingen.
Selecteer de knop Toestemmingen toevoegen.
Op dit moment hebt u de machtigingen correct toegewezen. Omdat de tenant echter de tenant van een klant is, kunnen de consumentengebruikers zelf geen toestemming geven voor deze machtigingen. U moet als beheerder toestemming geven voor deze machtigingen namens alle gebruikers in de tenant:
1. Selecteer Beheerderstoestemming verlenen voor <uw tenantnaam> en selecteer vervolgens Ja.
2. Selecteer Vernieuwen en controleer vervolgens of Verleend voor <uw tenantnaam> wordt weergegeven onder Status voor beide bereiken.

Een gebruikersstroom maken

Volg deze stappen om een gebruikersstroom te maken die een klant kan gebruiken om zich aan te melden of te registreren voor een toepassing.

Meld u aan bij het Microsoft Entra-beheercentrum als ten minste een beheerder van de externe id-gebruikersstroom.
Als u toegang hebt tot meerdere tenants, gebruikt u het filter Mappen en abonnementen in het bovenste menu om over te schakelen naar de tenant van uw klant.
Blader naar Identiteitsgebruikersstromen>voor externe identiteiten>.
Selecteer + Nieuwe gebruikersstroom.
Op de pagina Maken :
1. Voer een naam in voor de gebruikersstroom, zoals SignInSignUpSample.
2. Selecteer Email Accounts in de lijst Id-providers. Met deze id-provider kunnen gebruikers zich aanmelden of registreren met hun e-mailadres.
  
  Notitie
  
  Aanvullende id-providers worden hier alleen weergegeven nadat u federatie met hen hebt ingesteld. Als u bijvoorbeeld federatie met Google of Facebook instelt, kunt u deze extra id-providers hier selecteren.
3. Onder Email accounts kunt u een van de twee opties selecteren. Voor deze zelfstudie selecteert u Email met wachtwoord.
  - Email met wachtwoord: hiermee kunnen nieuwe gebruikers zich registreren en aanmelden met een e-mailadres als aanmeldingsnaam en een wachtwoord als hun eerste factorreferentie.
  - Email eenmalige wachtwoordcode: hiermee kunnen nieuwe gebruikers zich registreren en zich aanmelden met een e-mailadres als aanmeldingsnaam en een eenmalige wachtwoordcode als hun eerste factorreferentie per e-mail verzenden.
    
    Notitie
    
    Email eenmalige wachtwoordcode moet zijn ingeschakeld op tenantniveau (Alle id-providers>Email eenmalige wachtwoordcode) om deze optie beschikbaar te maken op het niveau van de gebruikersstroom.
4. Kies onder Gebruikerskenmerken de kenmerken die u wilt verzamelen van de gebruiker bij de registratie. Als u Meer weergeven selecteert, kunt u kenmerken en claims kiezen voor Land/regio, Weergavenaam en Postcode. Selecteer OK. (Gebruikers worden alleen gevraagd om kenmerken wanneer ze zich voor de eerste keer registreren.)
Selecteer Maken. De nieuwe gebruikersstroom wordt weergegeven in de lijst Gebruikersstromen . Vernieuw de pagina indien nodig.

Als u selfservice voor wachtwoordherstel wilt inschakelen, gebruikt u de stappen in het artikel Selfservice voor wachtwoordherstel inschakelen .

De webtoepassing koppelen aan de gebruikersstroom

Hoewel veel toepassingen aan uw gebruikersstroom kunnen worden gekoppeld, kan één toepassing slechts aan één gebruikersstroom worden gekoppeld. Met een gebruikersstroom kunt u de gebruikerservaring voor specifieke toepassingen configureren. U kunt bijvoorbeeld een gebruikersstroom configureren waarvoor gebruikers zich moeten aanmelden of registreren met een telefoonnummer of e-mailadres.

Selecteer Identiteit in het zijbalkmenu.
Selecteer Externe identiteiten en vervolgens Gebruikersstromen.
Selecteer op de pagina Gebruikersstromen de naam van de gebruikersstroom die u eerder hebt gemaakt, bijvoorbeeld SignInSignUpSample.
Selecteer onder Gebruikende optie Toepassingen.
Selecteer Toepassing toevoegen.
Selecteer de toepassing in de lijst, zoals ciam-client-app , of gebruik het zoekvak om de toepassing te zoeken en selecteer deze.
Kies Selecteren.

Voorbeeldwebtoepassing klonen of downloaden

Als u de voorbeeldcode van de web-app wilt ophalen, kunt u een van de volgende taken uitvoeren:

Download het .zip-bestand of kloon de voorbeeldwebtoepassing vanuit GitHub door de volgende opdracht uit te voeren:
```
    git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
```

Als u ervoor kiest om het .zip-bestand te downloaden, extraheert u het voorbeeld-app-bestand naar een map waarin de totale lengte van het pad 260 tekens of minder is.

Projectafhankelijkheden installeren

Open een consolevenster en ga naar de map met de Node.js voorbeeld-app:
```
    cd 1-Authentication\5-sign-in-express\App
```
Voer de volgende opdrachten uit om de vereiste app-afhankelijkheden te installeren:
```
    npm install && npm update
```

De voorbeeld-web-app configureren

Open App\authConfig.js-bestand in de code-editor.
Zoek de tijdelijke aanduiding:
1. Enter_the_Application_Id_Here en vervang deze door de toepassings-id (client) van de app die u eerder hebt geregistreerd.
2. Enter_the_Tenant_Subdomain_Here en vervang dit door het subdomein Map (tenant). Als het primaire domein van uw tenant bijvoorbeeld is contoso.onmicrosoft.com, gebruikt u contoso. Als u de naam van uw tenant niet hebt, leest u hoe u uw tenantgegevens kunt lezen.
3. Enter_the_Client_Secret_Here en vervang deze door de waarde van het app-geheim dat u eerder hebt gekopieerd.

Voorbeeld-web-app uitvoeren en testen

U kunt nu de voorbeeld-Node.js web-app testen. U moet de Node.js server starten en openen via uw browser op http://localhost:3000.

Voer in uw terminal de volgende opdracht uit:
```
    npm start 
```
Open uw browser en ga naar http://localhost:3000. De pagina ziet er ongeveer als volgt uit:
Nadat de pagina is geladen, selecteert u Koppeling aanmelden . U wordt gevraagd om u aan te melden.
Typ op de aanmeldingspagina uw Email adres, selecteer Volgende, typ uw wachtwoord en selecteer vervolgens Aanmelden. Als u geen account hebt, selecteert u Geen account? Maak één koppeling, waarmee de registratiestroom wordt gestart.
Als u de registratieoptie kiest, voltooit u de volledige registratiestroom nadat u uw e-mailadres, eenmalige wachtwoordcode, nieuwe wachtwoord en meer accountgegevens hebt ingevuld. U ziet een pagina die lijkt op de volgende schermafbeelding. U ziet een vergelijkbare pagina als u de aanmeldingsoptie kiest.
Selecteer Afmelden om de gebruiker af te melden bij de web-app of selecteer Id-tokenclaims weergeven om id-tokenclaims weer te geven die door Microsoft Entra zijn geretourneerd.

Uitleg

Wanneer gebruikers de koppeling Aanmelden selecteren, initieert de app een verificatieaanvraag en worden gebruikers omgeleid naar Microsoft Entra-id voor klanten. Op de aanmeldings- of registratiepagina die wordt weergegeven, retourneert Microsoft Entra id voor klanten een id-token naar de app zodra een gebruiker zich heeft aangemeld of een account heeft gemaakt. De app valideert het id-token, leest de claims en retourneert een beveiligde pagina naar de gebruikers.

Wanneer de gebruikers de koppeling Afmelden selecteren, wordt de sessie gewist door de app. De gebruiker wordt omgeleid naar Microsoft Entra-id voor het afmeldingseindpunt van klanten om te melden dat de gebruiker zich heeft afgemeld.

Als u een app wilt bouwen die vergelijkbaar is met het voorbeeld dat u hebt uitgevoerd, voert u de stappen uit in het artikel Gebruikers aanmelden in uw eigen Node.js webtoepassing .

Volgende stappen

U kunt het volgende doen: