Snabbstart – Redigera profil i ett exempel Node.js webbapp

Gäller för: Externa klienter (läs mer)

I den här snabbstarten använder du ett exempel Node.js webbapp för att lära dig hur du lägger till inloggnings- och redigeringsprofil i en webbapp. Exempelwebbappen använder Microsoft Authentication Library for Node (MSAL Node) och Microsoft Graph API för att slutföra inloggnings- och redigeringsprofilåtgärden. Redigeringsprofilåtgärden kräver att en användare slutför en multifaktorautentisering (MFA).

Förutsättningar

• Slutför stegen och förutsättningarna i Snabbstart: Logga in användare i exempelwebbapp i artikel. Den här snabbstarten visar hur du loggar in användare med hjälp av ett exempel Node.js webbapp.
• Registrera en ny app för webb-API:et i administrationscentret för Microsoft Entra, med namnet edit-profile-service, konfigurerad för Endast konton i den här organisationskatalogen. Mer information finns i Registrera ett program . Registrera följande värden från programöversiktssidan för senare användning:
  • App-ID (klient-ID)
  • Katalog-ID (hyresgäst)
• Lägg till en klienthemlighet i din appregistrering. Använd inte klienthemligheter i produktionsappar. Använd certifikat eller federerade autentiseringsuppgifter i stället. Mer information finns i lägga till autentiseringsuppgifter i ditt program.

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 för EditProfileService-appen

Appen EditProfileService måste exponera behörigheter som en klientapp skaffar för att anropa webb-API:et.

Ett API måste publicera minst ett omfång, även kallat delegerad behörighet, för att klientapparna framgångsrikt ska kunna hämta en åtkomsttoken så att en användare kan få tillgång. Följ dessa steg för att publicera ett område:

1. På sidan Appregistreringar väljer du den API-applikation som du skapade (till exempel Redigera profiltjänst) för att öppna sidan Översikt.

2. Under Hantera, 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	EditProfileService.ReadWrite
   Vem kan samtycka	endast administratörer
   Visningsnamn för administratörsgodkännande	Klienten redigerar profilen via redigera profiltjänsten
   Beskrivning av administratörsmedgivande	Omfånget för att tillåta att klientwebbappen redigerar profilen genom att anropa redigeringsprofiltjänsten.
   Stat	aktiverat

Bevilja User.ReadWrite behörighet till appen EditProfileService

User.ReadWrite är en Microsoft Graph API-behörighet som gör det möjligt för en användare att uppdatera sin profil. Om du vill ge User.ReadWrite behörighet till Appen EditProfileService använder du följande steg:

1. På sidan Appregistreringar väljer du det program som du skapade (till exempel redigera profiltjänst) för att öppna sidan Översikt.

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

3. Välj fliken Microsoft-API:er och välj sedan Microsoft Graphunder Vanliga Microsoft-API:er.

4. Välj Delegerade behörigheteroch sök sedan efter och välj User.ReadWrite i listan med behörigheter.

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

6. Du har tilldelat User.ReadWrite behörigheter korrekt till din EditProfileService-app. Men eftersom klientorganisationen är en extern klientorganisation kan kundanvändarna själva inte samtycka till dessa behörigheter. Som administratör för klientorganisationen måste du godkänna den här behörigheten 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 Beviljas för <ditt klientnamn> visas under Status för båda omfången.

Bevilja API-behörigheter till klientwebbappen

I det här avsnittet beviljar du API-behörigheter till klientwebbappen som du registrerade tidigare (i förhandskrav).

Ge din klientwebbapp behörigheten EditProfileService.ReadWrite. Den här behörigheten exponeras av appen EditProfileService och skyddar uppdateringsprofilåtgärden med MFA. Använd följande steg för att ge EditProfileService.ReadWrite behörighet till klientwebbappen:

1. På sidan Appregistreringar väljer du den API-applikation 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 edit-profile-service.

6. Välj alternativet Delegerade behörigheter.

7. I behörighetslistan väljer du EditProfileService.ReadWrite.

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

9. I listan Konfigurerade behörigheter väljer du behörigheten EditProfileService.ReadWrite 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}/{EditProfileService.ReadWrite}.

10. Du har tilldelat behörigheten *EditProfileService.ReadWrite korrekt till klientwebbappen. Men eftersom klientorganisationen är en extern klientorganisation kan kundanvändarna själva inte samtycka till dessa behörigheter. Som administratör för klientorganisationen måste du godkänna den här behörigheten 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 Beviljas för <ditt klientnamn> visas under Status för båda omfången.

Skapa MFA-princip för villkorlig åtkomst

Din EditProfileService-app som du registrerade tidigare är den resurs som du skyddar med MFA.

Om du vill skapa en MFA-princip för villkorsstyrd åtkomst (CA) använder du stegen i Lägg till multifaktorautentisering i en app. Använd följande inställningar när du skapar din policy:

• För Name använder du MFA-policy.
• För Målresurser väljer du appen EditProfileService som du registrerade tidigare, till exempel edit-profile-service.

Klona eller ladda ned exempelwebbapp

Du har redan klonat exempelappen från förhandskraven, men om du inte redan har gjort det kan du antingen klona den från GitHub eller ladda ned den som en .zip fil.

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

Konfigurera exempelwebbappen

Det här kodexemplet innehåller två appar, klientwebbappen och API-appen (EditProfileService-appen). Du måste uppdatera dessa appar för att använda dina inställningar för externa hyresgäster. Använd följande steg för att göra det:

1. Öppna 1-Authentication\7-edit-profile-with-mfa-express\App\authConfig.js fil i kodredigeraren och leta sedan upp platshållaren:

   • Enter_the_Application_Id_Here och ersätt det med program-ID(klient)-ID:t för klientwebbappen som du registrerade 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 namnet på din klient, ska du lära dig hur du läser klientinformationen.
   • Enter_the_Client_Secret_Here och ersätt det med apphemlighetsvärdet för klientwebbappen som du kopierade tidigare.
   • graph_end_point och ersätt den med Microsoft Graph API-slutpunkten, nämligen https://graph.microsoft.com/.
   • Byt ut Add_your_protected_scope_here mot API-appens räckvidd (EditProfileService-app). Värdet ser ut ungefär som api://{clientId}/EditProfileService.ReadWrite. {clientId} är värdet för program-ID för den EditProfileService som du registrerade tidigare.

2. Öppna 1-Authentication\7-edit-profile-with-mfa-express\Api\authConfig.js fil i kodredigeraren och leta sedan upp platshållaren:

   • Enter_the_Tenant_Subdomain_Here och ersätt den med Katalog (klientorganisation) underdomän. Om din primära klientdomän till exempel är contoso.onmicrosoft.comanvänder du contoso. Om du inte har namnet på din klient, ska du lära dig hur du läser klientinformationen.
   • Enter_the_Tenant_ID_Here och ersätt det med hyresgäst-ID. Om du inte har ditt klientorganisations-ID kan du lära dig hur man läser klientinformationen.
   • Enter_the_Edit_Profile_Service_Application_Id_Here och ersätt det med värdet för program-ID (klient) för EditProfileService-programmet.
   • Enter_the_Client_Secret_Here och ersätt det med det klienthemlighetsvärde som skapats som en del av förutsättningarna.
   • graph_end_point och ersätt den med Microsoft Graph API-slutpunkten, nämligen https://graph.microsoft.com/.

Installera projektberoenden och kör appen

Om du vill testa din app installerar du projektberoenden för både klientappen och tjänsten/API-appen och kör dem sedan.

1. Om du vill köra klientappen öppnar du terminalfönstret och kör sedan följande kommandon:

   cd 1-Authentication\7-edit-profile-with-mfa-express\App
   npm install
   npm start
   

2. Om du vill köra redigeringstjänsten/API-appen ändrar du katalogen till redigeringstjänsten/API-appen, 1-Authentication\7-edit-profile-with-mfa-express\Apioch kör sedan följande kommandon:

   npm install
   npm start
   

3. Öppna webbläsaren och gå sedan till http://localhost:3000. Om du får SSL-certifikatfel skapar du en .env-fil och lägger sedan till följande konfiguration:

   # Use this variable only in the development environment. 
   # Remove the variable when you move the app to the production environment.
   NODE_TLS_REJECT_UNAUTHORIZED='0'
   

4. Välj knappen Logga in och logga sedan 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 vill uppdatera profilen väljer du länken Profilredigering. Du ser en sida som liknar följande skärmbild:

   

7. Om du vill redigera profilen väljer du knappen Redigera profil. Om du inte redan har gjort det uppmanar appen dig att slutföra en MFA-utmaning.

8. Gör ändringar i någon av profildetaljerna och välj sedan spara-knappen.

Relaterat innehåll

• Lär dig hur du lägger till redigeringsprofil i din egen Node.js webbapp.