Nastavení webové aplikace Node.js pro úpravy profilu

Platí pro: Tenanti pracovních sil – externí tenanti (další informace)

Jakmile se uživatelé zákazníka úspěšně přihlásí k externí aplikaci, můžete jim povolit úpravy jejich profilů. Uživatelům zákazníka umožníte spravovat profily pomocí koncového /me bodu rozhraní Microsoft Graph API. Volání koncového /me bodu vyžaduje přihlášeného uživatele, a proto delegované oprávnění.

Aby se zajistilo, že v profilu provede změny jenom uživatel, musí uživatel dokončit výzvu vícefaktorového ověřování.

V této příručce se dozvíte, jak nastavit webovou aplikaci tak, aby podporovala úpravy profilu s vícefaktorovým ověřováním (MFA):

• Aplikace k povolení požadavků na vícefaktorové ověřování používá zásady podmíněného přístupu (CA).
• Nastavení webové aplikace obsahuje dvě webové služby, klientskou webovou aplikaci a aplikaci služby střední vrstvy.
• Klientská webová aplikace se přihlásí a přečte a zobrazí profil uživatele.
• Aplikace služby střední vrstvy získá přístupový token a pak profil upraví jménem uživatele.

Aktualizovatelné vlastnosti

Pokud chcete přizpůsobit pole, která můžou uživatelé zákazníka upravovat ve svém profilu, vyberte z vlastností uvedených v řádku Aktualizovat profil tabulky v rozhraních Microsoft Graph API a oprávněních.

Požadavky

• Dokončete kroky v kurzu: Nastavení externího tenanta pro přihlášení uživatelů do série kurzů Node.js webové aplikace . V tomto kurzu se dozvíte, jak zaregistrovat aplikaci v externím tenantovi a vytvořit webovou aplikaci, která přihlašuje uživatele. Tuto webovou aplikaci označujeme jako klientskou webovou aplikaci.
• Dokončete kroky v části Přihlášení uživatelů a upravte profil v ukázkové webové aplikaci Node.js. V tomto článku se dozvíte, jak nastavit externího tenanta pro úpravy profilu.

Aktualizace klientské webové aplikace

Do vašeho klienta Node.js přidejte následující soubory (adresář aplikace ):

• Vytvořte zobrazení/gatedUpdateProfile.hbs a views/updateProfile.hbs.
• Vytvořte fetch.js.

Aktualizace komponent uživatelského rozhraní aplikace

1. V editoru kódu otevřete soubor App/views/index.hbs a pak přidejte odkaz pro úpravy profilu pomocí následujícího fragmentu kódu:

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

   Po provedení aktualizace by soubor App/views/index.hbs měl vypadat podobně jako v následujícím souboru:

   <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. V editoru kódu otevřete soubor App/views/gatedUpdateProfile.hbs a přidejte následující kód:

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

   • Tento soubor obsahuje formulář HTML, který představuje upravitelné podrobnosti uživatele.
   • Uživatel musí vybrat tlačítko Upravit profil , aby aktualizoval zobrazované jméno, ale uživatel musí dokončit výzvu vícefaktorového ověřování, pokud to ještě neudělal.

3. V editoru kódu otevřete soubor App/views/updateProfile.hbs a přidejte následující kód:

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

Tento soubor obsahuje formulář HTML, který představuje upravitelné podrobnosti o uživateli, ale je viditelný až poté, co uživatel dokončí vícefaktorové ověřování.

Instalace závislostí aplikací

V terminálu nainstalujte další balíčky Node, axios, cookie-parserbody-parser, , method-overridespuštěním následujícího příkazu:

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

Nastavení střední vrstvé aplikace

V této části nastavíte střední vrstvou aplikaci.

1. Vytvořte adresář rozhraní API .

2. Pokud chcete vytvořit projekt aplikace střední vrstvy, přejděte do adresáře rozhraní API a spusťte následující příkaz:

   npm init -y
   

3. V adresáři rozhraní API vytvořte nové soubory, authConfig.js, fetch.js a index.js.

4. Pokud chcete nainstalovat závislosti aplikací střední vrstvy, spusťte následující příkaz:

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

Další krok

Úprava profilu ve webové aplikaci Node.js