Condividi tramite

Esercitazione: Aggiungere componenti funzionali di login e logout in un'app a pagina singola React

Si applica a: cerchio verde con un simbolo di segno di spunta bianco che indica il contenuto seguente si applica ai tenant della forza lavoro. I tenant della forza lavoro Cerchio verde con un simbolo di segno di spunta bianco che indica che il contenuto seguente si applica ai tenant esterni. Tenant esterni (altre informazioni)

In questa esercitazione si configurerà un'applicazione a pagina singola React per l'autenticazione. Nella parte 1 di questa serie, hai creato un'applicazione a pagina singola React e l'hai preparata per l'autenticazione. In questa esercitazione si apprenderà come aggiungere flussi di autenticazione aggiungendo Microsoft Authentication Library (MSAL) componenti funzionali all'app e creare un'interfaccia utente reattiva per l'app.

In questa esercitazione, farai:

  • Aggiungere componenti funzionali all'applicazione
  • Creare un modo per visualizzare le informazioni sul profilo dell'utente
  • Creare un layout che visualizzi l'esperienza di accesso e disconnessione
  • Aggiungere le esperienze di accesso e disconnessione

Prerequisiti

Aggiungere componenti funzionali all'applicazione

I componenti funzionali sono i blocchi fondamentali delle app React e vengono usati per creare le esperienze di accesso e uscita nell'applicazione.

Aggiungere il componente NavigationBar

La barra di navigazione fornirà l'esperienza di accesso e disconnessione per l'app. La variabile di istanza impostata in precedenza nel file index.js verrà usata per chiamare i metodi di accesso e disconnessione, che reindirizzeranno l'utente alla pagina di accesso.

  1. Aprire src/components/NavigationBar.jsx e aggiungere il frammento di codice seguente;

    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. Salvare il file.

Aggiungere il componente PageLayout

Il componente PageLayout verrà usato per visualizzare il contenuto principale dell'app e può essere personalizzato per includere qualsiasi contenuto aggiuntivo da visualizzare in ogni pagina dell'app. Le informazioni sul profilo dell'utente verranno visualizzate passando i dati tramite props.

  1. Aprire src/components/PageLayout.jsx e aggiungere il frammento di codice seguente;

    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. Salvare il file.

Aggiungere il componente DataDisplay

Il componente DataDisplay verrà usato per visualizzare le informazioni sul profilo dell'utente e una tabella di attestazioni, che verrà creata nella sezione successiva dell'esercitazione. Il componente IdTokenData verrà usato per visualizzare le attestazioni nel token ID.

  1. Aprire src/components/DataDisplay.jsx e aggiungere il frammento di codice seguente;

    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. Salvare il file.

Passaggi successivi

Esercitazione: Accedere e disconnettersi da un'Applicazione a Pagina Unica React

  • Last updated on