共用方式為

教學課程：建立Node.js Web 應用程式以登入使用者

  • 發行項

本教學課程是系列中的第 2 部分，示範如何使用 Microsoft Entra 系統管理中心來建置 Node.js Web 應用程式並準備進行驗證。 在本系列的第 1 部分中，您已在外部租用戶中註冊應用程式並設定使用者程序。 在本教學課程中，您會建立 Node.js(Express) 專案，並組織您需要的所有資料夾和檔案。 您可啟用登入您在此準備的應用程式。 此 Node.js(Express) Web 應用程式的檢視會使用 Handlebars。

在本教學課程中，您將會：

  • 建立 Node.js 專案
  • 安裝相依性
  • 新增應用程式檢視和 UI 元件

必要條件

建立 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 專案建立預設的 packages.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>

    我們使用此檢視來顯示使用者成功登入之後，Microsoft Entra External ID 傳回到此應用程式的 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. 在您的程式碼編輯器中，開啟 public/stylesheets/style.css，然後新增下列程式碼：

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

    a {
      color: #00B7FF;
    }

後續步驟

第 3 部分：在您的 Node.js Web 應用程式中新增登入和登出