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

  • Artikel

In dit artikel leert u hoe u een voorbeeld van een Node.js-webtoepassing configureert om een voorbeeld van een Node.js-web-API aan te roepen. De web-API moet worden beveiligd door Azure AD B2C zelf. In deze installatie wordt een web-app, zoals app-id: 1 , een web-API aangeroepen, zoals app-id: 2. Gebruikers verifiëren zich bij de web-app om een toegangstoken te verkrijgen, dat vervolgens wordt gebruikt om een beveiligde web-API aan te roepen.

Overzicht

Verificatie op basis van tokens zorgt ervoor dat aanvragen voor een web-API vergezeld gaan van een geldig toegangstoken.

De web-app voltooit de volgende gebeurtenissen:

  • Gebruikers worden geverifieerd met Azure AD B2C.

  • Er wordt een toegangstoken verkregen met de vereiste machtigingen (bereiken) voor het web-API-eindpunt.

  • Het toegangstoken wordt doorgegeven als bearer-token in de verificatieheader van de HTTP-aanvraag. De indeling wordt gebruikt:

Authorization: Bearer <token>

De web-API voltooit de volgende gebeurtenissen:

  • Het Bearer-token wordt gelezen uit de autorisatieheader in de HTTP-aanvraag.

  • Het token wordt gevalideerd.

  • De machtigingen (bereiken) in het token worden gevalideerd.

  • Er wordt gereageerd op de HTTP-aanvraag. Als het token niet geldig is, reageert het eindpunt van de web-API met een 401 Unauthorized HTTP-fout.

Overzicht van app-registratie

Als u wilt dat de app zich kan aanmelden met Azure AD B2C en een web-API kan aanroepen, moet u twee toepassingen registreren in de Azure AD B2C-directory.

  • Met de registratie van de web-toepassing kan uw app zich aanmelden met Azure AD B2C. Tijdens de registratie geeft u de omleidings-URI op. De omleidings-URI is het eindpunt waarnaar gebruikers worden omgeleid door Azure AD B2C nadat ze de verificatie hebben voltooid. Het app-registratieproces genereert een toepassings-id, ook wel client-id genoemd, waarmee uw toepassing op unieke wijze wordt aangeduid. U genereert ook een clientgeheim voor uw app. Uw app gebruikt het clientgeheim om een autorisatiecode uit te wisselen voor een toegangstoken.

  • Met de registratie van een web-API kan de app een beveiligde web-API aanroepen. De registratie omvat de web-API-bereiken. De bereiken bieden een manier om machtigingen tot beveiligde resources te beheren, zoals uw web-API. U verleent de webtoepassing machtigingen voor de web-API-bereiken. Wanneer een toegangstoken wordt aangevraagd, geeft uw app de gewenste machtigingen op in de parameter Bereik van de aanvraag.

De toepassingsregistraties en de toepassingsarchitectuur worden beschreven in het volgende diagram:

Diagram of the application registrations and the application architecture for an app with web A P I.

Vereisten

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: uw web-app en API registreren

In deze stap maakt u de web- en web-API-toepassingsregistraties en geeft u de bereiken van uw web-API op.

Stap 2.1 Registreer de web-API-toepassing

Voer de volgende stappen uit om de web-API-app (app-id: 2) te registreren:

  1. Meld u aan bij de Azure-portal.

  2. Zorg ervoor dat u de map gebruikt die uw Azure AD B2C-tenant bevat. Selecteer op de portalwerkbalk het pictogram Mappen + abonnementen.

  3. Ga op de pagina Portalinstellingen | Directory's en abonnementen naar uw Azure AD B2C-directory in de lijst Mapnaam en selecteer vervolgens Omzetten.

  4. Zoek en selecteer Azure AD B2C in de Azure-portal.

  5. Selecteer App-registraties en selecteer vervolgens Nieuwe registratie.

  6. Voer bij Naam een naam in voor de toepassing (bijvoorbeeld my-api1). Laat de standaardwaarden voor omleidings-URI en ondersteunde accounttypen staan.

  7. Selecteer Registreren.

  8. Nadat de app-registratie is voltooid, selecteert u Overzicht.

  9. Noteer voor later gebruik de waarde van de toepassings-id (client) wanneer u de webtoepassing configureert.

    Screenshot that demonstrates how to get a web A P I application I D.

Stap 2.2. Bereiken configureren

  1. Selecteer de my-api1-toepassing die u hebt gemaakt (app-id: 2) om de overzichtspagina te openen.

  2. Selecteer onder BeherenEen API beschikbaar maken.

  3. Selecteer naast URI voor de toepassings-id de link Instellen. Vervang de standaardwaarde (GUID) door een unieke naam (bijvoorbeeld tasks-api) en selecteer Opslaan.

    Wanneer uw webtoepassing een toegangstoken voor de web-API aanvraagt, moet deze URI als voorvoegsel worden toegevoegd voor elk bereik dat u voor de API definieert.

  4. Onder Bereiken die door deze API worden bepaald selecteert u Een bereik toevoegen.

  5. Een bereik maken dat de leestoegang tot de API definieert:

    1. Voer voor Bereiknaamtasks.read in.
    2. Voer voor Weergavenaam beheerderstoestemmingLeestoegang tot Tasks-API in.
    3. Voer voor Beschrijving beheerderstoestemmingStaat leestoegang toegang tot de Tasks-API toe in.

  6. Selecteer Bereik toevoegen.

  7. Selecteer Bereik toevoegen en voeg vervolgens een bereik toe dat de schrijftoegang tot de API definieert:

    1. Voer voor Bereiknaamtasks.write in.
    2. Voer voor Weergavenaam beheerderstoestemmingSchrijftoegang tot Tasks-API in.
    3. Voer voor Beschrijving beheerderstoestemmingStaat schrijftoegang tot de Tasks-API toe in.

  8. Selecteer Bereik toevoegen.

Stap 2.3: De web-app registreren

Ga als volgt te werk om de beveiligd-WACHTWOORDVERIFICATIE-registratie te maken:

  1. Meld u aan bij de Azure-portal.
  2. 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.
  3. Zoek Azure AD B2C en selecteer deze.
  4. Selecteer App-registraties en selecteer vervolgens Nieuwe registratie.
  5. Voer een naam in voor de toepassing (bijvoorbeeld app-id: 1).
  6. Selecteer onder Ondersteunde accounttypen de optie Accounts in een identiteitsprovider of organisatiemap (voor het verifiëren van gebruikers met gebruikersstromen).
  7. Selecteer onder Omleidings-URI web en voer http://localhost:3000/redirect het tekstvak URL in
  8. Schakel onder Machtigingen het selectievakje Beheerdersgoedkeuring verlenen aan machtigingen van OpenID en offline_access in.
  9. Selecteer Registreren.

Stap 2.4: Een clientgeheim maken

  1. Selecteer op de pagina Azure AD B2C - App-registraties de toepassing die u hebt gemaakt, bijvoorbeeld app-id: 1.
  2. Selecteer in het menu links onder Beheren de optie Certificaten en geheimen.
  3. Selecteer Nieuw clientgeheim.
  4. Voer een beschrijving voor het clientgeheim in het vak Beschrijving in. Bijvoorbeeld clientsecret1.
  5. Selecteer onder Verloopt een duur waarvoor het geheim geldig is en selecteer vervolgens Toevoegen.
  6. Registreer de waarde van het geheim voor gebruik in de code van uw clienttoepassing. Deze geheimwaarde wordt nooit meer weergegeven nadat u deze pagina hebt verlaten. U gebruikt deze waarde als het toepassingsgeheim in de code van uw toepassing.

Stap 2.5: API-machtigingen verlenen aan de web-app

Voer de volgende stappen uit om uw app (app-id: 1) machtigingen te verlenen:

  1. Selecteer App-registraties en selecteer vervolgens de app die u hebt gemaakt (App-id: 1).

  2. Selecteer onder Beheren de optie API-machtigingen.

  3. Selecteer onder Geconfigureerde machtigingen de optie Een machtiging toevoegen.

  4. Selecteer het tabblad Mijn API's.

  5. Selecteer de API (App-id: 2) waarvoor aan de webclienttoepassing toegang moet worden verleend. Voer bijvoorbeeld my-api1 in.

  6. Vouw onder Machtigingtaken uit en selecteer vervolgens de bereiken die u eerder hebt gedefinieerd (bijvoorbeeld tasks.read en tasks.write).

  7. Selecteer Machtigingen toevoegen.

  8. Selecteer Beheerderstoestemming verlenen voor <uw tenantnaam>.

  9. Selecteer Ja.

  10. Selecteer Vernieuwen en controleer vervolgens of voor beide bereiken Verleend voor... wordt weergegeven onder Status.

  11. Selecteer uw bereik in de lijst geconfigureerde machtigingen en kopieer vervolgens de volledige naam van het bereik.

    Screenshot of the configured permissions pane, showing that read access permissions are granted.

Stap 3: De voorbeeldcode van de web-app ophalen

In dit voorbeeld ziet u hoe een webtoepassing Azure AD B2C kan gebruiken voor het registreren en aanmelden van gebruikers. Vervolgens verkrijgt de app een toegangstoken en wordt een beveiligde web-API aangeroepen.

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

  • Download een zip-bestand. U extraheert het zip-bestand om de voorbeeldweb-app op te halen.

  • Kloon het voorbeeld uit GitHub door de volgende opdracht uit te voeren:

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

Stap 3.1: App-afhankelijkheden installeren

  1. 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/call-protected-api

  2. Voer de volgende opdrachten uit om de vereiste app-afhankelijkheden te installeren:

        npm install && npm update

Stap 3.2: De voorbeeldweb-app configureren

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

Sleutel Waarde
APP_CLIENT_ID De toepassings-id (client) voor de web-app die u hebt geregistreerd in stap 2.3.
APP_CLIENT_SECRET De clientgeheimwaarde voor de web-app die u in stap 2.4 hebt gemaakt
SIGN_UP_SIGN_IN_POLICY_AUTHORITY De instantie voor aanmelden en registreren van de gebruikersstroom voor de gebruikersstroom die u in stap 1 hebt gemaakt, 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.
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. Deze URL moet openbaar toegankelijk zijn. Laat de waarde staan zoals het is.
LOGOUT_ENDPOINT Het eindpunt voor afmelden bij Azure AD B2C, 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.

Na de update moet het uiteindelijke configuratiebestand er ongeveer uitzien als in het volgende voorbeeld:

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>
#tenant name
TENANT_NAME=<your-tenant-name>
#B2C sign up and sign in user flow/policy name and 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>
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redorect url
APP_REDIRECT_URI=http://localhost:3000/redirect
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

Stap 4: De web-API-voorbeeldcode ophalen

Nu de web-API is geregistreerd en u de bereiken hebt gedefinieerd, moet u de web-API-code configureren om deze met uw Azure AD B2C-tenant te kunnen laten werken.

Ga op een van de volgende manieren te werk om de voorbeeldcode van de web-API op te halen:

Stap 4.1: De web-API bijwerken

  1. Open het config.json bestand in de code-editor.

  2. Wijzig de variabelewaarden met de gebruikersstroom en toepassingsregistratie die u eerder hebt gemaakt:

    • Gebruik tenantNamehiervoor de naam van uw tenantnaam , zoals fabrikamb2c.

    • Gebruik clientIDde toepassings-id (client) voor de web-API die u in stap 2.1 hebt gemaakt.

    • Gebruik policyNamede naam van de aanmeldings- en registratiegebruikersstroom die u in stap 1 hebt gemaakt, zoals B2C_1_susi.

    Na de update moet uw code er ongeveer uitzien als in het volgende voorbeeld:

    config.json:

    {
    "credentials": {
        "tenantName": "fabrikamb2c",
        "clientID": "93733604-cc77-4a3c-a604-87084dd55348"
    },
    "policies": {
        "policyName": "B2C_1_susi"
    },
    "resource": {
        "scope": ["tasks.read"]
    },
    "metadata": {
        "authority": "login.microsoftonline.com",
        "discovery": ".well-known/openid-configuration",
        "version": "v2.0"
    },
    "settings": {
        "isB2C": true,
        "validateIssuer": true,
        "passReqToCallback": false,
        "loggingLevel": "info"
    }
}

Stap 4.2: App-afhankelijkheden installeren

  1. Open een consolevenster en ga naar de map met het Node.js-web-API-voorbeeld. Bijvoorbeeld:

    cd active-directory-b2c-javascript-nodejs-webapi

  2. Voer de volgende opdrachten uit:

    npm install && npm update

Stap 5: de web-app en API uitvoeren

U bent nu klaar om de bereiktoegang van de webtoepassing tot de web-API te testen. Voer zowel de Node.js-web-API als de voorbeeldwebtoepassing uit op uw lokale computer.

  1. Navigeer in de terminal naar de voorbeeldweb-API en voer de Node.js-web-API-server uit. Bijvoorbeeld: '

    cd active-directory-b2c-javascript-nodejs-webapi
node index.js

    Het consolevenster geeft het poortnummer van waar de app wordt gehost.

    Listening on port 5000...

  2. Navigeer in een ander terminalexemplaren naar de voorbeeldweb-app en voer de Node.js-web-app-server uit. Bijvoorbeeld:

        cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api
    node index.js

    Het consolevenster geeft het poortnummer van waar de app wordt gehost.

    Msal Node Auth Code Sample app listening on port !3000

  3. Ga in uw browser naar http://localhost:3000. U ziet de pagina met twee knoppen: Meld u aan om de BEVEILIGDE API aan te roepen en of roep de ANONIEME API aan.

    Web page for sign in to call protected A P I.

  4. Als u de anonieme API wilt aanroepen, selecteert u de of roept u de ANONIEME API aan. De API reageert met JSON-object met date sleutel zoals:

        {"date":"2022-01-27T14:21:22.681Z"}

    De anonieme API is een niet-beveiligd eindpunt in de web-API. U hebt geen toegangstoken nodig om er toegang toe te krijgen.

  5. Als u het beveiligde API-eindpunt wilt aanroepen, selecteert u de knop Aanmelden om de BEVEILIGDE API aan te roepen. U wordt gevraagd om u aan te melden.

  6. 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 aangemeld of zich hebt geregistreerd, ziet u de volgende pagina met de knop BEVEILIGDE API aanroepen.

    Web page for signed to call protected A P I.

  7. Als u de beveiligde API wilt aanroepen, selecteert u de knop Beveiligde API aanroepen. De API reageert met JSON-object met een name sleutel waarvan de waarde de achternaam van uw account is, zoals:

        {"name": "User 1"}

Volgende stappen

Meer informatie over het inschakelen van verificatie in uw eigen web-API met behulp van Azure AD B2C