教學課程：在外部租使用者中建立 Vanilla JavaScript SPA 以進行驗證

文章
04/11/2024

本教學課程是一系列的第 2 部分，示範如何使用 Microsoft Entra 系統管理中心建置 Vanilla JavaScript （JS）單頁應用程式（SPA），並準備進行驗證。在此系列的第 1 部分中，您已在外部租用戶中註冊應用程式並設定使用者流程。本教學課程示範如何使用和建立驗證和授權所需的檔案來建立 Vanilla JavaScript SPA npm 。

在本教學課程中;

在 Visual Studio Code 中建立 Vanilla JavaScript 專案
安裝必要的套件
將程式代碼新增至 server.js 以建立伺服器

必要條件

教學課程：準備外部租使用者，以驗證 Vanilla JavaScript SPA 中的使用者。
雖然可以使用任何支援 Vanilla JavaScript 應用程式的整合開發環境（IDE），但本指南建議使用 Visual Studio Code 。您可以從 [下載] 頁面下載。
Node.js。

建立新的 Vanilla JavaScript 專案並安裝相依性

開啟 Visual Studio Code，選取 [檔案>開啟資料夾...]。流覽至並選取要在其中建立專案的位置。
選取 [終端>機新終端機] 以開啟新的終端機。
執行下列命令以建立新的 Vanilla JavaScript 專案：
```
npm init -y
```

建立其他資料夾和檔案，以達成下列項目結構：

    └── public
        └── authConfig.js
        └── authPopup.js
        └── authRedirect.js
        └── claimUtils.js
        └── index.html
        └── signout.html
        └── styles.css
        └── ui.js    
    └── server.js

安裝應用程式相依性

在終端機中，執行下列命令以安裝專案所需的相依性：
```
npm install express morgan @azure/msal-browser
```

編輯server.js檔案

Express 是Node.js的 Web 應用程式架構。它用來建立裝載應用程式的伺服器。 Morgan 是將 HTTP 要求記錄至控制台的中間件。伺服器檔案可用來裝載這些相依性，並包含應用程式的路由。驗證和授權是由適用於 JavaScript 的 Microsoft 驗證連結庫處理（MSAL.js）。

將下列代碼段新增至 server.js 檔案：

const express = require('express');
const morgan = require('morgan');
const path = require('path');

const DEFAULT_PORT = process.env.PORT || 3000;

// initialize express.
const app = express();

// Configure morgan module to log all requests.
app.use(morgan('dev'));

// serve public assets.
app.use(express.static('public'));

// serve msal-browser module
app.use(express.static(path.join(__dirname, "node_modules/@azure/msal-browser/lib")));

// set up a route for signout.html
app.get('/signout', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/signout.html'));
});

// set up a route for redirect.html
app.get('/redirect', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/redirect.html'));
});

// set up a route for index.html
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(DEFAULT_PORT, () => {
    console.log(`Sample app listening on port ${DEFAULT_PORT}!`);
});

在此程式代碼中，應用程式變數會使用express模組初始化，並使用express來提供公用資產。 MSAL-browser 可作為靜態資產，並用來起始驗證流程。

後續步驟

第3部分：處理 Vanilla JavaScript SPA 中的驗證流程

分享方式：