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

Artikel
05/03/2023

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

In dit artikel komen de volgende taken aan bod:

Een nieuwe toepassing registreren via de Azure-portal.
Maak gecombineerde aanmeldings- en registratie-, profielbewerkings- en wachtwoordherstel gebruikersstromen voor de app in de Azure Portal.
Werk een voorbeeld van een Node-toepassing bij om uw eigen Azure AD B2C-toepassing en gebruikersstromen te gebruiken.
De voorbeeldtoepassing testen.

Vereisten

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 gebruikersstroom 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_ vóór de naam van de gebruikersstroom toe. Zo wordt susi gewijzigd in B2C_1_susi.

Stap 2: Een webtoepassing registreren

Als u wilt dat uw toepassing zich kan aanmelden met Azure AD B2C, registreert u uw app in de Azure AD B2C-map. Als u uw app registreert, brengt u een vertrouwensrelatie tussen de app en Azure AD B2C tot stand.

Tijdens de app-registratie geeft u de omleidings-URI op. De omleidings-URI is het eindpunt waarnaar gebruikers worden omgeleid door Azure AD B2C nadat ze zich met Azure AD B2C hebben geverifieerd. Het app-registratieproces genereert een toepassings-id, ook wel client-id genoemd, waarmee uw toepassing op unieke wijze wordt aangeduid. 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 de Azure-portal.
Als u toegang hebt tot meerdere tenants, selecteert u het pictogram Instellingen in het bovenste menu om over te schakelen naar uw Azure AD B2C-tenant in het menu Mappen en 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 accounttypen de optie Accounts in een identiteitsprovider of organisatiemap (voor het verifiëren 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 Beheerdersgoedkeuring verlenen aan machtigingen van OpenID en offline_access in.
Selecteer Registreren.
Selecteer Overzicht.
Noteer voor later gebruik de toepassings-id (client) wanneer u de webtoepassing configureert.

Stap 2.2: Een web-app-clientgeheim maken

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

Selecteer onder Beheren de optie Certificaten & Geheimen.
Selecteer Nieuw clientgeheim.
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 voorbeeld web-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

Het voorbeeldbestand uitpakken naar 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 fietsstuur-bestanden voor de gebruikersinterface van de toepassing.

Stap 4: Afhankelijkheden installeren

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

Stap 5: De voorbeeld web-app configureren

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

Sleutel	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 aanmelden en registreren gebruikersstroom autoriteit, 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`. Meer informatie over het ophalen van uw tenantnaam.
`RESET_PASSWORD_POLICY_AUTHORITY`	De wachtwoord opnieuw instellen gebruikersstroom autoriteit, 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 uw aanmeldings- en registratiegebruikersstroom, zoals `B2C_1_reset_password_node_app`.
`EDIT_PROFILE_POLICY_AUTHORITY`	De Profielbewerking gebruikersstroom autoriteit, 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 uw aanmeldings- en registratiegebruikersstroom, zoals `B2C_1_edit_profile_node_app`.
`AUTHORITY_DOMAIN`	Uw Azure AD B2C-autoriteitdomein, zoals `https://<your-tenant-name>.b2clogin.com`. Vervang `<your-tenant-name>` door 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 zoals het is.
`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 definitieve configuratiebestand moet er als de volgende JSON uitzien:

#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 voorbeeld-web-app uitvoeren

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

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

Nadat de pagina met de knop Aanmelden is geladen, selecteert u Aanmelden. U wordt gevraagd om u aan te melden.
Voer uw aanmeldingsreferenties in, zoals het e-mailadres en wachtwoord. Als u geen account hebt, selecteert u Nu registreren om een account te maken. Nadat u zich hebt geregistreerd of aangemeld, verschijnt 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 nieuwe 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, geef deze op in het dialoogvenster voor het opnieuw instellen van het wachtwoord en selecteer Code verifiëren.
Selecteer Continue.
Voer uw nieuwe wachtwoord in, bevestig het en selecteer vervolgens Doorgaan. U ziet nu de pagina met de aanmeldingsstatus.

De afmelding testen

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

Volgende stappen

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