Delen via

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

  • Artikel

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.

  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

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.

  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.

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