Dela via

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

Gäller för: Grön cirkel med en vit bockmarkeringssymbol som anger att följande innehåll gäller för externa klienter. 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

Konfigurera API-omfång och roller

Genom att registrera webb-API:et måste du konfigurera API-omfång för att definiera de behörigheter som ett klientprogram kan begära för att få åtkomst till webb-API:et. Dessutom måste du konfigurera approller för att ange vilka roller som är tillgängliga för användare eller program och ge webbappen nödvändiga API-behörigheter så att den kan anropa webb-API:et.

Konfigurera API-omfång

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
    Visningsnamn för administratörens medgivande 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

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 apputvecklarroll för applikationer, även kallat Programbehörighet, för att klientapparna ska få en åtkomsttoken i sin egen rätt. 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.Read.All
    Beskrivning Tillåt att appen läser alla användares ToDo-lista med hjälp av "TodoListApi"
    Vill du aktivera den här rollen för appen? Håll den markerad

  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"
    Vill du aktivera den här rollen för appen? Håll den markerad

Konfigurera valfria anspråk

Du kan lägga till det valfria anspråket idtyp för att hjälpa webb-API:et att avgöra huruvida en token är en app token eller en app + användare token. Ä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 en token är en endast app-token.

Använd stegen i artikeln Konfigurera valfria anspråk för att lägga till anspråket idtyp till åtkomsttoken:

  • 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 hyresgästen är en kunds hyresgäst kan konsumentanvändarna 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 Godkänt 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 mindre än 260 tecken.

Installera projektets beroenden

  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 klientappen som du registrerade tidigare. Klientappen är en som du har registrerat i förhandskraven.
    • Enter_the_Tenant_Subdomain_Here och ersätt det med underdomänen Directory (tenant). 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.
    • 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 som en del av förhandskraven.

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. Webb-API-appen är en som du registrerade tidigare som del av förkraven.
    • 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 det med underdomänen Directory (tenant). 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 install
npm start

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

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

    Skärmbild av inloggning i en nodwebbapp.

  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.

    Skärmbild av inloggning i en nodwebbapp och anropa ett API.

API-anrop

  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.

    Skärmbild av manipulerings-API för att-göra-listan.

  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