Compartilhar via

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

  • Artigo

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

Neste tutorial:

  • Adicionar componentes funcionais ao aplicativo
  • Criar uma maneira de exibir as informações de perfil do usuário
  • Crie um layout que exiba a experiência de entrada e saída
  • Adicionar as experiências de entrada e saída

Pré-requisitos

Adicionar componentes funcionais ao aplicativo

Os componentes funcionais são os blocos de construção dos 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 do aplicativo. A variável de instância definida anteriormente no arquivo de index.js será usada para chamar os métodos de entrada e sair, que redirecionarão o usuário para a página de entrada.

  1. Abra src/components/NavigationBar.jsx e adicione o seguinte trecho 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ê queira exibir em todas as páginas do seu aplicativo. As informações do perfil do usuário serão exibidas passando as informações através de adereços.

  1. Abra src/components/PageLayout.jsx e adicione o seguinte trecho 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 componente DataDisplay 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 componente IdTokenData será usado para exibir as declarações no token de ID.

  1. Abra src/components/DataDisplay.jsx e adicione o seguinte trecho 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óximos passos

Tutorial: Iniciar sessão e terminar sessão numa SPA em React