Dela via

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

  • Artikel

Gäller för: grön cirkel med en vit bock. arbetskraftshyresgäster grön cirkel med en vit bock. externa hyresgäster (läs mer)

I den här självstudien skapar du ett React-program på en sida (SPA) och förbereder det för autentisering med hjälp av Microsofts identitetsplattform. Den här självstudien visar hur du skapar ett React SPA med npm, samt skapar filer som behövs för autentisering och auktorisering, och lägger till din hyresgästinformation i källkoden. Programmet kan användas för anställda i en klientorganisation eller för kunder som använder en extern klientorganisation.

I den här handledningen kommer du att

  • Skapa ett nytt React-projekt
  • Installera paket som krävs för autentisering
  • Skapa filstrukturen och lägg till kod i serverfilen
  • Lägg till klientinformationen i konfigurationsfilen för autentisering

Förutsättningar

  • En hyresgäst för arbetskraft. Du kan använda din standardkatalog eller konfigurera en ny klientorganisation.
  • Registrera en ny app i administrationscentret för Microsoft Entra med följande konfiguration. Mer information finns i Registrera ett program.
    • Namn: identity-client-spa
    • kontotyper som stöds: endast konton i den här organisationskatalogen (enskild klientorganisation).
    • Plattformskonfiguration: Enkelsidigt program (SPA).
    • omdirigerings-URI: http://localhost:3000/.

Skapa ett nytt React-projekt

  1. Öppna Visual Studio Code, välj Fil>Öppna mapp.... Navigera till och välj den plats där projektet ska skapas.

  2. Öppna en ny terminal genom att välja Terminal>New Terminal.

  3. 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 med adressen http://localhost:3000/ som standard. Webbläsaren förblir öppen och renderas om varje gång en ändring sparas.

    npx create-react-app reactspalocal
cd reactspalocal
npm start

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

    ├─── public
│   └─── index.html
└───src
    └─── styles
    │   └─── App.css
    │   └─── index.css
    ├─── utils
    │   └─── claimUtils.js
    ├─── components
    │   └─── DataDisplay.jsx
    │   └─── NavigationBar.jsx
    │   └─── PageLayout.jsx
    └── App.jsx
    └── authConfig.js
    └── 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. I fältet Terminal 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.

  2. Kontrollera att rätt katalog har valts (reactspalocal) och ange sedan följande i terminalen för att installera relevanta msal- och bootstrap-paket.

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

Lägg till din klientinformation i MSAL-konfigurationen

Filen authConfig.js innehåller konfigurationsinställningarna för autentiseringsflödet och används för att konfigurera MSAL.js med nödvändiga inställningar för autentisering.

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

    
 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', // This is the ONLY mandatory field that you need to supply.
         authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', // Replace the placeholder with your tenant info
         redirectUri: 'http://localhost:3000/redirect', // Points to window.location.origin. You must register this URI on Microsoft Entra admin center/App Registration.
         postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
         navigateToLoginRequestUrl: false, // If "true", will navigate back to the original request location before processing the auth code response.
     },
     cache: {
         cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
         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: [],
 };

 /**
 * An optional silentRequest object can be used to achieve silent SSO
 * between applications by providing a "login_hint" property.
 */
 // export const silentRequest = {
 //     scopes: ["openid", "profile"],
 //     loginHint: "example@domain.net"
 // };

  2. Ersätt följande värden med värdena från administrationscentret för Microsoft Entra.

    • clientId – Programmets identifierare, även kallad klienten. Ersätt Enter_the_Application_Id_Here med värdet för från ID:t för-applikationen (klient) som registrerades tidigare från översiktssidan för det registrerade programmet.
    • authority – Detta består av två delar:
      • Instance är slutpunkten för molnleverantören. Kontrollera de olika tillgängliga slutpunkterna i nationella moln.
      • klientorganisations-ID är identifieraren för klientorganisationen där programmet är registrerat. Ersätt Enter_the_Tenant_Info_Here med Directory-ID:t (klientorganisation) värde som registrerades tidigare från översiktssidan för det registrerade programmet.

  3. Spara filen.

Lägg till autentiseringsprovidern

De msal paketen används för att tillhandahålla autentisering i programmet. msal-browser-paketet används för att hantera autentiseringsflödet och msal-react-paketet används för att integrera msal-browser med React. addEventCallback används för att lyssna efter händelser som inträffar under autentiseringsprocessen, till exempel när en användare loggar in. Metoden setActiveAccount används för att ange det aktiva kontot för programmet, som används för att avgöra vilken användares information som ska visas.

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

    import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import { PublicClientApplication, EventType } from '@azure/msal-browser';
import { msalConfig } from './authConfig';

import 'bootstrap/dist/css/bootstrap.min.css';
import './styles/index.css';

/**
* MSAL should be instantiated outside of the component tree to prevent it from being re-instantiated on re-renders.
* For more, visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
*/
const msalInstance = new PublicClientApplication(msalConfig);

// Default to using the first account if no account is active on page load
if (!msalInstance.getActiveAccount() && msalInstance.getAllAccounts().length > 0) {
    // Account selection logic is app dependent. Adjust as needed for different use cases.
    msalInstance.setActiveAccount(msalInstance.getActiveAccount()[0]);
}

// Listen for sign-in event and set active account
msalInstance.addEventCallback((event) => {
    if (event.eventType === EventType.LOGIN_SUCCESS && event.payload.account) {
        const account = event.payload.account;
        msalInstance.setActiveAccount(account);
    }
});

const root = createRoot(document.getElementById('root'));
root.render(
    <App instance={msalInstance}/>
);

  2. Spara filen.

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

Lägg till huvudprogramkomponenten

Alla delar av appen som kräver autentisering måste omslutas i komponenten MsalProvider. Du anger en instance variabel som anropar useMsal-kroken för att hämta PublicClientApplication-instansen och sedan skicka den till MsalProvider. Komponenten MsalProvider gör PublicClientApplication-instansen tillgänglig i hela appen via Reacts kontext-API. Alla komponenter under MsalProvider har åtkomst till PublicClientApplication-instansen via kontext samt alla krokar och komponenter som tillhandahålls av msal-react.

  1. I mappen src öppnar du App.jsx och ersätter innehållet i filen med följande kodfragment:

    import { MsalProvider, AuthenticatedTemplate, useMsal, UnauthenticatedTemplate } from '@azure/msal-react';
import { Container, Button } from 'react-bootstrap';
import { PageLayout } from './components/PageLayout';
import { IdTokenData } from './components/DataDisplay';
import { loginRequest } from './authConfig';

import './styles/App.css';

/**
* Most applications will need to conditionally render certain components based on whether a user is signed in or not. 
* msal-react provides 2 easy ways to do this. AuthenticatedTemplate and UnauthenticatedTemplate components will 
* only render their children if a user is authenticated or unauthenticated, respectively. For more, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
*/
const MainContent = () => {
    /**
    * useMsal is hook that returns the PublicClientApplication instance,
    * that tells you what msal is currently doing. For more, visit:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/hooks.md
    */
    const { instance } = useMsal();
    const activeAccount = instance.getActiveAccount();

    const handleRedirect = () => {
        instance
            .loginRedirect({
                ...loginRequest,
                prompt: 'create',
            })
            .catch((error) => console.log(error));
    };
    return (
        <div className="App">
            <AuthenticatedTemplate>
                {activeAccount ? (
                    <Container>
                        <IdTokenData idTokenClaims={activeAccount.idTokenClaims} />
                    </Container>
                ) : null}
            </AuthenticatedTemplate>
            <UnauthenticatedTemplate>
                <Button className="signInButton" onClick={handleRedirect} variant="primary">
                    Sign up
                </Button>
            </UnauthenticatedTemplate>
        </div>
    );
};


/**
* msal-react is built on the React context API and all parts of your app that require authentication must be 
* wrapped in the MsalProvider component. You will first need to initialize an instance of PublicClientApplication 
* then pass this to MsalProvider as a prop. All components underneath MsalProvider will have access to the 
* PublicClientApplication instance via context as well as all hooks and components provided by msal-react. For more, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
*/
const App = ({ instance }) => {
    return (
        <MsalProvider instance={instance}>
            <PageLayout>
                <MainContent />
            </PageLayout>
        </MsalProvider>
    );
};

export default App;

  2. Spara filen.

Nästa steg

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