Tutorial: Adicionar componentes funcionais de entrada e saída em um aplicativo de página única do React

Aplica-se a: Locatários da força de trabalho Locatários externos (saiba mais)

Neste tutorial, você configurará um SPA (aplicativo de página única) react para autenticação. Na parte 1 desta série, você criou um REACT SPA e o preparou para autenticação. Neste tutorial, você aprenderá a adicionar fluxos de autenticação adicionando componentes funcionais da MSAL (Biblioteca de Autenticação da Microsoft) ao seu aplicativo e criar uma interface do usuário (interface do usuário) responsiva para seu aplicativo.

Neste tutorial, você:

Pré-requisitos

• Conclusão dos pré-requisitos e etapas no Tutorial: Preparar um aplicativo para autenticação.

Adicionar componentes funcionais ao aplicativo

Componentes funcionais são os blocos de construção de aplicativos React e são usados para criar as experiências de entrada e saída em seu aplicativo.

Adicionar o componente NavigationBar

A barra de navegação fornecerá a experiência de entrada e saída para o aplicativo. A variável de instância definida anteriormente no arquivo index.js será usada para chamar os métodos de login e logout, o que redirecionará o usuário de volta para a página de login.

1. Abra src/components/NavigationBar.jsx e adicione o seguinte snippet de código;

   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. Salve o arquivo.

Adicionar o componente PageLayout

O componente PageLayout será usado para exibir o conteúdo principal do aplicativo e pode ser personalizado para incluir qualquer conteúdo adicional que você deseja exibir em cada página do seu aplicativo. As informações de perfil do usuário serão exibidas pela transmissão das informações por meio de propriedades.

1. Abra src/components/PageLayout.jsx e adicione o seguinte snippet de código;

   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. Salve o arquivo.

Adicionar o componente DataDisplay

O DataDisplay componente será usado para exibir as informações de perfil do usuário e uma tabela de declarações, que será criada na próxima seção do tutorial. O IdTokenData componente será usado para exibir as declarações no token de ID.

1. Abra src/components/DataDisplay.jsx e adicione o seguinte snippet de código;

   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. Salve o arquivo.

Próximas etapas