Een Node.js-webtoepassing instellen voor het bewerken van profielen

Artikel
2025-03-26

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

Nadat gebruikers van klanten zich hebben aangemeld bij uw externe app, kunt u hen inschakelen om hun profielen te bewerken. U stelt de gebruikers van de klant in staat om hun profielen te beheren met behulp van het /meMicrosoft Graph API. Voor het aanroepen van het /me-eindpunt is een aangemelde gebruiker en daarom een gedelegeerde machtiging vereist.

Om ervoor te zorgen dat alleen de gebruiker wijzigingen aanbrengt in het profiel, moet de gebruiker een MFA-uitdaging voltooien.

In deze handleiding leert u hoe u uw web-app instelt ter ondersteuning van profielbewerking met MFA-beveiliging (MultiFactor Authentication):

De app maakt gebruik van beleid voor voorwaardelijke toegang om MFA-vereisten in te schakelen.
De installatie van de web-app bevat twee webservices, de clientweb-app en een service-app in de middelste laag.
De clientweb-app meldt zich aan bij de gebruiker en leest en geeft het profiel van de gebruiker weer.
De service-app in de middelste laag verkrijgt een toegangstoken en bewerkt vervolgens het profiel namens de gebruiker.

eigenschappen die kunnen worden bijgewerkt

Als u de velden wilt aanpassen die uw klantgebruikers in hun profiel kunnen bewerken, kiest u uit de eigenschappen in de Profiel bijwerken rij van de tabel in Microsoft Graph API's en machtigingen.

Voorwaarden

Voltooi de stappen in Zelfstudie: Stel uw externe tenant in om gebruikers aan te melden in een Node.js web-app reeks zelfstudies. In de zelfstudie ziet u hoe u een app registreert in uw externe tenant en hoe u een web-app bouwt waarmee gebruikers worden aangemeld. We verwijzen naar deze webtoepassing als de clientweb-app
Voer de stappen uit in Meld gebruikers aan en bewerk een profiel in een voorbeeld-Node.js webapplicatie. In dit artikel leest u hoe u uw externe tenant instelt voor het bewerken van profielen.

De clientweb-app bijwerken

Voeg de volgende bestanden toe aan uw Node.js client (webappApp directory):

Maak views/gatedUpdateProfile.hbs en views/updateProfile.hbs.
Maak fetch.js.

Onderdelen van de gebruikersinterface van de app bijwerken

Open in je code-editor het bestand App/views/index.hbs en voeg vervolgens een koppeling Profiel bewerken toe met behulp van het volgende codefragment:

<a href="/users/gatedUpdateProfile">Edit profile</a>

Nadat u de update hebt uitgevoerd, moet uw App/views/index.hbs-bestand er ongeveer als volgt uitzien:

<h1>{{title}}</h1>
{{#if isAuthenticated }}
<p>Hi {{username}}!</p>
<a href="/users/id">View ID token claims</a>
<br>
<a href="/users/gatedUpdateProfile">Profile editing</a>
<br>
<a href="/auth/signout">Sign out</a>
{{else}}
<p>Welcome to {{title}}</p>
<a href="/auth/signin">Sign in</a>
{{/if}}

In je code-editor, open App/views/gatedUpdateProfile.hbs en voeg de volgende code toe:

<h1>Microsoft Graph API</h1>
<h3>/me endpoint response</h3>
<div style="display: flex; justify-content: left;">
    <div style="size: 400px;">
        <label>Id :</label>
        <label> {{profile.id}}</label>
        <br />
        <label for="email">Email :</label>
        <label> {{profile.mail}}</label>
        <br />
        <label for="userName">Display Name :</label>
        <label> {{profile.displayName}}</label>
        <br />
        <label for="userName">Given Name :</label>
        <label> {{profile.givenName}}</label>
        <br />    
        <label for="userSurname">Surname :</label>
        <label> {{profile.surname}}</label>
        <br />
    </div>
    <div>
        <br />
        <br />
        <a href="/users/updateProfile">
            <button>Edit Profile</button>
        </a>
    </div>
</div>
<br />
<br />
<a href="/">Go back</a>

Dit bestand bevat een HTML-formulier dat de bewerkbare gebruikersgegevens vertegenwoordigt.
De gebruiker moet de knop Profiel bewerken selecteren om de weergavenaam bij te werken, maar de gebruiker moet een MFA-uitdaging voltooien als deze dit nog niet heeft gedaan.

Open in je code-editor App/views/updateProfile.hbs en voeg vervolgens de volgende code toe:

<h1>Microsoft Graph API</h1>
<h3>/me endpoint response</h3>
<div style="display: flex; justify-content: left;">
    <div style="size: 400px;">
        <form id="userInfoForm" action="/users/update" method="POST">
            <label>Id :</label>
            <label> {{profile.id}}</label>
            <br />
            <label>Email :</label>
            <label> {{profile.mail}}</label>
            <br />
            <label for="userName">Display Name :</label>
            <input
                type="text"
                id="displayName"
                name="displayName"
                value="{{profile.displayName}}"
            />
            <br />
            <label for="userName">Given Name :</label>
            <input
                type="text"
                id="givenName"
                name="givenName"
                value="{{profile.givenName}}"
            />
            <br />    
            <label for="userSurname">Surname :</label>
            <input
                type="text"
                id="surname"
                name="surname"
                value="{{profile.surname}}"
            />
            <br />    
            <button type="submit" id="button">Save</button>
        </form>
    </div>
    <br />
</div>
<a href="/">Go back</a>

Dit bestand bevat een HTML-formulier dat de bewerkbare gebruikersgegevensvertegenwoordigt, maar alleen zichtbaar nadat de klant de MFA-uitdaging heeft voltooid.

App-afhankelijkheden installeren

Installeer in de terminal meer Node-pakketten, axios, cookie-parser, body-parser, method-override, door de volgende opdracht uit te voeren:

npm install axios cookie-parser body-parser method-override

De app voor de middellaag instellen

In deze sectie stelt u de app mid-tier in.

Maak de API-map aan.
Als u uw app-project voor de middellaag wilt maken, gaat u naar de API- map en voert u vervolgens de volgende opdracht uit:
```
npm init -y
```
Maak in de API-map nieuwe bestanden, authConfig.js, fetch.js en index.js.
Voer de volgende opdracht uit om app-afhankelijkheden in de middellaag te installeren:

npm install express express-session axios cookie-parser http-errors @azure/msal-node body-parser uuid

Volgende stap

Profiel bewerken in een Node.js-web-app

Delen via