Samouczek: tworzenie aplikacji jednostronicowej react i przygotowywanie jej do uwierzytelniania

Po zakończeniu rejestracji można utworzyć projekt React przy użyciu zintegrowanego środowiska projektowego (IDE). W tym samouczku pokazano, jak utworzyć jednostronicową aplikację React przy użyciu i npm utworzyć pliki potrzebne do uwierzytelniania i autoryzacji.

W tym samouczku:

• Tworzenie nowego projektu React
• Konfigurowanie ustawień aplikacji
• Instalowanie pakietów identity i bootstrap
• Dodawanie kodu uwierzytelniania do aplikacji

Wymagania wstępne

• Ukończenie wymagań wstępnych i kroków w temacie Samouczek: rejestrowanie aplikacji.
• Chociaż można używać dowolnego środowiska IDE obsługującego aplikacje React, w tym samouczku są używane następujące środowiska IDE programu Visual Studio. Można je pobrać ze strony Pliki do pobrania . W przypadku użytkowników systemu macOS zaleca się używanie programu Visual Studio Code.
  • Visual Studio 2022
  • Visual Studio Code
• Node.js.

Tworzenie nowego projektu React

Użyj poniższych kart, aby utworzyć projekt React w środowisku IDE.

Program Visual Studio

1. Otwórz program Visual Studio, a następnie wybierz pozycję Utwórz nowy projekt.

2. Wyszukaj i wybierz szablon Autonomiczny projekt JavaScript React, a następnie wybierz pozycję Dalej.

3. Wprowadź nazwę projektu, na przykład reactspalocal.

4. Wybierz lokalizację projektu lub zaakceptuj opcję domyślną, a następnie wybierz przycisk Dalej.

5. W obszarze Dodatkowe informacje wybierz pozycję Utwórz.

6. Na pasku narzędzi wybierz pozycję Rozpocznij bez debugowania , aby uruchomić aplikację. Przeglądarka internetowa zostanie otwarta z adresem http://localhost:3000/ domyślnie. Przeglądarka pozostaje otwarta i ponownie renderuje dla każdej zapisanej zmiany.

7. Utwórz dodatkowe foldery i pliki, aby uzyskać następującą strukturę folderów:

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

1. Otwórz program Visual Studio Code, wybierz pozycję Plik>Otwórz folder.... Przejdź do i wybierz lokalizację, w której chcesz utworzyć projekt.

2. Otwórz nowy terminal, wybierając pozycję Terminal>Nowy terminal.

3. Uruchom następujące polecenia, aby utworzyć nowy projekt React o nazwie reactspalocal, zmienić na nowy katalog i uruchomić projekt React. Przeglądarka internetowa zostanie otwarta z adresem http://localhost:3000/ domyślnie. Przeglądarka pozostaje otwarta i ponownie renderuje dla każdej zapisanej zmiany.

   npx create-react-app reactspalocal
   cd reactspalocal
   npm start
   

4. Utwórz dodatkowe foldery i pliki, aby uzyskać następującą strukturę folderów:

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

Instalowanie pakietów identity i bootstrap

Aby umożliwić uwierzytelnianie użytkowników, należy zainstalować pakiety npm powiązane z tożsamościami w projekcie. W przypadku stylów projektu zostanie użyty bootstrap .

Program Visual Studio

1. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy opcję npm i wybierz polecenie Zainstaluj nowe pakiety npm.
2. Wyszukaj pozycję @azure/MSAL-browser, a następnie wybierz pozycję Zainstaluj pakiet. Powtórz dla @azure/MSAL-react.
3. Wyszukaj i zainstaluj aplikację react-bootstrap.
4. Wybierz Zamknij.

Visual Studio Code

1. Na pasku terminalu wybierz ikonę+, aby utworzyć nowy terminal. Zostanie otwarte oddzielne okno terminalu z poprzednim terminalem węzła, które będzie nadal działać w tle.

2. Upewnij się, że wybrano prawidłowy katalog (reactspalocal), a następnie wprowadź następujące polecenie w terminalu, aby zainstalować odpowiednie pakiety msal i bootstrap .

   npm install @azure/msal-browser @azure/msal-react
   npm install react-bootstrap bootstrap
   

Aby dowiedzieć się więcej o tych pakietach, zapoznaj się z dokumentacją w temacie msal-browser i msal-react.

Tworzenie pliku konfiguracji uwierzytelniania

1. W folderze src otwórz authConfig.js i dodaj następujący fragment kodu:

   /*
    * 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. Zastąp następujące wartości wartości wartościami z centrum administracyjnego firmy Microsoft Entra.

   • clientId — Identyfikator aplikacji, nazywany również klientem. Zastąp Enter_the_Application_Id_Here ciąg wartością Identyfikator aplikacji (klienta), która została zarejestrowana wcześniej na stronie przeglądu zarejestrowanej aplikacji.
   • authority - Składa się z dwóch części:
     • Wystąpienie jest punktem końcowym dostawcy usług w chmurze. Sprawdź różne dostępne punkty końcowe w chmurach krajowych.
     • Identyfikator dzierżawy to identyfikator dzierżawy, w której zarejestrowano aplikację. Zastąp Enter_the_Tenant_Info_Here wartością identyfikatora katalogu (dzierżawy), która została zarejestrowana wcześniej na stronie przeglądu zarejestrowanej aplikacji.

3. Zapisz plik.

Modyfikowanie index.js w celu uwzględnienia dostawcy uwierzytelniania

Wszystkie części aplikacji, które wymagają uwierzytelniania, muszą być opakowane w składnik.MsalProvider Następnie należy utworzyć wystąpienie elementu PublicClientApplication , a następnie przekazać go do elementu MsalProvider.

1. W folderze src otwórz index.js i zastąp zawartość pliku następującym fragmentem kodu, aby użyć msal pakietów i stylu bootstrap:

   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. Zapisz plik.

Następne kroki

Samouczek: tworzenie składników do logowania się i wylogowywanie się w aplikacji jednostronicowej react