react-adal 使用指南

1. 项目目录结构及介绍

react-adal 是一个用于在 React 应用程序中集成微软 Azure Active Directory (AAD) 认证的库。以下是基于该类库项目可能的一个典型目录结构示例：

├── node_modules/
│   ┗── ... (项目依赖)
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── components/                # 组件目录，存放自定义组件
│   │   └── ...
│   ├── adalConfig.js              # 配置ADAL的文件
│   ├── App.js                     # 主应用组件
│   ├── index.js                   # 入口文件
│   └── ...                        # 其它源代码文件
├── .gitignore
├── package.json
├── README.md
└── yarn.lock (或 package-lock.json)

• public 目录包含了静态资源，如HTML模板和图标。
• src 是应用程序的主要源码目录，其中adalConfig.js负责配置ADAL，index.js是应用的入口点。
• components 存放应用中的各种复用组件。
• package.json 包含了项目依赖、脚本命令等元数据。

2. 项目的启动文件介绍

• index.js: 这是React应用的主入口文件。在这里，通过引入并使用 runWithAdal 函数（从 react-adal 导入）来确保在应用加载之前用户已被Azure AD认证。例如：

  import { runWithAdal } from 'react-adal';
  import { authContext } from './config/adalConfig';
  
  runWithAdal(authContext, () => {
      // 应用主体代码，通常是 ReactDOM.render(...)
  });
  

  确保在应用渲染之前执行ADAL的逻辑，以管理认证流程。

3. 项目的配置文件介绍

• adalConfig.js: 此文件用来设置ADAL的相关配置，以连接到你的Azure AD实例。关键配置项包括：

  export const adalConfig = {
      tenant: '<your_tenant_id>',
      clientId: '<your_client_id>',
      cacheLocation: 'localStorage', // 或 sessionStorage
      // 可能还包含其他特定于应用的配置，如endpoints来指定受保护的API端点
  };
  
  export const authContext = new AuthenticationContext(adalConfig);
  

  • tenant: Azure AD租户的ID。
  • clientId: 在Azure AD注册的应用的客户端ID。
  • cacheLocation: 来存储令牌的位置，通常选择localStorage或sessionStorage。
  • authContext: 实例化AuthenticationContext对象，用于处理认证过程。

确保替换上述配置中的占位符（如<your_tenant_id>和<your_client_id>）以匹配你在Azure AD的实际设置。

以上是对react-adal项目的基本结构、启动逻辑以及配置文件的简介。在实际开发中，还需参考具体版本的文档和API参考，以获取最新的实践指导。