Snabbstart – Redigera profil i ett exempel Node.js webbapp

Gäller för: Workforce-hyresgäster 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.

Förutsättningar

• Slutför stegen i Snabbstart: Logga in användare i en exempelwebbapp artikel. Den här snabbstarten visar hur du loggar in användare med hjälp av ett exempel Node.js webbapp.

Registrera och konfigurera EditProfileService-appen

I det här steget registrerar du appen EditProfileService (API-appen), som tillhandahåller en mekanism för att skydda redigeringsprofilåtgärden genom att kräva MFA.

Registrera EditProfileService-appen

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

2. Om du har åtkomst till flera hyresgäster använder du ikonen Inställningar i den översta menyn för att växla till din externa hyresgäst från menyn Kataloger + prenumerationer.

3. Bläddra till Identity>Applications>Applikationsregistreringar.

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, till exempel edit-profile-service.

   2. Under rubriken Kontotyper som stöds, välj Endast konton i denna organisationskatalog.

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

7. Programmets översiktsfönster visas när registreringen är klar. Registrera program-ID (klient-ID) för användning i källkoden.

Konfigurera API-omfång för EditProfileService-appen

Appen EditProfileService 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 hämta en åtkomsttoken så att en användare kan få tillgång. Följ dessa steg för att publicera ett omfång:

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örsmedgivande	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

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

8. Ange egenskapen accessTokenAcceptedVersion till 2.

9. Välj Spara.

Lägg till appklienthemlighet

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 redigera profiltjänst) för att öppna sidan Översikt.
2. Under Hanteraväljer du Certifikat & hemligheter.
3. Välj Ny klienthemlighet.
4. I rutan Beskrivning anger du en beskrivning av klienthemligheten (till exempel edit-profile-service client secret ).
5. Under Upphörvä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. 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 -certifikat och hemligheter. Se till att du registrerar den.

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 för applikationsregistreringar väljer du den applikation som du skapade (till exempel Edit-Profile-Service) för att öppna dess översiktssida.

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.

Bevilja administratörsmedgivande

Du har tilldelat behörigheterna User.ReadWrite korrekt. 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 Uppdateraoch 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 (från förhandskraven).

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

Bevilja administratörsmedgivande

Du har tilldelat behörigheterna *EditProfileService.ReadWrite korrekt. Men eftersom hyresgästen är en extern hyresgäst 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 Uppdateraoch kontrollera sedan att Beviljas för <ditt klientnamn> visas under Status för båda omfången.

Skapa CA MFA-policy

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

Om du vill skapa en MFA CA-princip 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 Nameanvänder du MFA-princip.
• För Målresurser väljer du appen EditProfileService som du registrerade tidigare, till exempel edit-profile-service.

Klona eller ladda ned exempelwebbapp

Om du vill hämta exempelappen 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, klientappen och tjänsten/API-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:

   • graph_end_point och ersätt den med Microsoft Graph API-slutpunkten, nämligen https://graph.microsoft.com/.
   • Add_your_protected_scope_here och ersätt den med appomfånget EditProfileService. Värdet ser ut ungefär som api://{clientId}/EditProfileService.ReadWrite. {clientId} är program-ID (klient-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 lär du dig hur du läsa klientinformationen.
   • Enter_the_Edit_Profile_Service_Application_Id_Here och ersätt det med applikations-ID (klient-ID)-värdet för den EditProfileService som du registrerade tidigare.
   • Enter_the_Client_Secret_Here och ersätt den med värdet för EditProfileService-apphemligheten som du kopierade tidigare.
   • graph_end_point och ersätt den med Microsoft Graph API-slutpunkten, det vill säga 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.