Share via

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

  • Artikel

Den här guiden använder ett exempel Node.js webbapp för att visa hur du lägger till autentisering och auktorisering. 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 ditt Microsoft Entra-ID för kundernas klientorganisationsinformation. 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 Microsoft Entra administrationscenter.

  • Registrera och konfigurera en klientwebbapp i Microsoft Entra administrationscenter.

  • Skapa ett användarflöde för registrering och inloggning i Microsoft Entra administrationscenter och associera sedan en klientwebbapp med den.

  • Uppdatera ett Node-exempelwebbprogram och ASP.NET webb-API för att använda ditt externa ID för kundernas klientinformation.

  • Kör och testa exempelwebbappen och API:et.

Förutsättningar

Registrera ett webbprogram och ett webb-API

I det här steget skapar du webb- och webb-API-programregistreringar och anger omfången för ditt webb-API.

Registrera ett webb-API-program

  1. Logga in på Microsoft Entra administrationscenter som minst en programutvecklare.

  2. Om du har åtkomst till flera klienter använder du filtret Kataloger + prenumerationer på den översta menyn för att växla till din kundklientorganisation.

  3. Bläddra till Identitetsprogram>>Appregistreringar.

  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äljer du 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 katalog-ID :t (klient) 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 kunna hämta en åtkomsttoken för en användare. Följ dessa steg om du vill publicera ett omfång:

  1. På sidan Appregistreringar väljer du det API-program som du skapade (ciam-ToDoList-api) för att öppna dess översiktssida.

  2. Under Hantera väljer du Exponera ett API.

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

  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 definieras av det här API:et väljer du Lägg till ett omfång.

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

    Egenskap Värde
    Namn på sökomfång ToDoList.Read
    Vem kan ge medgivande Endast administratörer
    Visningsnamn för administratörsmedgivande Läsa användarens 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

  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
    Namn på sökomfång ToDoList.ReadWrite
    Vem kan ge medgivande Endast administratörer
    Visningsnamn för administratörsmedgivande Läsa och skriva användarens 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

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

  9. Ange accessTokenAcceptedVersion egenskapen 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 approller

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

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

  2. Under Hantera väljer du Approller.

  3. Välj Skapa approll, 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 Program
    Värde ToDoList.Read.All
    Description Tillåt att appen läser alla användares ToDo-lista med hjälp av TodoListApi

  4. Välj Skapa approll igen, 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 Program
    Värde ToDoList.ReadWrite.All
    Description Tillåt att appen läser och skriver varje användares ToDo-lista med hjälp av ToDoListApi

Konfigurera valfria anspråk

Token som returneras av Microsoft-identiteten hålls mindre för att säkerställa optimal prestanda för klienter som begär dem. Därför finns flera anspråk inte längre i token som standard och måste efterfrågas specifikt per program. För den här appen inkluderar du valfritt idtyp-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 en kombination av scp - och rollanspråk kan användas för samma ändamål är användningen av idtyp-anspråket det enklaste sättet att skilja en apptoken och en app+användartoken åt. Värdet för det här anspråket är till exempel app när token är en appspecifik token.

Använd följande steg för att konfigurera valfritt idtyp-anspråk :

  1. Under Hantera väljer du Tokenkonfiguration.

  2. Välj Lägg till valfritt anspråk.

  3. Under Tokentyp väljer du Åtkomst.

  4. Välj den valfria anspråks-idtyp.

  5. Välj Lägg till för att spara dina ändringar.

Registrera webbappen

För att programmet ska kunna logga in användare med Microsoft Entra måste Microsoft Entra-ID för kunder göras medvetet om det program som du skapar. Appregistreringen upprättar en förtroenderelation mellan appen och Microsoft Entra. När du registrerar ett program genererar externt ID en unik identifierare som kallas ett program-ID (klient)-ID, ett värde som används för att identifiera din app när du skapar autentiseringsbegäranden.

Följande steg visar hur du registrerar din app i Microsoft Entra administrationscenter:

  1. Logga in på Microsoft Entra administrationscenter som minst en programutvecklare.

  2. Om du har åtkomst till flera klienter använder du filtret Kataloger + prenumerationer på den översta menyn för att växla till din kundklientorganisation.

  3. Bläddra till Identitetsprogram>>Appregistreringar.

  4. Välj + Ny registrering.

  5. På sidan Registrera ett program som visas;

    1. Ange ett beskrivande programnamn som visas för appens användare, till exempel ciam-client-app.
    2. Under Kontotyper som stöds väljer du Endast konton i den här organisationskatalogen.

  6. Välj Register (Registrera).

  7. Programmets översiktsfönster visas vid lyckad registrering. Registrera det program-ID (klient)-ID som ska användas i programmets källkod.

Följ dessa steg för att ange din apptyp för din appregistrering:

  1. Under Hantera väljer du Autentisering.
  2. På sidan Plattformskonfigurationer väljer du Lägg till en plattform och sedan webbalternativ .
  3. För omdirigerings-URI:er anger du http://localhost:3000/auth/redirect
  4. Välj Konfigurera för att spara ändringarna.
  5. På sidan Plattformskonfigurationer går du till Webben och väljer Lägg till URI och anger sedan http://localhost:3000/
  6. Välj Spara för att spara ändringarna och se till att båda URI:erna visas.

Skapa en klienthemlighet

Skapa en klienthemlighet för det registrerade programmet. Programmet använder klienthemligheten för att bevisa sin identitet när den begär token.

  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 Hantera väljer du Certifikathemligheter&.
  3. Välj Ny klienthemlighet.
  4. I rutan Beskrivning anger du en beskrivning av klienthemligheten (till exempel ciam-appklienthemlighet).
  5. Under Upphör att gälla väljer du en varaktighet för vilken hemligheten är giltig (enligt organisationens säkerhetsregler) och väljer sedan Lägg till.
  6. Registrera hemlighetens värde. Du använder det här värdet för konfiguration i ett senare steg.

Anteckning

Det hemliga värdet visas inte igen och kan inte hämtas på något sätt när du har navigerat bort från sidan Certifikat och hemligheter , så se till att du registrerar det.
För förbättrad säkerhet bör du överväga att använda certifikat i stället för klienthemligheter.

Bevilja API-behörigheter till webbappen

Följ dessa steg om du vill bevilja api-behörigheter för klientappen (ciam-client-app):

  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 Hantera väljer du API-behörigheter.

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

  4. Välj fliken Microsoft API:er .

  5. Under Avsnittet Vanliga Microsoft-API:er väljer du Microsoft Graph.

  6. Välj alternativet Delegerade behörigheter .

  7. Under Avsnittet Välj behörigheter söker du efter och väljer både openid - och offline_access behörigheter.

  8. Välj knappen Lägg till behörigheter .

  9. Under Konfigurerade behörigheter väljer du Lägg till en behörighet igen.

  10. Välj fliken Mina API:er .

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

  12. Välj alternativet Delegerade behörigheter .

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

  14. Välj knappen Lägg till behörigheter .

  15. Nu har du tilldelat behörigheterna korrekt. Men eftersom klientorganisationen är en kunds klientorganisation kan konsumentanvändarena själva inte godkänna dessa behörigheter. För att lösa problemet måste du som administratör godkänna 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 <ditt klientnamn> visas under Status för båda omfången.

  16. 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}.

Skapa ett användarflöde

Följ dessa steg för att skapa ett användarflöde som en kund kan använda för att logga in eller registrera sig för ett program.

  1. Logga in på Microsoft Entra administrationscenter som minst ett externt ID-användarflödesadministratör.

  2. Om du har åtkomst till flera klienter använder du filtret Kataloger + prenumerationer på den översta menyn för att växla till din kundklientorganisation.

  3. Bläddra tillAnvändarflöden för identitets>externa identiteter>.

  4. Välj + Nytt användarflöde.

  5. På sidan Skapa :

    1. Ange ett namn för användarflödet, till exempel SignInSignUpSample.

    2. I listan Identitetsprovidrar väljer du Email-konton. Med den här identitetsprovidern kan användare logga in eller registrera sig med sin e-postadress.

      Anteckning

      Ytterligare identitetsprovidrar visas endast här när du har konfigurerat federation med dem. Om du till exempel konfigurerar federation med Google eller Facebook kan du välja dessa ytterligare identitetsprovidrar här.

    3. Under Email konton kan du välja ett av de två alternativen. I den här självstudien väljer du Email med lösenord.

      • Email med lösenord: Tillåter nya användare att registrera sig och logga in med en e-postadress som inloggningsnamn och lösenord som första faktorautentiseringsuppgifter.

      • Email engångslösenord: Låter nya användare registrera sig och logga in med en e-postadress som inloggningsnamn och e-post engångslösenord som sin första faktorautentiseringsuppgift.

        Anteckning

        Email engångslösenord måste aktiveras på klientorganisationsnivå (alla identitetsprovidrar>Email engångslösenord) för att det här alternativet ska vara tillgängligt på användarflödesnivå.

    4. Under Användarattribut väljer du de attribut som du vill samla in från användaren vid registrering. Genom att välja Visa mer kan du välja attribut och anspråk för land/region, visningsnamn och postnummer. Välj OK. (Användare uppmanas endast att ange attribut när de registrerar sig för första gången.)

  6. Välj Skapa. Det nya användarflödet visas i listan Användarflöden . Uppdatera sidan om det behövs.

Om du vill aktivera självbetjäning av lösenordsåterställning använder du stegen i artikeln Aktivera självbetjäning av lösenordsåterställning .

Associera webbappen med användarflödet

Även om många program kan associeras med ditt användarflöde kan ett enda program bara associeras med ett användarflöde. Ett användarflöde tillåter konfiguration av användarupplevelsen för specifika program. Du kan till exempel konfigurera ett användarflöde som kräver att användarna loggar in eller registrerar sig med ett telefonnummer eller en e-postadress.

  1. På sidomenyn väljer du Identitet.

  2. Välj Externa identiteter och sedan Användarflöden.

  3. På sidan Användarflöden väljer du det användarflödesnamn som du skapade tidigare, till exempel SignInSignUpSample.

  4. Under Använd väljer du Program.

  5. Välj Lägg till program.

  6. Välj programmet i listan, till exempel ciam-client-app , eller använd sökrutan för att hitta programmet och välj det sedan.

  7. Välj Välj.

Klona eller ladda ned exempelwebbprogram och webb-API

Hämta exempelkoden för webbappen och webb-API: et genom att ladda ned .zip-filen eller klona exempelwebbappen från GitHub genom att köra följande kommando:

git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

Om du väljer att ladda ned .zip filen extraherar du exempelappfilen till en mapp där sökvägens totala längd är 260 eller färre tecken.

Installera projektberoenden

  1. Öppna ett konsolfönster och ändra till den katalog 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 webbappberoenden:

    npm install && npm update

Konfigurera exempelwebbappen och API:et

Så här använder du appregistreringen i klientwebbappexemplet:

  1. Öppna App\authConfig.js filen 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 kan du läsa information om klientorganisationen.

    • 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 appregistreringen i webb-API-exemplet:

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

  2. Hitta platshållaren:

    • Enter_the_Application_Id_Here och ersätt det med program-ID:t (klient) för det webb-API 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 information om klientorganisationen.

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

    Skärmbild av inloggning i en nodwebbapp.

  5. På inloggningssidan skriver du din Email adress, 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.

  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 anrop till ett API.

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

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

  2. Ändra att göra-listan 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 de behörigheter (omfång) som krävs 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.

På webb-API-sidan måste slutpunkten verifiera att de behörigheter/omfång som finns i åtkomsttoken, som klientappen presenterar, är giltiga. Om åtkomsttoken är giltig svarar slutpunkten på HTTP-begäran, annars svarar den med ett 401 Unauthorized HTTP-fel.

Nästa steg

Lär dig att: