Dela via

Konfigurera ett Node.js webbprogram för profilredigering

Gäller för: Grön cirkel med en vit bockmarkeringssymbol som anger att följande innehåll gäller för externa klienter. Externa klienter (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. Att anropa /me-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 Uppdatera profil raden i tabellen i Microsoft Graph-API:er och behörigheter.

Förutsättningar

Uppdatera klientwebbappen

Lägg till följande filer i din Node.js klient webbapp (App mapp):

  • Skapa views/gatedUpdateProfile.hbs och views/updateProfile.hbs.
  • Skapa fetch.js.

Uppdatera appgränssnittskomponenter

  1. I kodredigeraren öppnar du App/views/index.hbs fil och lägger sedan till en Redigera profil länk med hjälp av följande kodfragment:

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

    När du har skapat uppdateringen bör din App/views/index.hbs fil se ut ungefär som följande fil:

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

  2. Öppna 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 redigerbar användarinformation.
    • 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.

  3. I kodredigeraren öppnar du App/views/updateProfile.hbs fil och lägger 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 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.

  1. Skapa API--katalog.

  2. Om du vill skapa ditt mellannivåprogramprojekt navigerar du till katalogen API och kör sedan följande kommando:

    npm init -y

  3. I katalogen API skapar du nya filer, authConfig.js, fetch.js och index.js.

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

Nästa steg

Redigera profil i en Node.js webbapp