教程：创建 Vanilla JavaScript SPA 以在外部租户中进行身份验证

  • 项目

本教程是一整个系列的第 2 部分，演示如何生成 Vanilla JavaScript (JS) 单页应用程序 (SPA)，并使用 Microsoft Entra 管理中心准备将其用于身份验证。 在本教程系列的第 1 部分中，你注册了一个应用程序，并在外部租户中配置了用户流。 本教程演示如何使用 npm 创建 Vanilla JavaScript SPA，以及如何创建进行身份验证和授权所需的文件。

在本教程中；

  • 在 Visual Studio Code 中创建 Vanilla JavaScript 项目
  • 安装所需程序包
  • 将代码添加到 server.js 以创建服务器

先决条件

创建新的 Vanilla JavaScript 项目并安装依赖项

  1. 打开 Visual Studio Code，选择“文件>“打开文件夹...”。导航到要在其中创建项目的位置并选中该位置。

  2. 通过选择“终端”>“新终端”打开一个新的终端。

  3. 运行以下命令以创建新的 Vanilla JavaScript 项目：

    npm init -y

  4. 创建额外的文件夹和文件，以实现以下项目结构：

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

安装应用依赖项

  1. 在“终端”中，运行以下命令以安装项目所需的依赖项：

    npm install express morgan @azure/msal-browser

编辑 server.js 文件

Express 是用于 Node.js 的 Web 应用程序框架。 它用于创建一个可托管应用程序的服务器。 Morgan 是将 HTTP 请求记录到控制台的中间件。 服务器文件用于托管这些依赖项，包含应用程序的路由。 身份验证和授权由适用于 JavaScript 的 Microsoft 身份验证库 (MSAL.js) 处理。

  1. 将以下代码片段添加到 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}!`);
});

在此代码中，app 变量通过 express 模块初始化，而 express 用于服务公共资产。 MSAL-browser 用作静态资产，用于启动身份验证流。

下一步

第 3 部分：在 Vanilla JavaScript SPA 中处理身份验证流