教程：创建 React 单页应用程序并准备将其用于身份验证

  • 项目

注册完成后，可以使用集成开发环境 (IDE) 创建一个 React 项目。 本教程演示如何使用 npm 创建单页 React 应用程序和创建身份验证和授权所需的文件。

本教程的内容：

  • 创建一个新的 React 项目
  • 配置应用程序的设置
  • 安装标识和启动包
  • 向应用程序添加身份验证代码

先决条件

  • 完成教程：注册应用程序中的先决条件和步骤。
  • 尽管可以使用任何支持 React 应用程序的 IDE，但本教程使用以下 Visual Studio IDE。 可以从“下载”页下载它们。 对于 macOS 用户，建议使用 Visual Studio Code。
    • Visual Studio 2022
    • Visual Studio Code
  • Node.js。

创建一个新的 React 项目

使用以下选项卡在 IDE 中创建一个 React 项目。

  1. 打开 Visual Studio，然后选择“创建新项目”。

  2. 搜索并选择“独立 JavaScript React 项目”模板，然后选择“下一步”。

  3. 输入项目的名称，例如 reactspalocal。

  4. 选择项目位置或者接受默认选项，然后选择“下一步”。

  5. 在“其他信息”中，选择“创建”。

  6. 在工具栏中，选择“在不调试的情况下启动”以启动此应用程序。 默认情况下，Web 浏览器将使用地址 http://localhost:3000/ 打开。 浏览器保持打开状态，并重新呈现保存的每个更改。

  7. 创建其他文件夹和文件，实现以下文件夹结构：

    ├─── public
│   └─── index.html
└───src
    ├─── components
    │   └─── PageLayout.jsx
    │   └─── ProfileData.jsx
    │   └─── SignInButton.jsx
    │   └─── SignOutButton.jsx
    └── App.css
    └── App.jsx
    └── authConfig.js
    └── graph.js
    └── index.css
    └── index.js

安装标识和启动包

必须在项目中安装与标识相关的 npm 包才能启用用户身份用作。 对于项目样式，你将使用 Bootstrap。

  1. 在“解决方案资源管理器”中，右键单击 npm 选项并选择“安装新的 npm 包”。
  2. 搜索 @azure/MSAL-browser，然后选择“安装包”。 重复 @azure/MSAL-react。
  3. 搜索并安装 react-bootstrap。
  4. 选择“关闭”。

若要了解有关这些包的详细信息，请参阅 msal-browser 和 msal-react 中的文档。

创建身份验证配置文件

  1. 在 src 文件夹中，打开 authConfig.js 并添加以下代码片段：
/*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

import { LogLevel } from "@azure/msal-browser";

/**
 * Configuration object to be passed to MSAL instance on creation. 
 * For a full list of MSAL.js configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
 */

export const msalConfig = {
    auth: {
        clientId: "Enter_the_Application_Id_Here",
        authority: "https://login.partner.microsoftonline.cn/Enter_the_Tenant_Info_Here",
        redirectUri: "http://localhost:3000",
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {	
        loggerOptions: {	
            loggerCallback: (level, message, containsPii) => {	
                if (containsPii) {		
                    return;		
                }		
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case LogLevel.Warning:
                        console.warn(message);
                        return;
                    default:
                        return;
                }	
            }	
        }	
    }
};

/**
 * Scopes you add here will be prompted for user consent during sign-in.
 * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
 * For more information about OIDC scopes, visit: 
 * https://docs.azure.cn/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
    scopes: ["User.Read"]
};

/**
 * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
export const graphConfig = {
    graphMeEndpoint: "https://microsoftgraph.chinacloudapi.cn/v1.0/me",
};
  1. 将以下值替换为 Microsoft Entra 管理中心的值。
    • clientId - 应用程序的标识符，也称为客户端。 将 Enter_the_Application_Id_Here 替换为注册应用程序的概述页中先前记录的应用程序（客户端） ID 值。
    • authority - 其由两个部分组成：
      • Instance 是云提供程序的终结点。 在“国家云”查看可用的不同终结点。
      • 租户 ID 是在其中注册应用程序的租户的标识符。 将 Enter_the_Tenant_Info_Here 替换为注册应用程序的概述页中先前记录的“目录(租户) ID”值。
  2. 保存文件。

修改 index.js 以包含身份验证提供程序

需要身份验证的所有应用部分均必须包装在 MsalProvider 组件中。 实例化 PublicClientApplication，然后将其传递至 MsalProvider。

  1. 在 src 文件夹中，打开 index.js，将该文件的内容替换为以下代码片段以使用 msal 包和启动样式设置：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
import { msalConfig } from './authConfig';

// Bootstrap components
import 'bootstrap/dist/css/bootstrap.min.css';

const msalInstance = new PublicClientApplication(msalConfig);

const root = ReactDOM.createRoot(document.getElementById('root'));

/**
 * We recommend wrapping most or all of your components in the MsalProvider component. It's best to render the MsalProvider as close to the root as possible.
 */
 root.render(
  <React.StrictMode>
      <MsalProvider instance={msalInstance}>
          <App />
      </MsalProvider>
  </React.StrictMode>
);
  1. 保存文件。

后续步骤

教程：创建用于在 React 单页应用中登录和注销的组件