Poradnik: Dodawanie komponentów funkcjonalnych logowania i wylogowywania w aplikacji jednostronicowej React

Dotyczy: Najemcy pracowników Najemcy zewnętrzni (dowiedz się więcej)

W tym samouczku skonfigurujesz aplikację jednostronicową React do uwierzytelnienia. W części 1 tej serii , w, stworzyłeś React SPA i przygotowałeś je do uwierzytelniania. W tym samouczku dowiesz się, jak dodać przepływy uwierzytelniania, integrując funkcjonalne komponenty Microsoft Authentication Library (MSAL) do swojej aplikacji oraz budując responsywny interfejs użytkownika (UI) dla swojej aplikacji.

W tym samouczku nauczysz się następujących rzeczy:

• Dodawanie składników funkcjonalnych do aplikacji
• Tworzenie sposobu wyświetlania informacji o profilu użytkownika
• Stwórz układ, który wyświetla doświadczenie logowania i wylogowywania
• Dodawanie procesów logowania i wylogowywania

Warunki wstępne

• Ukończenie kroków i wymagań wstępnych w Samouczek: przygotowanie aplikacji do uwierzytelniania.

Dodawanie składników funkcjonalnych do aplikacji

Składniki funkcjonalne to bloki konstrukcyjne aplikacji React i służą do tworzenia doświadczeń logowania i wylogowania w aplikacji.

Dodawanie składnika NavigationBar

Pasek nawigacyjny zapewni obsługę logowania i wylogowywania w aplikacji. Zmienna instancji wcześniej ustawiona w pliku index.js będzie używana do wywoływania metod logowania i wylogowania, co przekieruje użytkownika z powrotem do strony logowania.

1. Otwórz src/components/NavigationBar.jsx i dodaj następujący fragment kodu;

   import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal } from '@azure/msal-react';
   import { Navbar, Button } from 'react-bootstrap';
   import { loginRequest } from '../authConfig';
   
   export const NavigationBar = () => {
       const { instance } = useMsal();
   
       const handleLoginRedirect = () => {
           instance.loginRedirect(loginRequest).catch((error) => console.log(error));
       };
   
       const handleLogoutRedirect = () => {
           instance.logoutRedirect().catch((error) => console.log(error));
       };
   
       /**
        * 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.
        */
       return (
           <>
               <Navbar bg="primary" variant="dark" className="navbarStyle">
                   <a className="navbar-brand" href="/">
                       Microsoft identity platform
                   </a>
                   <AuthenticatedTemplate>
                       <div className="collapse navbar-collapse justify-content-end">
                           <Button variant="warning" onClick={handleLogoutRedirect}>
                               Sign out
                           </Button>
                       </div>
                   </AuthenticatedTemplate>
                   <UnauthenticatedTemplate>
                       <div className="collapse navbar-collapse justify-content-end">
                           <Button onClick={handleLoginRedirect}>Sign in</Button>
                       </div>
                   </UnauthenticatedTemplate>
               </Navbar>
           </>
       );
   };
   

2. Zapisz plik.

Dodawanie składnika PageLayout

Składnik PageLayout będzie używany do wyświetlania głównej zawartości aplikacji i można go dostosować w celu uwzględnienia dowolnej dodatkowej zawartości, która ma być wyświetlana na każdej stronie aplikacji. Informacje o profilu użytkownika będą wyświetlane poprzez przekazywanie ich za pomocą props.

1. Otwórz src/components/PageLayout.jsx i dodaj następujący fragment kodu;

   import { AuthenticatedTemplate } from '@azure/msal-react';
   
   import { NavigationBar } from './NavigationBar.jsx';
   
   export const PageLayout = (props) => {
       /**
        * 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.
        */
       return (
           <>
               <NavigationBar />
               <br />
               <h5>
                   <center>Welcome to the Microsoft Authentication Library For React Tutorial</center>
               </h5>
               <br />
               {props.children}
               <br />
               <AuthenticatedTemplate>
                   <footer>
                       <center>
                           How did we do?
                           <a
                               href="https://forms.office.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR_ivMYEeUKlEq8CxnMPgdNZUNDlUTTk2NVNYQkZSSjdaTk5KT1o4V1VVNS4u"
                               rel="noopener noreferrer"
                               target="_blank"
                           >
                               {' '}
                               Share your experience!
                           </a>
                       </center>
                   </footer>
               </AuthenticatedTemplate>
           </>
       );
   }
   

2. Zapisz plik.

Dodawanie składnika DataDisplay

Składnik DataDisplay będzie używany do wyświetlania informacji o profilu użytkownika i tabeli oświadczeń, która zostanie utworzona w następnej sekcji samouczka. Element IdTokenData będzie używany do wyświetlania żądań w tokenie ID.

1. Otwórz src/components/DataDisplay.jsx i dodaj następujący fragment kodu;

   import { Table } from 'react-bootstrap';
   import { createClaimsTable } from '../utils/claimUtils';
   
   import '../styles/App.css';
   
   export const IdTokenData = (props) => {
       const tokenClaims = createClaimsTable(props.idTokenClaims);
   
       const tableRow = Object.keys(tokenClaims).map((key, index) => {
           return (
               <tr key={key}>
                   {tokenClaims[key].map((claimItem) => (
                       <td key={claimItem}>{claimItem}</td>
                   ))}
               </tr>
           );
       });
       return (
           <>
               <div className="data-area-div">
                   <p>
                       See below the claims in your <strong> ID token </strong>. For more information, visit:{' '}
                       <span>
                           <a href="https://docs.microsoft.com/en-us/azure/active-directory/develop/id-tokens#claims-in-an-id-token">
                               docs.microsoft.com
                           </a>
                       </span>
                   </p>
                   <div className="data-area-div">
                       <Table responsive striped bordered hover>
                           <thead>
                               <tr>
                                   <th>Claim</th>
                                   <th>Value</th>
                                   <th>Description</th>
                               </tr>
                           </thead>
                           <tbody>{tableRow}</tbody>
                       </Table>
                   </div>
               </div>
           </>
       );
   };
   

2. Zapisz plik.

Następne kroki

Poradnik: logowanie się i wylogowywanie z React SPA