使用Azure AD B2C保护的JavaScript单页应用程序教程

使用Azure AD B2C保护的JavaScript单页应用程序教程

1. 项目介绍

本项目是一个使用Vanilla JavaScript编写的单页应用程序（SPA），它通过Azure Active Directory B2C（Azure AD B2C）来保护对Web API的调用。Azure AD B2C是一个云身份验证服务，允许开发者使用社交、企业或本地账户为应用程序添加用户身份验证。

2. 项目快速启动

2.1 环境准备

在开始之前，请确保你已经安装了以下工具：

• Node.js
• npm

2.2 克隆项目

首先，克隆项目到本地：

git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git
cd ms-identity-b2c-javascript-spa

2.3 安装依赖

进入项目目录后，安装所需的依赖：

npm install

2.4 配置Azure AD B2C

在Azure门户中创建一个Azure AD B2C租户，并配置应用程序注册。获取clientId和authority，并在项目中进行配置。

在index.html文件中，找到以下代码并替换为你的配置：

const msalConfig = {
    auth: {
        clientId: "YOUR_CLIENT_ID",
        authority: "https://YOUR_TENANT_NAME.b2clogin.com/YOUR_TENANT_NAME.onmicrosoft.com/YOUR_POLICY",
        redirectUri: "http://localhost:6420"
    }
};

2.5 启动应用

启动应用：

npm start

打开浏览器并访问http://localhost:6420，你应该能够看到应用界面并进行登录。

3. 应用案例和最佳实践

3.1 应用案例

• 企业内部应用：企业可以使用Azure AD B2C来保护内部单页应用程序，确保只有授权用户可以访问。
• 客户门户：为客户提供一个安全的门户，允许他们使用社交账户或企业账户登录。

3.2 最佳实践

• 安全配置：确保Azure AD B2C的配置是安全的，使用强密码策略和多因素认证。
• 代码优化：优化JavaScript代码，减少不必要的请求和资源消耗。
• 用户体验：提供友好的用户界面和流畅的登录体验，减少用户在登录过程中的挫败感。

4. 典型生态项目

• Azure Functions：与Azure Functions集成，构建无服务器的后端服务。
• Azure Storage：使用Azure Storage来存储用户数据和应用配置。
• Azure Monitor：使用Azure Monitor来监控应用的性能和用户行为。

通过本教程，你应该能够快速启动并运行一个使用Azure AD B2C保护的JavaScript单页应用程序，并了解如何在实际项目中应用和优化。