Konfigurera ett Node.js webbprogram för profilredigering

Artikel
03/05/2025

Gäller för: Vit cirkel med en grå X-symbol. Arbetskraftshyresgäster Grön cirkel med en vit bockmarkeringssymbol. Externa hyresgäster (läs mer)

När kundanvändare har loggat in i din externa app kan du göra så att de kan redigera sina profiler. Du gör det möjligt för kundanvändare att hantera sina profiler med hjälp av Microsoft Graph API:s/me slutpunkt. /me Att anropa slutpunkten kräver en inloggad användare och därför en delegerad behörighet.

För att säkerställa att endast användaren gör ändringar i sin profil måste användaren slutföra en MFA-utmaning.

I den här guiden får du lära dig hur du konfigurerar webbappen för att stödja profilredigering med MFA-skydd (multifaktorautentisering):

Appen använder principen för villkorsstyrd åtkomst för att aktivera MFA-krav.
Konfigurationen av webbappen innehåller två webbtjänster, klientwebbappen och en tjänstapp på mellannivå.
Klientwebbappen loggar in användaren och läser och visar användarens profil.
Tjänstappen på mellannivå hämtar en åtkomsttoken och redigerar sedan profilen åt användaren.

Uppdateringsbara egenskaper

Om du vill anpassa fälten som dina kundanvändare kan redigera i sin profil väljer du bland de egenskaper som anges i raden Uppdatera profil i tabellen i Microsoft Graph-API:er och behörigheter.

Förutsättningar

Slutför stegen i självstudieserien: Konfigurera din externa klient för att logga in användare i en Node.js-webbapp. Handledningen visar hur du registrerar en app i din externa tenant och skapar en webbapp som loggar in användare. Vi refererar till det här webbprogrammet som klientwebbappen
Slutför stegen i Logga in användare och redigera profilen i ett exempel Node.js webbapp. Den här artikeln visar hur du konfigurerar den externa hyresgästen för profilredigering.

Uppdatera klientwebbappen

Lägg till följande filer i din Node.js klient vi app (App-katalog ):

Skapa vyer/gatedUpdateProfile.hbs och vyer/updateProfile.hbs.
Skapa fetch.js.

Uppdatera appgränssnittskomponenter

Öppna filen App/views/index.hbs i kodredigeraren och lägg sedan till länken Redigera profil med hjälp av följande kodfragment:

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

När du har skapat uppdateringen bör filen App/views/index.hbs se ut ungefär så här:

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

Öppna filen App/views/gatedUpdateProfile.hbs i kodredigeraren och lägg sedan till följande kod:

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

Den här filen innehåller ett HTML-formulär som representerar den redigerbara användarinformationen.
Användaren måste välja knappen Redigera profil för att uppdatera sitt visningsnamn, men användaren måste slutföra en MFA-utmaning om de inte redan har gjort det.

Öppna filen App/views/updateProfile.hbs i kodredigeraren och lägg sedan till följande kod:

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

Den här filen innehåller ett HTML-formulär som representerar redigerbar användarinformation, men som bara visas när kundanvändaren har slutfört MFA-utmaningen.

Installera appens beroenden

Installera fler Node-paket i terminalen, axios, cookie-parser, body-parser, method-overridegenom att köra följande kommando:

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

Konfigurera mellannivåappen

I det här avsnittet konfigurerar du mellannivåappen.

Skapa API-katalog .
Om du vill skapa ditt mellannivåprogramprojekt navigerar du till API-katalogen och kör sedan följande kommando:
```
npm init -y
```
I API-katalogen skapar du nya filer, authConfig.js, fetch.js och index.js.
Om du vill installera appberoenden på mellannivå kör du följande kommando:

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

Gå vidare

Redigera profil i en Node.js webbapp

Dela via