Verificatie configureren in een voorbeeld-Node.js-webtoepassing met behulp van Azure Active Directory B2C

Belangrijk

Vanaf 1 mei 2025 is Azure AD B2C niet meer beschikbaar voor nieuwe klanten. Meer informatie vindt u in onze veelgestelde vragen.

In dit voorbeeldartikel wordt een voorbeeld Node.js toepassing gebruikt om te laten zien hoe u Azure Active Directory B2C-verificatie (Azure AD B2C) toevoegt aan een Node.js webtoepassing. Met de voorbeeldtoepassing kunnen gebruikers zich aanmelden, afmelden, profiel bijwerken en wachtwoord opnieuw instellen met behulp van Azure AD B2C-gebruikersstromen. De voorbeeldwebtoepassing maakt gebruik van Microsoft Authentication Library (MSAL) voor Node voor het afhandelen van verificatie en autorisatie.

In dit artikel voert u de volgende taken uit:

Registreer een webtoepassing in Azure Portal.
Maak gecombineerde aanmeldings- en registratie-, profielbewerkings- en wachtwoordherstelgebruikersstromen voor de app in Azure Portal.
Werk een voorbeeld van een Node-toepassing bij om uw eigen Azure AD B2C-toepassing en gebruikersstromen te gebruiken.
Test de voorbeeldtoepassing.

Vereiste voorwaarden

Node.js.
Visual Studio Code of een andere code-editor.
Azure AD B2C-tenant. Als u nog geen eigen tenant hebt gemaakt, volgt u de stappen in zelfstudie: Een Azure Active Directory B2C-tenant maken en uw tenantnaam vastleggen.

Stap 1: Uw gebruikersstromen configureren

Wanneer gebruikers zich proberen aan te melden bij uw app, start de app een verificatieaanvraag naar het autorisatie-eindpunt via een gebruikersstroom. De gebruikersstroom definieert en bepaalt de gebruikerservaring. Nadat gebruikers de gebruikersstroom hebben voltooid, genereert Azure AD B2C een token en leidt het gebruikers vervolgens terug naar de toepassing.

Maak een gebruikersstroom of een aangepast beleid als u dit nog niet hebt gedaan. Herhaal de stappen om de volgende drie afzonderlijke gebruikersstromen te maken:

Een gecombineerde gebruikersstroom voor aanmelden en registreren, zoals susi. Deze gebruikersstroom ondersteunt ook de ervaring Wachtwoord vergeten.
Een gebruikersstroom voor profielbewerking, zoals edit_profile.
Een gebruikersstroom voor Wachtwoord opnieuw instellen, zoals reset_password.

Azure AD B2C voegt B2C_1_ aan de naam van de gebruikersstroom toe. susi wordt bijvoorbeeld B2C_1_susi.

Stap 2: Een webtoepassing registreren

Als u uw toepassing wilt aanmelden met Azure AD B2C, moet u uw app registreren in de Azure AD B2C-directory. De app-registratie brengt een vertrouwensrelatie tot stand tussen de app en Azure AD B2C.

Tijdens de app-registratie geeft u de omleidings-URI op. De omleidings-URI is het eindpunt waarnaar de gebruiker wordt omgeleid door Azure AD B2C nadat deze is geverifieerd met Azure AD B2C. Het app-registratieproces genereert een toepassings-id, ook wel de client-id genoemd, die uw app uniek identificeert. Nadat uw app is geregistreerd, gebruikt Azure AD B2C zowel de toepassings-id als de omleidings-URI om verificatieaanvragen te maken.

Stap 2.1: De app registreren

Voer de volgende stappen uit om de web-app te registreren:

Meld u aan bij het Azure-portaal.
Als u toegang hebt tot meerdere tenants, selecteert u het pictogram Instellingen in het hoofdmenu om over te schakelen naar uw Azure AD B2C-tenant vanuit het menu Mappen + abonnementen.
Zoek en selecteer Azure AD B2C in de Azure-portal.
Selecteer App-registraties en selecteer vervolgens Nieuwe registratie.
Voer onder Naam een naam in voor de toepassing (bijvoorbeeld webapp1).
Selecteer onder Ondersteunde accounttypenAccounts in een id-provider of organisatiemap (voor verificatie van gebruikers met gebruikersstromen).
Selecteer onder Omleidings-URI de optie Web en voer vervolgens in het vak URL http://localhost:3000/redirect in.
Schakel onder Machtigingen het selectievakje Beheerderstoestemming verlenen in voor openid en offline_access machtigingen .
Selecteer Registreren.
Selecteer Overzicht.
Noteer voor later gebruik de toepassings-id (client) wanneer u de webtoepassing configureert.

Stap 2.2: Een clientgeheim voor een web-app maken

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

Selecteer onder Beheren de optie Certificaten en geheimen.
Selecteer nieuwe clientsleutel.
Voer in het vak Beschrijving een beschrijving in voor het clientgeheim (bijvoorbeeld clientsecret1).
Selecteer onder Verloopt een duur waarvoor het geheim geldig is en selecteer vervolgens Toevoegen.
Noteer de waarde van het geheim. U gebruikt deze waarde voor configuratie in een latere stap.

Stap 3: De voorbeeldweb-app ophalen

Download het zip-bestand of kloon de voorbeeldwebtoepassing vanuit GitHub.

git clone https://github.com/Azure-Samples/active-directory-b2c-msal-node-sign-in-sign-out-webapp.git

Pak het voorbeeldbestand uit in een map. U krijgt een web-app met de volgende mapstructuur:

active-directory-b2c-msal-node-sign-in-sign-out-webapp/
├── index.js
└── package.json
└── .env
└── views/
    └── layouts/
        └── main.hbs
    └── signin.hbs

De views map bevat handlebars-bestanden voor de gebruikersinterface van de toepassing.

Stap 4: Afhankelijkheden installeren

Open een consolevenster en ga naar de map met de Node.js voorbeeld-app. Voorbeeld:
```
cd active-directory-b2c-msal-node-sign-in-sign-out-webapp
```
Voer de volgende opdrachten uit om app-afhankelijkheden te installeren:
```
npm install && npm update
```

Stap 5: De voorbeeldweb-app configureren

Open uw web-app in een code-editor, zoals Visual Studio Code. Open onder de hoofdmap van het project het .env-bestand . Dit bestand bevat informatie over uw Azure AD B2C-id-provider. Werk de volgende eigenschappen van de app-instellingen bij:

Sleutelcode	Waarde
`APP_CLIENT_ID`	De toepassings-id (client) voor de web-app die u hebt geregistreerd in stap 2.1.
`APP_CLIENT_SECRET`	De waarde van het clientgeheim voor de web-app die u in stap 2.2 hebt gemaakt
`SIGN_UP_SIGN_IN_POLICY_AUTHORITY`	De instantie voor aanmelden en registreren van gebruikersstromen, zoals `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>`. Vervang `<your-tenant-name>` door de naam van uw tenant en `<sign-in-sign-up-user-flow-name>` door de naam van uw aanmeldings- en registratiegebruikersstroom, zoals `B2C_1_susi`. Leer hoe u uw tenantnaam kunt verkrijgen.
`RESET_PASSWORD_POLICY_AUTHORITY`	De instantie voor het opnieuw instellen van de gebruikersstroom voor wachtwoorden , zoals `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>`. Vervang `<your-tenant-name>` door de naam van uw tenant en `<reset-password-user-flow-name>` door de naam van de wachtwoordherstel gebruikersstroom, zoals `B2C_1_reset_password_node_app`.
`EDIT_PROFILE_POLICY_AUTHORITY`	De instantie voor het bewerken van de gebruikersstroom van het profiel, zoals `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>`. Vervang `<your-tenant-name>` door de naam van uw tenant en `<reset-password-user-flow-name>` door de naam van de gebruikersstroom voor het opnieuw instellen van het wachtwoord, zoals `B2C_1_edit_profile_node_app`.
`AUTHORITY_DOMAIN`	Het Azure AD B2C-instantiedomein, zoals `https://<your-tenant-name>.b2clogin.com`. Vervang door `<your-tenant-name>` de naam van uw tenant.
`APP_REDIRECT_URI`	De omleidings-URI van de toepassing waarbij Azure AD B2C verificatiereacties (tokens) retourneert. Deze komt overeen met de omleidings-URI die u hebt ingesteld tijdens het registreren van uw app in Azure Portal en moet openbaar toegankelijk zijn. Laat de waarde staan.
`LOGOUT_ENDPOINT`	Het Azure AD B2C-afmeldingseindpunt, zoals `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000`. Vervang `<your-tenant-name>` door de naam van uw tenant en `<sign-in-sign-up-user-flow-name>` door de naam van uw aanmeldings- en registratiegebruikersstroom, zoals `B2C_1_susi`.

Het uiteindelijke configuratiebestand moet eruitzien als in het volgende voorbeeld:

#HTTP port
SERVER_PORT=3000
#web apps client ID
APP_CLIENT_ID=<You app client ID here>
#session secret
SESSION_SECRET=sessionSecretHere
#web app client secret
APP_CLIENT_SECRET=<Your app client secret here>
#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>
#B2C authority domain
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

De voorbeeldweb-app uitvoeren

U kunt nu de voorbeeld-app testen. Je moet de Node-server starten en er toegang toe krijgen via je browser op http://localhost:3000.

Voer in uw terminal de volgende code uit om de Node.js webserver te starten:
```
node index.js
```
Ga in uw browser naar http://localhost:3000. U zou een pagina met een Aanmelden-knop moeten zien.

Nadat de pagina met de knop Aanmelden is geladen, selecteert u Aanmelden. U wordt gevraagd u aan te melden.
Voer uw aanmeldingsreferenties in, zoals e-mailadres en wachtwoord. Als u geen account hebt, selecteert u Nu registreren om een account te maken. Nadat u zich hebt aangemeld of zich hebt geregistreerd, ziet u de volgende pagina met de aanmeldingsstatus.

Profiel bewerken testen

Nadat u zich hebt aangemeld, selecteert u Profiel bewerken.
Voer indien nodig nieuwe wijzigingen in en selecteer Vervolgens Doorgaan. U ziet de pagina met de aanmeldingsstatus met de wijzigingen, zoals Voornaam.

Wachtwoord opnieuw instellen testen

Nadat u zich hebt aangemeld, selecteert u Wachtwoord opnieuw instellen.
In het volgende dialoogvenster dat wordt weergegeven, kunt u de bewerking annuleren door Annuleren te selecteren. U kunt ook uw e-mailadres invoeren en vervolgens verificatiecode verzenden selecteren. U ontvangt een verificatiecode voor uw e-mailaccount. Kopieer de verificatiecode in uw e-mail, voer deze in het dialoogvenster Wachtwoord opnieuw instellen in en selecteer Code verifiëren.
Klik op Doorgaan.
Voer uw nieuwe wachtwoord in, bevestig het en selecteer Vervolgens Doorgaan. U ziet nu de pagina met de aanmeldingsstatus.

Afmelden testen

Nadat u zich hebt aangemeld, selecteert u Afmelden. U ziet nu de pagina met een knop Aanmelden .

Volgende stappen

Meer informatie over het aanpassen en verbeteren van de Azure AD B2C-verificatie-ervaring voor uw webtoepassing.
Meer informatie over het inschakelen van verificatie in uw eigen Node-webtoepassing met behulp van Azure AD B2C.

Feedback

Is deze pagina nuttig?

Last updated on 2025-05-04