Zelfstudie: Een React-toepassing met één pagina maken en voorbereiden op verificatie

Nadat de registratie is voltooid, kan een React-project worden gemaakt met behulp van een IDE (Integrated Development Environment). Deze zelfstudie laat zien hoe u een React-toepassing met één pagina maakt en npm bestanden maakt die nodig zijn voor verificatie en autorisatie.

In deze zelfstudie:

• Een nieuw React-project maken
• De instellingen voor de toepassing configureren
• Identiteits- en bootstrap-pakketten installeren
• Verificatiecode toevoegen aan de toepassing

Vereisten

• Voltooiing van de vereisten en stappen in de zelfstudie: Een toepassing registreren.
• Hoewel elke IDE die React-toepassingen ondersteunt, kan worden gebruikt, worden de volgende Visual Studio IDE's gebruikt voor deze zelfstudie. Ze kunnen worden gedownload vanaf de pagina Downloads . Voor macOS-gebruikers is het raadzaam Om Visual Studio Code te gebruiken.
  • Visual Studio 2022
  • Visual Studio Code
• Node.js.

Een nieuw React-project maken

Gebruik de volgende tabbladen om een React-project te maken in de IDE.

Visual Studio

1. Open Visual Studio en selecteer vervolgens Een nieuw project maken.

2. Zoek en kies de zelfstandige JavaScript React Project-sjabloon en selecteer vervolgens Volgende.

3. Voer een naam in voor het project, zoals reactspalocal.

4. Kies een locatie voor het project of accepteer de standaardoptie en selecteer vervolgens Volgende.

5. Selecteer Maken in Aanvullende informatie.

6. Selecteer starten zonder foutopsporing in de werkbalk om de toepassing te starten. Een webbrowser wordt standaard geopend met het adres http://localhost:3000/ . De browser blijft geopend en wordt opnieuw weergegeven voor elke opgeslagen wijziging.

7. Maak extra mappen en bestanden om de volgende mapstructuur te bereiken:

   ├─── 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. Open Visual Studio Code, selecteer Map>openen.... Navigeer naar en selecteer de locatie waar u uw project wilt maken.

2. Open een nieuwe terminal door Terminal>New Terminal te selecteren.

3. Voer de volgende opdrachten uit om een nieuw React-project te maken met de naam Reactspalocal, ga naar de nieuwe map en start het React-project. Een webbrowser wordt standaard geopend met het adres http://localhost:3000/ . De browser blijft geopend en wordt opnieuw weergegeven voor elke opgeslagen wijziging.

   npx create-react-app reactspalocal
   cd reactspalocal
   npm start
   

4. Maak extra mappen en bestanden om de volgende mapstructuur te bereiken:

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

Identiteits- en bootstrap-pakketten installeren

Npm-pakketten met betrekking tot identiteiten moeten worden geïnstalleerd in het project om gebruikersverificatie in te schakelen. Voor projectstijl wordt Bootstrap gebruikt.

Visual Studio

1. Klik in Solution Explorer met de rechtermuisknop op de npm-optie en selecteer Nieuwe npm-pakketten installeren.
2. Zoek naar @azure/MSAL-browser en selecteer Pakket installeren. Herhaal dit voor @azure/MSAL-react.
3. Zoek en installeer react-bootstrap.
4. Selecteer Sluiten.

Visual Studio Code

1. Selecteer in de terminalbalk het + pictogram om een nieuwe terminal te maken. Er wordt een afzonderlijk terminalvenster geopend met de vorige knooppuntterminal die op de achtergrond blijft worden uitgevoerd.

2. Zorg ervoor dat de juiste map is geselecteerd (reactspalocal) en voer vervolgens het volgende in de terminal in om de relevante msal en bootstrap pakketten te installeren.

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

Raadpleeg de documentatie in msal-browser en msal-reactvoor meer informatie over deze pakketten.

Het verificatieconfiguratiebestand maken

1. Open authConfig.js in de src-map en voeg het volgende codefragment toe:

   /*
    * 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. Vervang de volgende waarden door de waarden uit het Microsoft Entra-beheercentrum.

   • clientId - De id van de toepassing, ook wel de client genoemd. Vervang Enter_the_Application_Id_Here door de waarde van de toepassings-id (client) die eerder is vastgelegd op de overzichtspagina van de geregistreerde toepassing.
   • authority - Dit bestaat uit twee delen:
     • Het exemplaar is het eindpunt van de cloudprovider. Neem contact op met de verschillende beschikbare eindpunten in nationale clouds.
     • De tenant-id is de id van de tenant waar de toepassing is geregistreerd. Vervang Enter_the_Tenant_Info_Here door de id-waarde van de map (tenant) die eerder is vastgelegd op de overzichtspagina van de geregistreerde toepassing.

3. Sla het bestand op.

Wijzig index.js om de verificatieprovider op te nemen

Alle onderdelen van de app waarvoor verificatie is vereist, moeten in het MsalProvider onderdeel worden verpakt. U instantieert een PublicClientApplication en geeft deze door aan MsalProvider.

1. Open index.js in de src-map en vervang de inhoud van het bestand door het volgende codefragment om de msal pakketten en bootstrap-stijl te gebruiken:

   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. Sla het bestand op.

Volgende stappen

Zelfstudie: Onderdelen maken voor aanmelden en afmelden in een React-app met één pagina