Logga in användare och anropa ett webb-API i exempel Node.js webbapp

Artikel
06/27/2024

Den här guiden använder ett kodexempel för att visa hur du lägger till autentisering och auktorisering i ett Node.js webbprogram. Exempelprogrammet loggar in användare till en Node.js webbapp, som sedan anropar ett .NET-API. Du aktiverar autentisering och auktorisering med hjälp av din externa klientinformation. Exempelwebbprogrammet använder Microsoft Authentication Library (MSAL) för Node för att hantera autentisering.

I den här artikeln utför du följande uppgifter:

Registrera och konfigurera ett webb-API i administrationscentret för Microsoft Entra.
Uppdatera ett node-exempelwebbprogram och ASP.NET webb-API för att använda din externa klientinformation.
Kör och testa exempelwebbprogrammet och API:et.

Förutsättningar

Slutför stegen i Logga in användare och anropa ett API i exempelartikeln Node.js webbprogram . Den här artikeln visar hur du loggar in användare med hjälp av ett exempel Node.js webbapp.
Visual Studio Code eller någon annan kodredigerare.
Node.js.
.NET 7.0 eller senare.
En extern klientorganisation. Om du inte redan har en kan du registrera dig för en kostnadsfri utvärderingsversion.

Registrera ett webb-API

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

Registrera ett webb-API-program

Logga in på administrationscentret för Microsoft Entra som minst programutvecklare.
Om du har åtkomst till flera klienter använder du ikonen Inställningar på den översta menyn för att växla till din externa klient från menyn Kataloger + prenumerationer.
Bläddra till Appregistreringar för identitetsprogram>>.
Välj + Ny registrering.
På sidan Registrera ett program som visas anger du programmets registreringsinformation:
1. I avsnittet Namn anger du ett beskrivande programnamn som ska visas för appens användare, till exempel ciam-ToDoList-api.
2. Under Kontotyper som stöds väljer du Endast Konton i den här organisationskatalogen.
Välj Registrera för att skapa programmet.
Programmets översiktsfönster visas när registreringen är klar. Registrera katalog-ID:t (klient)-ID:t och program-ID:t (klient) som ska användas i programmets källkod.

Konfigurera API-omfång

Det här API:et måste exponera behörigheter som en klient behöver hämta för att anropa API:et:

Ett API måste publicera minst ett omfång, även kallat Delegerad behörighet, för att klientapparna ska få en åtkomsttoken för en användare. Följ dessa steg för att publicera ett omfång:

På sidan Appregistreringar väljer du det API-program som du skapade (ciam-ToDoList-api) för att öppna sidan Översikt .
Under Hantera väljer du Exponera ett API.
Längst upp på sidan bredvid Program-ID-URI väljer du länken Lägg till för att generera en URI som är unik för den här appen.
Acceptera den föreslagna program-ID-URI:n, till exempel api://{clientId}, och välj Spara. När ditt webbprogram begär en åtkomsttoken för webb-API:et läggs URI:n till 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.

Ange följande värden som definierar läsbehörighet till API:et och välj sedan Lägg till omfång för att spara ändringarna:

Property	Värde
Omfattningsnamn	ToDoList.Read
Vem kan ge medgivande	Endast administratörer
Visningsnamn för administratörsmedgivande	Läsa användarnas ToDo-lista med hjälp av "TodoListApi"
Beskrivning av administratörsmedgivande	Tillåt att appen läser användarens ToDo-lista med hjälp av "TodoListApi".
Tillstånd	Aktiverad

Välj Lägg till ett omfång igen och ange följande värden som definierar ett läs- och skrivåtkomstomfång till API:et. Välj Lägg till omfång för att spara ändringarna:

Property	Värde
Omfattningsnamn	ToDoList.ReadWrite
Vem kan ge medgivande	Endast administratörer
Visningsnamn för administratörsmedgivande	Läsa och skriva användares ToDo-lista med hjälp av "ToDoListApi"
Beskrivning av administratörsmedgivande	Tillåt att appen läser och skriver användarens ToDo-lista med hjälp av ToDoListApi
Tillstånd	Aktiverad

Under Hantera väljer du Manifest för att öppna API-manifestredigeraren.
Ange accessTokenAcceptedVersion egenskapen till 2.
Välj Spara.

Läs mer om principen om lägsta behörighet när du publicerar behörigheter för ett webb-API.

Konfigurera approller

Ett API måste publicera minst en approll för program, även kallat Programbehörighet, för att klientapparna ska få en åtkomsttoken som sig själva. Programbehörigheter är den typ av behörigheter som API:er bör publicera när de vill att klientprogram ska kunna autentiseras som sig själva och inte behöver logga in användare. Följ dessa steg för att publicera en programbehörighet:

På sidan Appregistreringar väljer du det program som du skapade (till exempel ciam-ToDoList-api) för att öppna sidan Översikt .
Under Hantera väljer du Approller.

Välj Skapa approll och ange sedan följande värden och välj sedan Använd för att spara ändringarna:

Property	Värde
Visningsnamn	ToDoList.Read.All
Tillåtna medlemstyper	Appar
Värde	ToDoList.Read.All
beskrivning	Tillåt att appen läser alla användares ToDo-lista med hjälp av TodoListApi

Välj Skapa approll igen och ange sedan följande värden för den andra approllen och välj sedan Använd för att spara ändringarna:

Property	Värde
Visningsnamn	ToDoList.ReadWrite.All
Tillåtna medlemstyper	Appar
Värde	ToDoList.ReadWrite.All
beskrivning	Tillåt att appen läser och skriver alla användares ToDo-lista med hjälp av ToDoListApi

Konfigurera valfria anspråk

Du kan idtypa valfritt anspråk för att hjälpa webb-API:et att avgöra om en token är en apptoken eller en app + användartoken. Även om du kan använda en kombination av scp - och rollanspråk för samma ändamål är det enklaste sättet att skilja en apptoken och en app + användartoken åt med hjälp av idtyp-anspråket . Till exempel är värdet för det här anspråket app när token är en endast apptoken.

Följ stegen i artikeln Konfigurera valfria anspråk för att lägga till idtyp-anspråk i åtkomsttoken:

För tokentypen väljer du Åtkomst.
I listan med valfria anspråk väljer du idtyp.

Bevilja API-behörigheter till webbappen

Följ dessa steg för att ge klientappen (ciam-client-app) API-behörigheter:

På sidan Appregistreringar väljer du det program som du skapade (till exempel ciam-client-app) för att öppna sidan Översikt .
Under Hantera väljer du API-behörigheter.
Under Konfigurerade behörigheter väljer du Lägg till en behörighet.
Välj fliken API:er som min organisation använder .
I listan över API:er väljer du API:et, till exempel ciam-ToDoList-api.
Välj alternativet Delegerade behörigheter .
I behörighetslistan väljer du ToDoList.Read, ToDoList.ReadWrite (använd sökrutan om det behövs).
Välj knappen Lägg till behörigheter. Nu har du tilldelat behörigheterna korrekt. Men eftersom klientorganisationen är en kunds klientorganisation kan konsumentanvändarena själva inte samtycka till dessa behörigheter. För att lösa det här problemet måste du som administratör samtycka till dessa behörigheter för alla användare i klientorganisationen:
1. Välj Bevilja administratörsmedgivande för <ditt klientnamn> och välj sedan Ja.
2. Välj Uppdatera och kontrollera sedan att Beviljat för <klientorganisationens namn> visas under Status för båda omfången.
I listan Konfigurerade behörigheter väljer du behörigheterna ToDoList.Read och ToDoList.ReadWrite, en i taget, och kopierar sedan behörighetens fullständiga URI för senare användning. Den fullständiga behörighets-URI:n ser ut ungefär api://{clientId}/{ToDoList.Read} som eller api://{clientId}/{ToDoList.ReadWrite}.

Klona eller ladda ned exempelwebbprogram och webb-API

Om du vill hämta exempelprogrammet kan du antingen klona det från GitHub eller ladda ned det som en .zip fil.

Om du vill klona exemplet öppnar du en kommandotolk och navigerar till den platsen där du vill skapa projektet och anger följande kommando:
```
git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
```
Ladda ned filen .zip. Extrahera den till en filsökväg där namnets längd är färre än 260 tecken.

Installera projektberoenden

Öppna ett konsolfönster och ändra till katalogen som innehåller Node.js/Express-exempelappen:
```
cd 2-Authorization\4-call-api-express\App
```
Kör följande kommandon för att installera beroenden för webbappar:
```
npm install && npm update
```

Konfigurera exempelwebbappen och API:et

Så här använder du din appregistrering i klientwebbappexemplet:

Öppna App\authConfig.js filen i kodredigeraren.
Hitta platshållaren:
- Enter_the_Application_Id_Here och ersätt det med program-ID:t (klient) för den app som du registrerade tidigare.
- Enter_the_Tenant_Subdomain_Here och ersätt den med underdomänen Katalog (klientorganisation). Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har ditt klientnamn kan du läsa klientinformationen.
- Enter_the_Client_Secret_Here och ersätt det med det apphemlighetsvärde som du kopierade tidigare.
- Enter_the_Web_Api_Application_Id_Here och ersätt det med program-ID:t (klient) för webb-API:et som du kopierade tidigare.

Så här använder du din appregistrering i webb-API-exemplet:

Öppna API\ToDoListAPI\appsettings.json filen i kodredigeraren.
Hitta platshållaren:
- Enter_the_Application_Id_Here och ersätt det med program-ID:t (klient) för webb-API:et som du kopierade.
- Enter_the_Tenant_Id_Here och ersätt det med katalog-ID:t (klientorganisation) som du kopierade tidigare.
- Enter_the_Tenant_Subdomain_Here och ersätt den med underdomänen Katalog (klientorganisation). Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har ditt klientnamn kan du läsa klientinformationen.

Köra och testa exempelwebbapp och API

Öppna ett konsolfönster och kör sedan webb-API:et med hjälp av följande kommandon:
```
cd 2-Authorization\4-call-api-express\API\ToDoListAPI
dotnet run
```
Kör webbappsklienten med hjälp av följande kommandon:
```
cd 2-Authorization\4-call-api-express\App
npm start
```
Öppna webbläsaren och gå sedan till http://localhost:3000.
Välj knappen Logga in. Du uppmanas att logga in.
På inloggningssidan skriver du din e-postadress, väljer Nästa, skriver ditt lösenord och väljer sedan Logga in. Om du inte har något konto väljer du Inget konto? Skapa en länk som startar registreringsflödet.
Om du väljer registreringsalternativet slutför du hela registreringsflödet när du har fyllt i din e-post, engångslösenord, nya lösenord och mer kontoinformation. Du ser en sida som liknar följande skärmbild. Du ser en liknande sida om du väljer inloggningsalternativet.

Anropa API

Om du vill anropa API:et väljer du länken Visa din todolist . Du ser en sida som liknar följande skärmbild.
Ändra att göra-listan genom att skapa och ta bort objekt.

Hur det fungerar

Du utlöser ett API-anrop varje gång du visar, lägger till eller tar bort en uppgift. Varje gång du utlöser ett API-anrop hämtar klientwebbappen en åtkomsttoken med nödvändiga behörigheter (omfång) för att anropa en API-slutpunkt. Om du till exempel vill läsa en uppgift måste klientwebbappen hämta en åtkomsttoken med ToDoList.Read behörighet/omfång.

Webb-API-slutpunkten måste kontrollera om behörigheterna eller omfången i åtkomsttoken, som tillhandahålls av klientappen, är giltiga. Om åtkomsttoken är giltig svarar slutpunkten på HTTP-begäran, annars svarar den med ett 401 Unauthorized HTTP-fel.

Dela via

Förutsättningar