Quickstart: profiel bewerken in een voorbeeld-Node.js-web-app

Artikel
2025-04-16

Van toepassing op: Witte cirkel met een grijs X-symbool. Werknemershuurders Groene cirkel met een wit vinkje. Externe huurders (meer informatie)

In deze quickstart gebruikt u een voorbeeld-Node.js-web-app om te leren hoe u aanmeldings- en bewerkingsprofiel toevoegt aan een web-app. De voorbeeldweb-app maakt gebruik van Microsoft Authentication Library for Node (MSAL Node) en Microsoft Graph API om de aanmeldings- en profielbewerking te voltooien. Voor de bewerking profiel bewerken moet een gebruiker een meervoudige verificatie (MFA) voltooien.

Voorwaarden

Voltooi de stappen en vereisten in het artikel "Quickstart: Gebruikers aanmelden in een voorbeeld-webapp". In deze quickstart ziet u hoe u gebruikers kunt aanmelden met behulp van een voorbeeld-Node.js-web-app.
Registreer een nieuwe app voor uw web-API in het Microsoft Entra-beheercentrum, met de naam edit-profile-service, die alleen is geconfigureerd voor accounts in deze organisatiemap. Raadpleeg Een applicatie registreren voor meer details. Noteer de volgende waarden van de Overview pagina van de applicatie voor later gebruik.
- Applicatie (client) ID
- Directory-id (huurder)
Voeg een clientgeheim toe aan uw app-registratie. Gebruik geen clientgeheimen in productie-apps. Gebruik in plaats daarvan certificaten of federatieve referenties. Voor meer informatie, zie referenties toevoegen aan uw toepassing.

API-bereiken en -rollen configureren

Door de web-API te registreren, moet u API-bereiken configureren om de machtigingen te definiëren die een clienttoepassing kan aanvragen voor toegang tot de web-API. Daarnaast moet u app-rollen instellen om de rollen op te geven die beschikbaar zijn voor gebruikers of toepassingen en de benodigde API-machtigingen verlenen aan de web-app, zodat deze de web-API kan aanroepen.

API-bereiken voor EditProfileService-app configureren

De EditProfileService-app moet machtigingen beschikbaar maken die een client-app verkrijgt om de web-API aan te roepen.

Een API moet minimaal één bereik publiceren, ook wel gedelegeerde machtiginggenoemd, zodat de client-apps een toegangstoken voor een gebruiker kunnen verkrijgen. Voer de volgende stappen uit om een scope te publiceren:

Selecteer op de pagina App-registraties de API-toepassing die u hebt gemaakt (zoals edit-profile-service) om de bijbehorende pagina Overzicht te openen.
Selecteer onder Beherende optie Een API openstellen.
Selecteer bovenaan de pagina, naast Application ID-URI, de koppeling Toevoegen om een URI te genereren die uniek is voor de app.
Accepteer de voorgestelde URI voor de toepassings-id, zoals api://{clientId}, en selecteer Opslaan. Wanneer uw webtoepassing een toegangstoken voor de web-API aanvraagt, wordt de URI toegevoegd als het voorvoegsel voor elk bereik dat u voor de API definieert.
Selecteer onder bereiken die zijn gedefinieerd door deze APIde optie Een bereik toevoegen.

Voer de volgende waarden in waarmee een leestoegang tot de API wordt gedefinieerd en selecteer vervolgens Bereik toevoegen om uw wijzigingen op te slaan:

Eigendom	Waarde
Scopenaam	EditProfileService.ReadWrite
Wie kan toestemming geven	Alleen beheerders
Weergavenaam van beheerderstoestemming	Client bewerkt profiel via de service 'profiel bewerken'
Beschrijving van beheerderstoestemming	Het bereik om de client-webapp toe te staan het profiel te bewerken door de bewerkingsservice voor profielen aan te roepen.
Staat	Ingeschakeld

Verleen de User.ReadWrite-machtigingen van de EditProfileService-app

User.ReadWrite is een Microsoft Graph API-machtiging waarmee een gebruiker zijn profiel kan bijwerken. Voer de volgende stappen uit om de User.ReadWrite machtiging te verlenen aan de EditProfileService-app:

Selecteer op de pagina App-registraties de toepassing die u hebt gemaakt (zoals edit-profile-service) om de bijbehorende pagina Overzicht te openen.
Selecteer onder BeherenAPI-machtigingen.
Selecteer het tabblad Microsoft-API's en selecteer vervolgens onder Veelgebruikte Microsoft-API'sMicrosoft Graph.
Selecteer Gedelegeerde machtigingen, zoek en selecteer User.ReadWrite in de lijst met machtigingen.
Selecteer de knop Machtigingen toevoegen.
U hebt de machtigingen User.ReadWrite correct toegewezen aan uw EditProfileService-app. Omdat de tenant echter een externe tenant is, kunnen de gebruikers van de klant zelf geen toestemming geven voor deze machtigingen. Als beheerder van de tenant moet u toestemming geven voor deze machtiging namens alle gebruikers in de tenant:
1. Selecteer Beheerderstoestemming verlenen voor <uw tenantnaam>en selecteer vervolgens Ja.
2. Selecteer Vernieuwenen controleer vervolgens of Verleend voor <de naam van uw tenant> wordt weergegeven onder Status voor beide omgevingen.

API-machtigingen verlenen aan de clientweb-app

In deze sectie verleent u API-machtigingen aan de clientweb-app die u eerder hebt geregistreerd (in vereisten).

Geef uw client-webapp de EditProfileService.ReadWrite machtiging. Deze machtiging wordt weergegeven door de App EditProfileService en beveiligt de updateprofielbewerking met MFA. Voer de volgende stappen uit om de EditProfileService.ReadWrite machtiging te verlenen aan clientweb-app:

Selecteer op de pagina App-registraties de API-toepassing die u hebt gemaakt (zoals ciam-client-app) om de pagina Overzicht te openen.
Selecteer onder BeherenAPI-machtigingen.
Selecteer onder Geconfigureerde machtigingenEen machtiging toevoegen.
Selecteer de API's die mijn organisatie gebruikt tabblad.
Selecteer in de lijst met API's een API, zoals edit-profile-service.
Selecteer de optie Gedelegeerde machtigingen.
Selecteer EditProfileService.ReadWritein de lijst met machtigingen.
Selecteer de knop Machtigingen toevoegen.
Selecteer in de lijst Geconfigureerde machtigingen de EditProfileService.ReadWrite machtiging en kopieer de volledige URI van de machtiging voor later gebruik. De volledige machtigings-URI ziet er ongeveer als api://{clientId}/{EditProfileService.ReadWrite}.
U hebt de machtigingen *EditProfileService.ReadWrite correct toegewezen aan uw clientweb-app. Omdat de tenant echter een externe tenant is, kunnen de gebruikers van de klant zelf geen toestemming geven voor deze machtigingen. Als beheerder van de tenant moet u toestemming geven voor deze machtiging namens alle gebruikers in de tenant:
1. Selecteer Beheerderstoestemming verlenen voor <uw tenantnaam>en selecteer vervolgens Ja.
2. Selecteer Vernieuwenen controleer vervolgens of Verleend voor <de naam van uw tenant> wordt weergegeven onder Status voor beide omgevingen.

MFA-beleid voor voorwaardelijke toegang maken

Uw EditProfileService-app die u eerder hebt geregistreerd, is de resource die u met MFA beveiligt.

Als u een MFA-beleid voor voorwaardelijke toegang (CA) wilt maken, gebruikt u de stappen in Meervoudige verificatie toevoegen aan een app. Gebruik de volgende instellingen wanneer u uw beleid maakt:

Gebruik voor de naamde MFA-beleid.
Selecteer voor de doelbronnen de EditProfileService-app die u eerder hebt geregistreerd, zoals edit-profile-service.

Voorbeeld-web-app klonen of downloaden

U hebt de voorbeeld-app al gekloond aan de vereisten, maar als u dit nog niet hebt gedaan, kunt u deze klonen vanuit GitHub of downloaden als een .zip bestand.

download het .zip bestand of kloon de voorbeeldweb-app vanuit GitHub door de volgende opdracht uit te voeren:

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

De voorbeeldweb-app configureren

Dit codevoorbeeld bevat twee apps, de clientweb-app en de API-app (EditProfileService-app). U moet deze apps bijwerken om uw externe tenantinstellingen te kunnen gebruiken. Gebruik hiervoor de volgende stappen:

Open het bestand 1-Authentication\7-edit-profile-with-mfa-express\App\authConfig.js in uw code-editor en zoek vervolgens de plaatsaanduiding.
- Enter_the_Application_Id_Here en vervang deze door de toepassings-id (client) van de clientweb-app die u eerder hebt geregistreerd.
- Enter_the_Tenant_Subdomain_Here en vervang dit door het subdomein Directory (tenant). Als uw primaire tenantdomein bijvoorbeeld is contoso.onmicrosoft.com, gebruikt u contoso. Als u uw tenantnaam niet hebt, leert u hoe u uw tenantgegevens kunt lezen.
- Enter_the_Client_Secret_Here en vervang het door de waarde van het app-geheim van de klantwebapp die u eerder hebt gekopieerd.
- graph_end_point en vervangen door het Microsoft Graph API-eindpunt, dat is https://graph.microsoft.com/.
- Add_your_protected_scope_here en vervang deze door de toepassingsscope van de API-app (EditProfileService-app). De waarde lijkt op api://{clientId}/EditProfileService.ReadWrite. {clientId} is de waarde van de toepassings-id (client) van de EditProfileService die u eerder hebt geregistreerd.
Open het bestand 1-Authentication\7-edit-profile-with-mfa-express\Api\authConfig.js in uw code-editor en zoek vervolgens de plaatsaanduiding.
- Enter_the_Tenant_Subdomain_Here en vervang dit door het subdomein Directory (tenant). Als uw primaire tenantdomein bijvoorbeeld is contoso.onmicrosoft.com, gebruikt u contoso. Als u uw tenantnaam niet hebt, leert u hoe u uw tenantgegevens kunt lezen.
- Enter_the_Tenant_ID_Here en vervang deze door tenant-id. Als u uw tenant-id niet hebt, leert u hoe u uw tenantgegevens kunt lezen.
- Enter_the_Edit_Profile_Service_Application_Id_Here en vervang deze door de waarde van de toepassings-id (client) van de EditProfileService-toepassing .
- Enter_the_Client_Secret_Here en vervang deze door de clientgeheimwaarde die is gemaakt als onderdeel van de vereisten.
- graph_end_point en vervangen door het Microsoft Graph API-eindpunt, dat is https://graph.microsoft.com/.

Projectafhankelijkheden installeren en app uitvoeren

Als u uw app wilt testen, installeert u projectafhankelijkheden voor zowel de client-app als de service-/API-app en voert u deze vervolgens uit.

Als u de client-app wilt uitvoeren, opent u het terminalvenster en voert u de volgende opdrachten uit:
```
cd 1-Authentication\7-edit-profile-with-mfa-express\App
npm install
npm start
```
Als u de bewerkingsservice-/API-app wilt uitvoeren, navigeert u naar de map van de bewerkingsservice-/API-app, 1-Authentication\7-edit-profile-with-mfa-express\Apien voert u vervolgens de volgende opdrachten uit:
```
npm install
npm start
```

Open uw browser en ga naar http://localhost:3000. Als u ssl-certificaatfouten ondervindt, maakt u een .env-bestand en voegt u de volgende configuratie toe:

# 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'

Selecteer de knop Aanmelden en meld u vervolgens aan.
Typ op de aanmeldingspagina uw e-mailadres, selecteer Volgende, typ uw wachtwoorden selecteer Aanmelden. Als u geen account hebt, selecteert u Geen account? Maak één koppeling, waarmee de registratiestroom wordt gestart.
Als u het profiel wilt bijwerken, selecteert u de koppeling Profiel bewerken. U ziet een pagina die lijkt op de volgende schermopname:
Als u het profiel wilt bewerken, selecteert u de knop Profiel bewerken. Als u dit nog niet hebt gedaan, wordt u door de app gevraagd om een MFA-uitdaging te voltooien.
Breng wijzigingen aan in de profielgegevens en selecteer vervolgens de knop Opslaan.

Meer informatie over het toevoegen van een bewerkingsprofiel in uw eigen Node.js-web-app.

Delen via