Udostępnij za pośrednictwem

Samouczek: tworzenie aplikacji jednostronicowej react i przygotowywanie jej do uwierzytelniania

  • Artykuł

Dotyczy obiekty: Zielony okrąg z białym symbolem znacznika wyboru. Najemcy Workforce Zielony okrąg z białym symbolem znacznika wyboru. Zewnętrzni najemcy (dowiedzieć się więcej)

W tym samouczku utworzysz jednostronicową aplikację React (SPA) i przygotujesz ją do uwierzytelniania przy użyciu platformy tożsamości firmy Microsoft. W tym samouczku pokazano, jak utworzyć aplikację jednostronicową React przy użyciu npm, utworzyć pliki potrzebne do uwierzytelniania i autoryzacji oraz dodać szczegóły najemcy do kodu źródłowego. Aplikacja może być używana dla pracowników w dzierżawie pracowników lub dla klientów korzystających z dzierżawy zewnętrznej.

W tym samouczku dowiesz się, jak:

  • Tworzenie nowego projektu React
  • Instalowanie pakietów wymaganych do uwierzytelniania
  • Tworzenie struktury plików i dodawanie kodu do pliku serwera
  • Dodaj szczegóły dzierżawy do pliku konfiguracji uwierzytelniania

Warunki wstępne

  • Najemca siły roboczej. Możesz użyć swojego katalogu domyślnego lub skonfigurować nowego najemcę.
  • Zarejestruj nową aplikację w centrum administracyjnym firmy Microsoft Entra przy użyciu następującej konfiguracji. Aby uzyskać więcej informacji, zobacz Zarejestruj aplikację.
    • Nazwa: identity-client-spa
    • Obsługiwane typy kont: konta tylko w tym katalogu organizacyjnym (pojedyncza dzierżawa).
    • Konfiguracja platformy: jednostronicowa aplikacja (SPA).
    • identyfikator URI przekierowania: http://localhost:3000/.

Tworzenie nowego projektu React

  1. Otwórz program Visual Studio Code, wybierz pozycję Plik>Otwórz folder.... Przejdź do i wybierz lokalizację, w której chcesz utworzyć projekt.

  2. Otwórz nowy terminal, wybierając pozycję Terminal>New Terminal.

  3. Uruchom następujące polecenia, aby utworzyć nowy projekt React o nazwie reactspalocal, przejdź do nowego katalogu i uruchom projekt React. Przeglądarka internetowa zostanie otwarta z adresem http://localhost:3000/ domyślnie. Przeglądarka pozostaje otwarta i ponownie renderuje przy każdej zapisanej zmianie.

    npx create-react-app reactspalocal
cd reactspalocal
npm start

  4. Utwórz dodatkowe foldery i pliki, aby uzyskać następującą strukturę folderów:

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

Instalowanie pakietów identity i bootstrap

Aby umożliwić uwierzytelnianie użytkowników, należy zainstalować pakiety npm związane z tożsamością w projekcie. Do stylizacji projektu zostanie użyty Bootstrap.

  1. Na pasku terminalu wybierz ikonę +, aby utworzyć nowy terminal. Zostanie otwarte oddzielne okno terminala, a poprzedni terminal węzła będzie nadal działał w tle.

  2. Upewnij się, że wybrano prawidłowy katalog (reactspalocal), a następnie wprowadź następujące polecenie w terminalu, aby zainstalować odpowiednie pakiety msal i bootstrap.

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

Dodaj szczegóły dzierżawy do konfiguracji MSAL

Plik authConfig.js zawiera ustawienia konfiguracji przepływu uwierzytelniania i służy do konfigurowania MSAL.js przy użyciu wymaganych ustawień uwierzytelniania.

  1. W folderze src otwórz authConfig.js i dodaj następujący fragment kodu:

    
 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. Zastąp następujące wartości wartości wartościami z centrum administracyjnego firmy Microsoft Entra.

    • clientId — identyfikator aplikacji, nazywany również klientem. Zastąp Enter_the_Application_Id_Here wartością Identyfikatora Aplikacji (klienta) , którą zapisano wcześniej na stronie przeglądu zarejestrowanej aplikacji.
    • authority — składa się z dwóch części:
      • wystąpienie to punkt końcowy dostawcy usług w chmurze. Sprawdź różne dostępne punkty końcowe w chmurach krajowych .
      • Identyfikator dzierżawy jest identyfikatorem najemcy, w którym zarejestrowano aplikację. Zastąp wartość Enter_the_Tenant_Info_Here identyfikatorem usługi Directory (dzierżawy) zarejestrowaną wcześniej na stronie przeglądu zarejestrowanej aplikacji.

  3. Zapisz plik.

Dodawanie dostawcy uwierzytelniania

Pakiety msal są używane do zapewnienia uwierzytelniania w aplikacji. Pakiet msal-browser służy do obsługi przepływu uwierzytelniania, a pakiet msal-react służy do integracji msal-browser z platformą React. addEventCallback służy do nasłuchiwania zdarzeń występujących podczas procesu uwierzytelniania, takich jak po pomyślnym zalogowaniu użytkownika. Metoda setActiveAccount służy do ustawiania aktywnego konta dla aplikacji, które służy do określania, które informacje użytkownika mają być wyświetlane.

  1. W folderze src otwórz index.js i zastąp zawartość pliku następującym fragmentem kodu, aby użyć pakietów msal i stylu bootstrap:

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

Aby dowiedzieć się więcej o tych pakietach, zapoznaj się z dokumentacją w msal-browser i msal-react.

Dodawanie głównego składnika aplikacji

Wszystkie części aplikacji, które wymagają uwierzytelniania, muszą być opakowane w składniku MsalProvider. Ustawiasz zmienną instance, która wywołuje hook useMsal, aby uzyskać instancję PublicClientApplication, a następnie przekazuje ją do MsalProvider. Składnik MsalProvider udostępnia wystąpienie PublicClientApplication w całej aplikacji za pośrednictwem React Context API. Wszystkie komponenty pod MsalProvider mają dostęp do instancji PublicClientApplication za pośrednictwem kontekstu, a także wszystkich hooków i komponentów udostępnianych przez msal-react.

  1. W folderze src otwórz App.jsx i zastąp zawartość pliku następującym fragmentem kodu:

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

Następne kroki

Samouczek: tworzenie składników do logowania się i wylogowywanie się w jednostronicowej aplikacji React