Konfigurera autentisering i ett node.js-exempelwebb-API med hjälp av Azure Active Directory B2C

Artikel
11/08/2023

I den här artikeln får du lära dig hur du konfigurerar ett node.js-exempelwebbprogram för att anropa ett node.js-exempelwebb-API. Webb-API:et måste skyddas av själva Azure AD B2C. I den här konfigurationen anropar en webbapp, till exempel app-ID: 1 ett webb-API, till exempel app-ID: 2. Användare autentiserar till webbappen för att hämta en åtkomsttoken, som sedan används för att anropa ett skyddat webb-API.

Översikt

Tokenbaserad autentisering säkerställer att begäranden till ett webb-API åtföljs av en giltig åtkomsttoken.

Webbappen slutför följande händelser:

Den autentiserar användare med Azure AD B2C.
Den hämtar en åtkomsttoken med nödvändiga behörigheter (omfång) för webb-API-slutpunkten.
Den skickar åtkomsttoken som en ägartoken i autentiseringshuvudet för HTTP-begäran. Det använder formatet:

Authorization: Bearer <token>

Webb-API:et slutför följande händelser:

Den läser ägartoken från auktoriseringshuvudet i HTTP-begäran.
Den validerar token.
Den verifierar behörigheterna (omfången) i token.
Den svarar på HTTP-begäran. Om token inte är giltig svarar webb-API-slutpunkten med ett 401 Unauthorized HTTP-fel.

Översikt över appregistrering

Om du vill att din app ska kunna logga in med Azure AD B2C och anropa ett webb-API måste du registrera två program i Azure AD B2C-katalogen.

Med registrering av webbprogram kan din app logga in med Azure AD B2C. Under registreringen anger du omdirigerings-URI:n. Omdirigerings-URI:n är slutpunkten som användarna omdirigeras till av Azure AD B2C när de har slutfört autentiseringen. Appregistreringsprocessen genererar ett program-ID, även kallat klient-ID, som unikt identifierar din app. Du genererar också en klienthemlighet för din app. Din app använder klienthemligheten för att byta ut en auktoriseringskod mot en åtkomsttoken.
Med registreringen av webb-API :et kan din app anropa ett säkert webb-API. Registreringen innehåller webb-API-omfång. Omfången ger ett sätt att hantera behörigheter till skyddade resurser, till exempel ditt webb-API. Du beviljar webbprogrambehörigheter till webb-API-omfången. När en åtkomsttoken begärs anger appen önskade behörigheter i omfångsparametern för begäran.

Programregistreringarna och programarkitekturen beskrivs i följande diagram:

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

Förutsättningar

Node.js.
Visual Studio Code eller någon annan kodredigerare.

Steg 1: Konfigurera användarflödet

När användare försöker logga in på din app startar appen en autentiseringsbegäran till auktoriseringsslutpunkten via ett användarflöde. Användarflödet definierar och styr användarupplevelsen. När användarna har slutfört användarflödet genererar Azure AD B2C en token och omdirigerar sedan användarna tillbaka till ditt program.

Om du inte redan har gjort det skapar du ett användarflöde eller en anpassad princip. Upprepa stegen för att skapa tre separata användarflöden på följande sätt:

Ett kombinerat användarflöde för inloggning och registrering , till exempel susi. Det här användarflödet stöder även funktionen För att glömma ditt lösenord .
Ett användarflöde för profilredigering , till exempel edit_profile.
Ett användarflöde för lösenordsåterställning , till exempel reset_password.

Azure AD B2C förbereder användarflödesnamnet B2C_1_ . Till exempel kommer susi att bli B2C_1_susi.

Steg 2: Registrera webbappen och API:et

I det här steget skapar du webb- och webb-API-programregistreringarna och anger omfången för webb-API:et.

Steg 2.1: Registrera webb-API-programmet

Så här skapar du appregistreringen för webb-API:et (app-ID: 2):

Logga in på Azure-portalen.
Kontrollera att du använder katalogen som innehåller din Azure AD B2C-klientorganisation. Välj ikonen Kataloger + prenumerationer i portalens verktygsfält.
I portalinställningarna | Sidan Kataloger + prenumerationer, leta upp din Azure AD B2C-katalog i listan Katalognamn och välj sedan Växla.
I Azure-portalen söker du efter och väljer Azure AD B2C.
Välj Appregistreringar och välj sedan Ny registrering.
Som Namn anger du ett namn för programmet (till exempel my-api1). Lämna standardvärdena för omdirigerings-URI och kontotyper som stöds.
Välj Registrera.
När appregistreringen är klar väljer du Översikt.
Registrera program-ID-värdet (klient) för senare användning när du konfigurerar webbprogrammet.

Steg 2.2: Konfigurera omfång

Välj det my-api1-program som du skapade (app-ID: 2) för att öppna sidan Översikt .
Under Hantera väljer du Exponera ett API.
Bredvid Program-ID-URI väljer du länken Ange. Ersätt standardvärdet (GUID) med ett unikt namn (till exempel tasks-api) och välj sedan Spara.

När ditt webbprogram begär en åtkomsttoken för webb-API:et bör den lägga till den här URI:n som prefix för varje omfång som du definierar för API:et.
Under Omfång som definieras av det här API:et väljer du Lägg till ett omfång.
Så här skapar du ett omfång som definierar läsåtkomst till API:et:
1. Ange tasks.read som Omfångsnamn.
2. För Visningsnamn för administratörsmedgivande anger du Läs åtkomst till uppgifters API.
3. För Beskrivning av administratörsmedgivande anger du Tillåt läsåtkomst till aktivitets-API:et.
Välj Lägg till definitionsområde.
Välj Lägg till ett omfång och lägg sedan till ett omfång som definierar skrivåtkomst till API:et:
1. Ange tasks.write som Omfångsnamn.
2. För Visningsnamn för administratörsmedgivande anger du Skrivåtkomst till aktivitets-API.
3. För Beskrivning av administratörsmedgivande anger du Tillåt skrivåtkomst till aktivitets-API:et.
Välj Lägg till definitionsområde.

Steg 2.3: Registrera webbappen

Gör följande för att skapa SPA-registreringen:

Logga in på Azure-portalen.
Om du har åtkomst till flera klienter väljer du ikonen Inställningar på den översta menyn för att växla till din Azure AD B2C-klient från menyn Kataloger + prenumerationer.
Sök efter och markera Azure AD B2C.
Välj Appregistreringar och välj sedan Ny registrering.
Ange ett namn för programmet (till exempel app-ID: 1).
Under Kontotyper som stöds, välj Konton i valfri identitetsleverantör eller organisationskatalog (för autentisering av användare med användarflöden).
Under Omdirigerings-URI väljer du Webb och anger http://localhost:3000/redirect sedan i textrutan URL
Under Behörigheter väljer du kryssrutan Bevilja administratörsmedgivande till openid- och offlineåtkomstbehörigheter .
Välj Registrera.

Steg 2.4: Skapa en klienthemlighet

På sidan Azure AD B2C – Appregistreringar väljer du det program som du skapade, till exempel App-ID: 1.
I den vänstra menyn går du till Hantera och väljer Certifikathemligheter&.
Välj Ny klienthemlighet.
Ange en beskrivning av klienthemligheten i rutan Beskrivning . Till exempel clientsecret1.
Under Upphör att gälla väljer du en varaktighet för vilken hemligheten är giltig och väljer sedan Lägg till.
Registrera hemlighetens värde för användning i klientprogramkoden. Det här hemliga värdet visas aldrig igen när du har lämnat den här sidan. Du använder det här värdet som programhemlighet i programmets kod.

Steg 2.5: Bevilja API-behörigheter till webbappen

Följ dessa steg för att ge din app (app-ID: 1) behörighet:

Välj Appregistreringar och välj sedan den app som du skapade (app-ID: 1).
Under Hantera väljer du API-behörigheter.
Under Konfigurerade behörigheter väljer du Lägg till en behörighet.
Välj fliken Mina API:er .
Välj det API (app-ID: 2) som webbprogrammet ska beviljas åtkomst till. Ange till exempel my-api1.
Under Behörighet expanderar du aktiviteter och väljer sedan de omfång som du definierade tidigare (till exempel tasks.read och tasks.write).
Välj Lägg till behörigheter.
Välj Bevilja administratörsmedgivande för< ditt klientnamn>.
Välj Ja.
Välj Uppdatera och kontrollera sedan att Beviljad för ... visas under Status för båda omfången.
I listan Konfigurerade behörigheter väljer du ditt omfång och kopierar sedan det fullständiga omfångsnamnet.

Steg 3: Hämta exempelkoden för webbappen

Det här exemplet visar hur ett webbprogram kan använda Azure AD B2C för registrering och inloggning av användare. Sedan hämtar appen en åtkomsttoken och anropar ett skyddat webb-API.

Om du vill hämta exempelkoden för webbappen kan du göra något av följande:

Ladda ned en zip-fil. Du extraherar zip-filen för att hämta exempelwebbappen.

Klona exemplet från GitHub genom att köra följande kommando:

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

Steg 3.1: Installera appberoenden

Öppna ett konsolfönster och ändra till katalogen som innehåller Node.js-exempelappen. Till exempel:
```
    cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api
```
Kör följande kommandon för att installera appberoenden:
```
    npm install && npm update
```

Steg 3.2: Konfigurera exempelwebbappen

Öppna webbappen i en kodredigerare, till exempel Visual Studio Code. Öppna filen under call-protected-api mappen .env . Den här filen innehåller information om din Azure AD B2C-identitetsprovider. Uppdatera följande appinställningar:

Tangent	Värde
`APP_CLIENT_ID`	Program-ID :t (klient) för webbappen som du registrerade i steg 2.3.
`APP_CLIENT_SECRET`	Klienthemlighetsvärdet för webbappen som du skapade i steg 2.4
`SIGN_UP_SIGN_IN_POLICY_AUTHORITY`	Behörigheten Logga in och registrera användarflöde för användarflödet som du skapade i steg 1 , till exempel `https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>`. Ersätt `<your-tenant-name>` med namnet på din klientorganisation och `<sign-in-sign-up-user-flow-name>` med namnet på ditt inloggnings- och registreringsanvändarflöde, `B2C_1_susi`till exempel . Lär dig hur du hämtar ditt klientnamn.
`AUTHORITY_DOMAIN`	Azure AD B2C-utfärdardomänen, till exempel `https://<your-tenant-name>.b2clogin.com`. Ersätt `<your-tenant-name>` med namnet på klientorganisationen.
`APP_REDIRECT_URI`	Programomdirigerings-URI:n där Azure AD B2C returnerar autentiseringssvar (token). Den matchar den omdirigerings-URI som du angav när du registrerade din app i Azure-portalen. Den här URL:en måste vara offentligt tillgänglig. Lämna värdet som det är.
`LOGOUT_ENDPOINT`	Azure AD B2C-utloggningsslutpunkten, till exempel `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`. Ersätt `<your-tenant-name>` med namnet på din klientorganisation och `<sign-in-sign-up-user-flow-name>` med namnet på ditt inloggnings- och registreringsanvändarflöde, `B2C_1_susi`till exempel .

Efter uppdateringen bör den slutliga konfigurationsfilen se ut ungefär som i följande exempel:

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

Steg 4: Hämta exempelkoden för webb-API:et

Nu när webb-API:et har registrerats och du har definierat dess omfång konfigurerar du webb-API-koden så att den fungerar med din Azure AD B2C-klientorganisation.

Om du vill hämta exempelkoden för webb-API:et gör du något av följande:

Ladda ned ett *.zip-arkiv.

Klona webb-API-exempelprojektet från GitHub genom att köra följande kommando:

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git

Du kan också gå direkt till projektet Azure-Samples/active-directory-b2c-javascript-nodejs-webapi på GitHub.

Steg 4.1: Uppdatera webb-API:et

Öppna filen i kodredigeraren config.json .

Ändra variabelvärdena med användarflödet och programregistreringen som du skapade tidigare:

För tenantNameanvänder du namnet på klientorganisationens namn , till exempel fabrikamb2c.
För clientIDanvänder du program-ID :t (klient) för webb-API:et som du skapade i steg 2.1.
För policyNameanvänder du namnet på användarflödet Sing in och sign up som du skapade i steg 1 , till exempel B2C_1_susi.

Efter uppdateringen bör koden se ut ungefär som i följande exempel:

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"
    }
}

Steg 4.2: Installera appberoenden

Öppna ett konsolfönster och ändra till katalogen som innehåller node.js-webb-API-exemplet. Till exempel:
```
cd active-directory-b2c-javascript-nodejs-webapi
```
Kör följande kommandon:
```
npm install && npm update
```

Steg 5: Kör webbappen och API:et

Nu är du redo att testa webbprogrammets begränsade åtkomst till webb-API:et. Kör både Node.js-webb-API:et och exempelwebbprogrammet på den lokala datorn.

I terminalen går du till exempelwebb-API:et och kör start för Node.js-webb-API-servern. Till exempel: '
```
cd active-directory-b2c-javascript-nodejs-webapi
node index.js
```
Konsolfönstret visar portnumret där programmet finns.
```
Listening on port 5000...
```
I en annan terminalinstans navigerar du till exempelwebbappen och kör starta Nod.js-webbappservern. Till exempel:
```
    cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api
    node index.js
```
Konsolfönstret visar portnumret där programmet finns.
```
Msal Node Auth Code Sample app listening on port !3000
```
Gå till http://localhost:3000 i webbläsaren. Du bör se sidan med två knappar, Logga in för att anropa SKYDDAT API och Eller anropa ANONYMT API.
Om du vill anropa det anonyma API:et väljer du Eller anropar API:et ANONYM. API:et svarar med JSON-objekt med date nyckel, till exempel:
```
    {"date":"2022-01-27T14:21:22.681Z"}
```
Det anonyma API:et är en oskyddad slutpunkt i webb-API:et. Du behöver ingen åtkomsttoken för att komma åt den.
Om du vill anropa den skyddade API-slutpunkten väljer du knappen Logga in för att anropa KNAPPEN SKYDDAT API . Du uppmanas att logga in.
Ange dina inloggningsuppgifter, till exempel e-postadress och lösenord. Om du inte har något konto väljer du Registrera dig nu för att skapa ett konto. När du har loggat in eller registrerat dig bör du se följande sida med knappen Anropa skyddat API .
Om du vill anropa det skyddade API:et väljer du knappen Anropa DET SKYDDADE API :et. API:et svarar med JSON-objekt med en name nyckel vars värde är ditt kontos efternamn, till exempel:
```
    {"name": "User 1"} 
```

Nästa steg

Lär dig hur du aktiverar autentisering i ditt eget webb-API med hjälp av Azure AD B2C