设置 Node.js Web 应用程序用于个人资料编辑

2025-04-18

适用于：带灰色 X 号的白色圆圈。员工租户带白色对号的绿色圆圈。外部租户（了解详细信息）

客户用户成功登录到面向外部的应用后，可以让他们编辑其配置文件。通过 Microsoft Graph API 的/me 终结点，客户用户能够管理其个人资料。调用 /me 终结点需要已登录的用户，因此需要委派权限。

为了确保只有用户本人能够更改他们的个人资料，用户需要完成 MFA 验证。

本指南介绍如何设置您的网络应用程序，以支持通过多重身份验证（MFA）保护进行个人资料编辑。

应用使用条件访问策略来启用 MFA 要求。
Web 应用设置包含两个 Web 服务：客户端 Web 应用和中间层服务应用。
客户端 Web 应用登录用户并读取并显示用户的个人资料。
中间层服务应用获取访问令牌，然后代表用户编辑配置文件。

可更新属性

若要自定义客户用户可以在其配置文件中编辑的字段，请从Microsoft图形 API 和权限中表的“更新配置文件”行中列出的属性中进行选择。

先决条件

完成教程：设置外部租户以在 Node.js Web 应用中登录用户教程系列中的步骤。本教程介绍如何在外部租户中注册应用，并生成用于登录用户的 Web 应用。我们将此 Web 应用程序称为客户端 Web 应用
在示例 Node.js Web 应用中完成“登录用户”和“编辑配置文件”中的步骤。本文显示了如何设置外部租户以进行个人资料编辑。

更新客户端 Web 应用

将以下文件添加到应用 Node.js 客户端（应用目录）：

创建 views/gatedUpdateProfile.hbs 和 views/updateProfile.hbs。
创建 fetch.js。

更新应用 UI 组件

在代码编辑器中，打开 App/views/index.hbs 文件，然后使用以下代码片段添加 编辑配置文件 链接：

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

进行更新后， App/views/index.hbs 文件应类似于以下文件：

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

在代码编辑器中，打开 App/views/gatedUpdateProfile.hbs 文件，然后添加以下代码：

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

此文件包含表示可编辑用户详细信息的 HTML 窗体。
用户需要选择 “编辑配置文件 ”按钮来更新其显示名称，但是如果用户尚未这样做，则必须完成 MFA 质询。

在代码编辑器中，打开 App/views/updateProfile.hbs 文件，然后添加以下代码：

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

此文件包含一个 HTML 窗体，表示可编辑的用户详细信息，但在客户用户完成 MFA 质询后才可见。

安装应用依赖项

在终端中，运行以下命令安装更多的 Node 包：axios、cookie-parser、body-parser、method-override。

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

设置中间层应用

在本部分中，将设置中间层应用。

创建 API 目录。
若要创建中间层应用项目，请导航到 API 目录，然后运行以下命令：
```
npm init -y
```
在 API 目录中，创建新文件、 authConfig.js、 fetch.js 和 index.js。
若要安装中间层应用依赖项，请运行以下命令：

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

后续步骤

在 Node.js Web 应用中编辑配置文件