Oktatóanyag: React egyoldalas alkalmazás létrehozása és hitelesítésre való előkészítése

A regisztráció befejezése után a React-projekt egy integrált fejlesztési környezettel (IDE) hozható létre. Ez az oktatóanyag bemutatja, hogyan hozhat létre egy egyoldalas React-alkalmazást a hitelesítéshez és engedélyezéshez szükséges fájlok használatával npm és létrehozásával.

Ebben az oktatóanyagban:

• Új React-projekt létrehozása
• Az alkalmazás beállításainak konfigurálása
• Identitás- és rendszerindítási csomagok telepítése
• Hitelesítési kód hozzáadása az alkalmazáshoz

Előfeltételek

• Az oktatóanyag előfeltételeinek és lépéseinek elvégzése: Alkalmazás regisztrálása.
• Bár a React-alkalmazásokat támogató ide-k használhatók, az oktatóanyaghoz az alábbi Visual Studio-azonosítókat használjuk. Ezek a Letöltések oldalról tölthetők le. MacOS-felhasználók számára a Visual Studio Code használata ajánlott.
  • Visual Studio 2022
  • Visual Studio Code
• Node.js.

Új React-projekt létrehozása

Az alábbi fülek használatával hozzon létre egy React-projektet az IDE-ben.

Visual Studio

1. Nyissa meg a Visual Studiót, majd válassza az Új projekt létrehozása lehetőséget.

2. Keresse meg és válassza ki az önálló JavaScript React Project-sablont, majd kattintson a Tovább gombra.

3. Adja meg a projekt nevét, például reactspalocal.

4. Válasszon egy helyet a projekthez, vagy fogadja el az alapértelmezett beállítást, majd válassza a Tovább gombot.

5. A További információ területen válassza a Létrehozás lehetőséget.

6. Az eszköztáron válassza a Hibakeresés nélküli indítás lehetőséget az alkalmazás elindításához. Alapértelmezés szerint megnyílik egy webböngésző a címmel http://localhost:3000/ . A böngésző nyitva marad, és minden mentett módosításhoz újra renderel.

7. Hozzon létre további mappákat és fájlokat a következő mappastruktúra eléréséhez:

   ├─── 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. Nyissa meg a Visual Studio Code-ot, és válassza a Fájl>megnyitása mappa... lehetőséget. Keresse meg és válassza ki azt a helyet, ahol létre szeretné hozni a projektet.

2. Nyisson meg egy új terminált az Új terminál terminál> kiválasztásával.

3. Futtassa az alábbi parancsokat egy új React-projekt létrehozásához reactspalocal néven, váltson az új könyvtárra, és indítsa el a React-projektet. Alapértelmezés szerint megnyílik egy webböngésző a címmel http://localhost:3000/ . A böngésző nyitva marad, és minden mentett módosításhoz újra renderel.

   npx create-react-app reactspalocal
   cd reactspalocal
   npm start
   

4. Hozzon létre további mappákat és fájlokat a következő mappastruktúra eléréséhez:

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

Identitás- és rendszerindítási csomagok telepítése

A felhasználói hitelesítés engedélyezéséhez telepíteni kell az identitással kapcsolatos npm-csomagokat a projektben. A projekt stílusához a Rendszerindítót fogja használni.

Visual Studio

1. A Megoldáskezelő kattintson a jobb gombbal az npm beállításra, és válassza az Új npm-csomagok telepítése lehetőséget.
2. Keresse meg a @azure/MSAL-böngészőt, majd válassza a Csomag telepítése lehetőséget. Ismételje meg a @azure/MSAL-reaktív műveletet.
3. Keresse meg és telepítse a react-bootstrap parancsot.
4. Válassza a Bezárás lehetőséget.

Visual Studio Code

1. A terminálsávon válassza az + ikont egy új terminál létrehozásához. Megnyílik egy külön terminálablak, amelyben az előző csomóponti terminál továbbra is a háttérben fut.

2. Győződjön meg arról, hogy a megfelelő könyvtár van kiválasztva (reactspalocal), majd írja be a következőket a terminálba a vonatkozó msal és bootstrap a csomagok telepítéséhez.

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

Ha többet szeretne megtudni ezekről a csomagokról, tekintse meg a dokumentációt és msal-browsermsal-reacta .

A hitelesítési konfigurációs fájl létrehozása

1. Az src mappában nyissa meg a authConfig.js, és adja hozzá a következő kódrészletet:

   /*
    * 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. Cserélje le a következő értékeket a Microsoft Entra Felügyeleti központ értékeire.

   • clientId - Az alkalmazás azonosítója, más néven az ügyfél. Cserélje le Enter_the_Application_Id_Here az alkalmazás (ügyfél) azonosítójának értékét, amelyet korábban a regisztrált alkalmazás áttekintő oldaláról rögzítettek.
   • authority - Ez két részből áll:
     • A példány a felhőszolgáltató végpontja. Ellenőrizze a különböző elérhető végpontokat a nemzeti felhőkben.
     • A bérlőazonosító annak a bérlőnek az azonosítója, amelyben az alkalmazás regisztrálva van. Cserélje le a Enter_the_Tenant_Info_Here a címtár (bérlő) azonosítójának a regisztrált alkalmazás áttekintési oldaláról korábban rögzített értékére.

3. Mentse a fájlt.

A index.js módosítása a hitelesítésszolgáltató belefoglalásához

Az alkalmazás minden olyan részét, amely hitelesítést igényel, az MsalProvider összetevőbe kell burkolni. Példányosít egy PublicClientApplication példányt , majd átadja a következőnek MsalProvider: .

1. Az src mappában nyissa meg a index.js, és cserélje le a fájl tartalmát a következő kódrészletre a csomagok és a msal bootstrap-stílus használatához:

   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. Mentse a fájlt.

Következő lépések

Oktatóanyag: Összetevők létrehozása bejelentkezéshez és kijelentkezéshez egy egyoldalas React-alkalmazásban