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

Artículo
04/19/2024

注册完成后，可以使用集成开发环境 (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 项目。

Visual Studio
Visual Studio Code

打开 Visual Studio，然后选择“创建新项目”。
搜索并选择“独立 JavaScript React 项目”模板，然后选择“下一步”。
输入项目的名称，例如 reactspalocal。
选择项目位置或者接受默认选项，然后选择“下一步”。
在“其他信息”中，选择“创建”。
在工具栏中，选择“在不调试的情况下启动”以启动此应用程序。默认情况下，Web 浏览器将使用地址 http://localhost:3000/ 打开。浏览器保持打开状态，并重新呈现保存的每个更改。

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

├─── 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

打开 Visual Studio Code，选择“文件>“打开文件夹...”。导航到要在其中创建项目的位置并选中该位置。
通过选择“终端”>“新终端”打开一个新的终端。
运行以下命令以创建一个名为 reactspalocal 的新 React 项目，然后更改为新的目录并启动该 React 项目。默认情况下，Web 浏览器将使用地址 http://localhost:3000/ 打开。浏览器保持打开状态，并重新呈现保存的每个更改。
```
npx create-react-app reactspalocal
cd reactspalocal
npm start
```

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

├─── 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。

Visual Studio
Visual Studio Code

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

在“终端”栏中，选择 + 图标以创建新终端。此时将打开一个单独的终端窗口，且上一个节点终端继续在后台运行。
确保选择正确的目录 (reactspalocal) 然后在终端中输入以下内容以安装相关 msal 和 bootstrap 包。
```
npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap
```

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

创建身份验证配置文件

在 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",
};

将以下值替换为 Microsoft Entra 管理中心的值。
- clientId - 应用程序的标识符，也称为客户端。将 Enter_the_Application_Id_Here 替换为注册应用程序的概述页中先前记录的应用程序（客户端） ID 值。
- authority - 其由两个部分组成：
  - Instance 是云提供程序的终结点。在“国家云”查看可用的不同终结点。
  - 租户 ID 是在其中注册应用程序的租户的标识符。将 Enter_the_Tenant_Info_Here 替换为注册应用程序的概述页中先前记录的“目录(租户) ID”值。
保存文件。

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

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

在 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>
);

保存文件。

后续步骤

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

Compartir a través de