Självstudie: Skapa ett React-program på en sida och förbered det för autentisering

Artikel
01/31/2024

När registreringen är klar kan ett React-projekt skapas med hjälp av en integrerad utvecklingsmiljö (IDE). Den här självstudien visar hur du skapar ett react-program med en enda sida med hjälp av npm och skapar filer som behövs för autentisering och auktorisering.

I den här självstudien:

Skapa ett nytt React-projekt
Konfigurera inställningarna för programmet
Installera identitets- och bootstrap-paket
Lägga till autentiseringskod i programmet

Förutsättningar

Slutförande av förutsättningarna och stegen i Självstudie: Registrera ett program.
Även om alla IDE som stöder React-program kan användas används följande Visual Studio-ID:er för den här självstudien. De kan laddas ned från sidan Nedladdningar . För macOS-användare rekommenderar vi att du använder Visual Studio Code.
- Visual Studio 2022
- Visual Studio-koden
Node.js.

Skapa ett nytt React-projekt

Använd följande flikar för att skapa ett React-projekt i IDE:t.

Visual Studio
Visual Studio Code

Öppna Visual Studio och välj sedan Skapa ett nytt projekt.
Sök efter och välj den fristående JavaScript React-projektmallen och välj sedan Nästa.
Ange ett namn för projektet, till exempel reactspalocal.
Välj en plats för projektet eller acceptera standardalternativet och välj sedan Nästa.
I Ytterligare information väljer du Skapa.
I verktygsfältet väljer du Starta utan felsökning för att starta programmet. En webbläsare öppnas som standard med adressen http://localhost:3000/ . Webbläsaren förblir öppen och åter renderas för varje sparad ändring.

Skapa ytterligare mappar och filer för att uppnå följande mappstruktur:

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

Öppna Visual Studio Code, välj Arkiv>Öppna mapp.... Navigera till och välj den plats där projektet ska skapas.
Öppna en ny terminal genom att välja Terminal>Ny terminal.
Kör följande kommandon för att skapa ett nytt React-projekt med namnet reactspalocal, ändra till den nya katalogen och starta React-projektet. En webbläsare öppnas som standard med adressen http://localhost:3000/ . Webbläsaren förblir öppen och åter renderas för varje sparad ändring.
```
npx create-react-app reactspalocal
cd reactspalocal
npm start
```

Skapa ytterligare mappar och filer för att uppnå följande mappstruktur:

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

Installera identitets- och bootstrap-paket

Identitetsrelaterade npm-paket måste installeras i projektet för att aktivera användarautentisering. För projektformatering används Bootstrap .

Visual Studio
Visual Studio Code

Högerklicka på npm-alternativet i Solution Explorer och välj Installera nya npm-paket.
Sök efter @azure/MSAL-browser och välj sedan Installera paket. Upprepa för @azure/MSAL-react.
Sök efter och installera react-bootstrap.
Välj Stäng.

I terminalfältet väljer du + ikonen för att skapa en ny terminal. Ett separat terminalfönster öppnas med den tidigare nodterminalen som fortsätter att köras i bakgrunden.
Kontrollera att rätt katalog har valts (reactspalocal) och ange sedan följande i terminalen för att installera relevanta msalbootstrap och paket.
```
npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap
```

Mer information om dessa paket finns i dokumentationen i msal-browser och msal-react.

Skapa konfigurationsfilen för autentisering

I mappen src öppnar du authConfig.js och lägger till följande kodfragment:

/*
 * 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",
};

Ersätt följande värden med värdena från administrationscentret för Microsoft Entra.
- clientId - Identifieraren för programmet, även kallad klienten. Ersätt Enter_the_Application_Id_Here med det program-ID-värde (klient) som registrerades tidigare från översiktssidan för det registrerade programmet.
- authority - Detta består av två delar:
  - Instansen är slutpunkten för molnleverantören. Kontrollera med de olika tillgängliga slutpunkterna i nationella moln.
  - Klientorganisations-ID:t är identifieraren för den klientorganisation där programmet är registrerat. Ersätt Enter_the_Tenant_Info_Here med värdet för katalog-ID (klientorganisation) som registrerades tidigare från översiktssidan för det registrerade programmet.
Spara filen.

Ändra index.js för att inkludera autentiseringsprovidern

Alla delar av appen som kräver autentisering måste omslutas i komponenten MsalProvider . Du instansierar en PublicClientApplication och skickar den sedan till MsalProvider.

I mappen src öppnar du index.js och ersätter innehållet i filen med följande kodfragment för att använda paketen msal och bootstrap-formateringen:

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>
);

Spara filen.

Nästa steg

Självstudie: Skapa komponenter för inloggning och utloggning i en React-app med en enda sida

Dela via