Lernprogramm: Hinzufügen und Abmelden funktionaler Komponenten in einer React-Einzelseiten-App

Gilt für: Mitarbeitermandanten Externe Mandanten (weitere Informationen)

In diesem Lernprogramm konfigurieren Sie eine einzelseitige React-Anwendung (SPA) für die Authentifizierung. In Teil 1 dieser Reihe haben Sie einen React SPA erstellt und für die Authentifizierung vorbereitet. In diesem Lernprogramm erfahren Sie, wie Sie Authentifizierungsflüsse hinzufügen, indem Sie Ihrer App Funktionale Komponenten der Microsoft-Authentifizierungsbibliothek (MSAL) hinzufügen und eine reaktionsfähige Benutzeroberfläche (UI) für Ihre App erstellen.

In diesem Tutorial führen Sie Folgendes durch:

• Hinzufügen funktionaler Komponenten zur Anwendung
• Eine Möglichkeit erstellen, die Profilinformationen des Benutzers anzuzeigen
• Erstellen Sie ein Layout, das das An- und Abmeldeerlebnis darstellt.
• Hinzufügen der An- und Abmeldeerfahrungen

Voraussetzungen

• Abschluss der Voraussetzungen und Schritte in Tutorial: Vorbereiten einer Anwendung für die Authentifizierung.

Hinzufügen funktionaler Komponenten zur Anwendung

Funktionale Komponenten sind die Bausteine von React-Apps und werden verwendet, um die Anmelde- und Abmeldeerfahrungen in Ihrer Anwendung zu erstellen.

Fügen Sie die NavigationBar-Komponente hinzu

Die Navigationsleiste stellt die Anmelde- und Abmeldeumgebung für die App bereit. Die zuvor in der index.jsDatei festgelegte Instanzvariable wird verwendet, um die Anmelde- und Abmeldemethoden aufzurufen, die den Benutzer zurück zur Anmeldeseite weiterleiten.

1. Öffnen Sie src/components/NavigationBar.jsx , und fügen Sie den folgenden Codeausschnitt hinzu.

   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. Speichern Sie die Datei.

Fügen sie die PageLayout-Komponente hinzu

Die PageLayout-Komponente wird verwendet, um den Hauptinhalt der App anzuzeigen, und kann angepasst werden, um alle zusätzlichen Inhalte einzuschließen, die auf jeder Seite Ihrer App angezeigt werden sollen. Die Profilinformationen der Benutzenden werden angezeigt, indem die Informationen über Props übergeben werden.

1. Öffnen Sie src/components/PageLayout.jsx , und fügen Sie den folgenden Codeausschnitt hinzu.

   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. Speichern Sie die Datei.

Hinzufügen der DataDisplay-Komponente

Die DataDisplay Komponente wird verwendet, um die Profilinformationen des Benutzers und eine Tabelle mit Ansprüchen anzuzeigen, die im nächsten Abschnitt des Lernprogramms erstellt wird. Die IdTokenData Komponente wird verwendet, um die Ansprüche im ID-Token anzuzeigen.

1. Öffnen Sie src/components/DataDisplay.jsx , und fügen Sie den folgenden Codeausschnitt hinzu.

   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. Speichern Sie die Datei.

Nächste Schritte

Lernprogramm: Anmelden und Abmelden bei einem React SPA