教程:创建 Vanilla JavaScript SPA 以在外部租户中进行身份验证
本教程是一整个系列的第 2 部分,演示如何生成 Vanilla JavaScript (JS) 单页应用程序 (SPA),并使用 Microsoft Entra 管理中心准备将其用于身份验证。 在本教程系列的第 1 部分中,你注册了一个应用程序,并在外部租户中配置了用户流。 本教程演示如何使用 npm
创建 Vanilla JavaScript SPA,以及如何创建进行身份验证和授权所需的文件。
在本教程中;
- 在 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}!`); });
在此代码中,app 变量通过 express 模块初始化,而 express 用于服务公共资产。 MSAL-browser 用作静态资产,用于启动身份验证流。