通过

教程：使用Microsoft标识平台设置 Node.js Web 应用以登录用户

适用于： 带白色复选标记符号的绿色圆圈，指示以下内容适用于员工租户。 员工租户 绿色圆圈，带有白色复选标记符号，指示以下内容适用于外部租户。 外部租户（了解详细信息）

本教程介绍如何构建 Node/Express.js Web 应用，以将用户登录到外部租户中面向客户的应用或员工租户中的员工。 本教程还演示如何获取用于调用Microsoft图形 API 的访问令牌。

本教程是 3 部分系列的第 1 部分。

在本教程中，你将;

  • 设置 Node.js 项目
  • 安装依赖项
  • 添加应用视图和 UI 组件

先决条件

  • 在 Microsoft Entra 管理中心注册新应用， 仅为此组织目录中的帐户配置。 有关更多详细信息 ，请参阅注册应用程序 。 在应用程序 概述 页中记录以下值供以后使用：
    • 应用程序（客户端）ID
    • 目录（租户）ID
  • 使用 Web 平台配置添加以下重定向 URI。 有关更多详细信息 ，请参阅如何在应用程序中添加重定向 URI 。
    • 重定向 URI： http://localhost:3000/auth/redirect
    • 前端通道注销 URL： https://localhost:5001/signout-callback-oidc
  • 将客户端密码添加到应用注册。 不要 在生产应用中使用客户端机密。 请改用证书或联合凭据。 有关详细信息，请参阅 向应用程序添加凭据。

创建 Node.js 项目

  1. 在计算机中选择的位置，创建一个文件夹来托管节点应用程序，例如 ciam-sign-in-node-express-web-app。

  2. 在终端中，将目录更改为 Node Web 应用文件夹，然后 cd ciam-sign-in-node-express-web-app运行以下命令以创建新的 Node.js 项目：

    npm init -y

    该 init -y 命令为 Node.js 项目创建默认 package.json 文件。

  3. 创建其他文件夹和文件以实现以下项目结构：

        ciam-sign-in-node-express-web-app/
    ├── server.js
    └── app.js
    └── authConfig.js
    └── package.json
    └── .env
    └── auth/
        └── AuthProvider.js
    └── controller/
        └── authController.js
    └── routes/
        └── auth.js
        └── index.js
        └── users.js
    └── views/
        └── layouts.hbs
        └── error.hbs
        └── id.hbs
        └── index.hbs   
    └── public/stylesheets/
        └── style.css

安装应用依赖项

若要安装所需的标识和 Node.js 相关的 npm 包，请在终端中运行以下命令

npm install express dotenv hbs express-session axios cookie-parser http-errors morgan @azure/msal-node

生成应用 UI 组件

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

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

    在此视图中，如果用户经过身份验证，我们将显示其用户名和访问 /auth/signout 链接以及 /users/id 终结点，否则，用户需要访问 /auth/signin 终结点才能登录。 本文稍后将定义这些终结点的快速路由。

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

        <h1>Azure AD for customers</h1>
    <h3>ID Token</h3>
    <table>
        <tbody>
            {{#each idTokenClaims}}
            <tr>
                <td>{{@key}}</td>
                <td>{{this}}</td>
            </tr>
            {{/each}}
        </tbody>
    </table>
    <a href="/">Go back</a>

    此视图用于显示 ID 令牌声明，Microsoft用户成功登录后，Entra 外部 ID 将返回到此应用。

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

        <h1>{{message}}</h1>
    <h2>{{error.status}}</h2>
    <pre>{{error.stack}}</pre>

    此视图用于显示应用运行时发生的任何错误。

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

        <!DOCTYPE html>
    <html>        
        <head>
            <title>{{title}}</title>
            <link rel='stylesheet' href='/stylesheets/style.css' />
        </head>            
        <body>
            {{{content}}}
        </body>        
    </html>

    该文件 layout.hbs 位于布局文件中。 它包含在整个应用程序视图中所需的 HTML 代码。

  5. 在代码编辑器中，打开 公共/stylesheets/style.css文件，然后添加以下代码：

        body {
      padding: 50px;
      font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    }

    a {
      color: #00B7FF;
    }

后续步骤

教程：在 Node/Express.js Web 应用中添加添加登录。