Dela via

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

  • Artikel

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.

  1. Öppna Visual Studio och välj sedan Skapa ett nytt projekt.

  2. Sök efter och välj den fristående JavaScript React-projektmallen och välj sedan Nästa.

  3. Ange ett namn för projektet, till exempel reactspalocal.

  4. Välj en plats för projektet eller acceptera standardalternativet och välj sedan Nästa.

  5. I Ytterligare information väljer du Skapa.

  6. 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.

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

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

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

Skapa konfigurationsfilen för autentisering

  1. 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",
};

  2. 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.

  3. 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.

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

  2. Spara filen.

Nästa steg

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