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

Gäller för: arbetskraftsanvändare externa klienter (läs mer)

I den här snabbstarten får du lära dig hur du loggar in användare och anropar ett webb-API från ett Node.js webbprogram i din externa klientorganisation. Exempelprogrammet anropar ett .NET-API. Exempelwebbprogrammet använder Microsoft Authentication Library (MSAL) för Node för att hantera autentisering.

Förutsättningar

• Slutför stegen i artikeln Snabbstart: Logga in användare i ett exempel på webbapp. 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 hyresgäst. Om du vill skapa en väljer du mellan följande metoder:
  • (Rekommenderas) Använd tillägget Microsoft Entra External ID för att konfigurera en extern klientorganisation direkt i Visual Studio Code.
  • Skapa en ny extern hyresgäst i administrationscenter för Microsoft Entra.

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

1. Logga in på administrationscentret för Microsoft Entra som minst en Programutvecklare.

2. Om du har åtkomst till flera klienter använder du ikonen Inställningar på övre menyraden för att byta till din externa klient från menyn Kataloger + prenumerationer.

3. Bläddra till Identity>Applications>App registrations.

4. Välj + Ny registrering.

5. 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älj Endast konton i den här organisationskatalogen.

6. Välj Registrera för att skapa programmet.

7. Programmets översiktsfönster visas när registreringen är klar. Registrera Directory-ID:t (klientorganisation) och program-ID (klient)-ID:t 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 framgångsrikt ska kunna få en åtkomsttoken för en användare. Följ dessa steg för att publicera omfattningen:

1. På sidan Appregistreringar väljer du den API-applikation som du skapade (ciam-ToDoList-api) för att öppna dess Översikt-sida.

2. Gå till Hanteraoch välj Exponera ett API.

3. Längst upp på sidan väljer du länken Lägg till bredvid program-ID-URIför att generera en URI som är unik för den här appen.

4. 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.

5. Under Omfång som definierats av det här API:etväljer du Lägg till ett omfång.

6. 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:

   Egenskap	Värde
   Omfångsnamn	ToDoList.Read
   Vem kan samtycka	endast administratörer
   Visningsnamn för administratörens medgivande	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".
   Stat	aktiverat

7. 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:

   Egenskap	Värde
   Omfångsnamn	ToDoList.ReadWrite
   Vem kan samtycka	endast administratörer
   Administratörsmedgivandets visningsnamn	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"
   Stat	aktiverat

8. Under Hanteraväljer du Manifest för att öppna API-manifestredigeraren.

9. Ange egenskapen accessTokenAcceptedVersion till 2.

10. 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 app roller

Ett API måste publicera minst en applikationsroll för applikationer, även kallad applikationsbehö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ör att publicera en appbehörighet, följ dessa steg:

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

2. Under Hanteraväljer du App-roller.

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

   Egenskap	Värde
   Visningsnamn	ToDoList.Read.All
   Tillåtna medlemstyper	Applikationer
   Värde	ToDoList.Läsa.Allt
   Beskrivning	Tillåt att appen läser alla användares ToDo-lista med hjälp av "TodoListApi"

4. 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:

   Egenskap	Värde
   Visningsnamn	ToDoList.ReadWrite.All
   Tillåtna medlemstyper	Applikationer
   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 lägga till idtyp 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 -roller ansprå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åk. Värdet för det här anspråket är till exempel app när token är en apptoken.

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

• Välj för tokentypenAccess.
• I listan med valfria anspråk väljer du idtyp.

Bevilja API-behörigheter till webbappen

Om du vill ge din klientapp (API-behörigheter för ciam-client-app) följer du dessa steg:

1. På sidan Appregistreringar väljer du det program som du skapade (till exempel ciam-client-app) för att öppna sidan Översikt.

2. Under Hanteraväljer du API-behörigheter.

3. Under Konfigurerade behörigheterväljer du Lägg till en behörighet.

4. Välj API:er som min organisation använder fliken.

5. I listan över API:er väljer du API:et, till exempel ciam-ToDoList-api.

6. Välj alternativet Delegerade behörigheter.

7. I behörighetslistan väljer du ToDoList.Read, ToDoList.ReadWrite (använd sökrutan om det behövs).

8. 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 Uppdateraoch kontrollera sedan att Beviljas för <ditt klientnamn> visas under Status för båda omfången.

9. 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 som api://{clientId}/{ToDoList.Read} 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

1. Öppna ett konsolfönster och ändra till katalogen som innehåller Node.js/Express-exempelappen:

   cd 2-Authorization\4-call-api-express\App
   

2. 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:

1. Öppna App\authConfig.js fil i kodredigeraren.

2. 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 lär du dig att [läsa klientinformationen(.. /external-id/customers/how-to-create-external-tenant-portal.md#get-the-external-tenant-details).
   • 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(klient)-ID:t för webb-API:et som du kopierade tidigare.

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

1. Öppna API\ToDoListAPI\appsettings.json fil i kodredigeraren.

2. 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 (hyresgäst) som du kopierade tidigare.
   • Enter_the_Tenant_Subdomain_Here och ersätt den med katalogens (tenantens) underdomän. Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har ditt klientnamn, lär dig hur du kan läsa dina klientuppgifter.

Köra och testa exempelwebbapp och API

1. Ö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
   

2. Kör webbappsklienten med hjälp av följande kommandon:

   cd 2-Authorization\4-call-api-express\App
   npm start
   

3. Öppna webbläsaren och gå sedan till http://localhost:3000.

4. Välj knappen Logga in. Du uppmanas att logga in.

   

5. På inloggningssidan skriver du din e-postadress, väljer Nästa, skriver Lösenordoch 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.

6. 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.

   

Anrops-API

1. Om du vill anropa API:et väljer du länken Visa din todolist-. Du ser en sida som liknar följande skärmbild.

   

2. Ändra listan över to-do genom att skapa och ta bort objekt.

Så här fungerar det

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.

Relaterat innehåll

• Handledning: Skydda ett ASP.NET Core-webb-API som är registrerat i en extern domän.