教程:创建 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-browsermsal-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.microsoftonline.com/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.microsoft.com/en-us/azure/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://graph.microsoft.com/v1.0/me",
    };
    
  2. 将以下值替换为 Microsoft Entra 管理中心的值。

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

修改 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>
    );
    
  2. 保存文件。

后续步骤