Share via

Tutorial: Agregar inicio y cierre de sesión a un React SPA para un inquilino externo

  • Artículo

Este tutorial es la última parte de una serie que muestra cómo compilar una aplicación de página única (SPA) de React y prepararla para la autenticación mediante el Centro de administración de Microsoft Entra. En la tercera parte de esta serie, creó una SPA de React en Visual Studio Code y la configuró para la autenticación. En este último paso se muestra cómo agregar la funcionalidad de inicio de sesión y cierre de sesión a la aplicación.

En este tutorial,

  • Crear un diseño de página y agregar la experiencia de inicio y cierre de sesión
  • Reemplazar la función predeterminada para representar información autenticada
  • Iniciar y cerrar sesión en la aplicación utilizando el flujo de usuario

Requisitos previos

Cambiar nombre de archivo y agregar función para representar información autenticada

De forma predeterminada, la aplicación se ejecutará a través de un archivo JavaScript denominado App.js. Deberá cambiarse a .jsx, que es una extensión que permite al desarrollador escribir HTML en React.

  1. Asegúrese de que App.js se ha cambiado de nombre a App.jsx.

  2. Reemplace el código existente por el fragmento de código siguiente:

     import { MsalProvider, AuthenticatedTemplate, useMsal, UnauthenticatedTemplate } from '@azure/msal-react';
 import { Container, Button } from 'react-bootstrap';
 import { PageLayout } from './components/PageLayout';
 import { IdTokenData } from './components/DataDisplay';
 import { loginRequest } from './authConfig';

 import './styles/App.css';

 /**
  * 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. For more, visit:
  * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
  */
 const MainContent = () => {
     /**
      * useMsal is hook that returns the PublicClientApplication instance,
      * that tells you what msal is currently doing. For more, visit:
      * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/hooks.md
      */
     const { instance } = useMsal();
     const activeAccount = instance.getActiveAccount();

     const handleRedirect = () => {
         instance
             .loginRedirect({
                 ...loginRequest,
                 prompt: 'create',
             })
             .catch((error) => console.log(error));
     };
     return (
         <div className="App">
             <AuthenticatedTemplate>
                 {activeAccount ? (
                     <Container>
                         <IdTokenData idTokenClaims={activeAccount.idTokenClaims} />
                     </Container>
                 ) : null}
             </AuthenticatedTemplate>
             <UnauthenticatedTemplate>
                 <Button className="signInButton" onClick={handleRedirect} variant="primary">
                     Sign up
                 </Button>
             </UnauthenticatedTemplate>
         </div>
     );
 };


 /**
  * msal-react is built on the React context API and all parts of your app that require authentication must be 
  * wrapped in the MsalProvider component. You will first need to initialize an instance of PublicClientApplication 
  * then pass this to MsalProvider as a prop. All components underneath MsalProvider will have access to the 
  * PublicClientApplication instance via context as well as all hooks and components provided by msal-react. For more, visit:
  * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
  */
 const App = ({ instance }) => {
     return (
         <MsalProvider instance={instance}>
             <PageLayout>
                 <MainContent />
             </PageLayout>
         </MsalProvider>
     );
 };

 export default App;

Ejecución del proyecto e inicio de sesión

Se han agregado todos los fragmentos de código necesarios, por lo que la aplicación ahora se podrá probar en un explorador web.

  1. La aplicación ya debe estar ejecutándose en el terminal. Si no es así, ejecute el siguiente comando para iniciar la aplicación.

    npm start

  2. Abra un explorador web y vaya a http://localhost:3000/ si no se le redirige automáticamente.

  3. Para los fines de este tutorial, elija la opción Iniciar sesión con el elemento emergente.

  4. Después de que aparezca la ventana emergente con las opciones de inicio de sesión, seleccione la cuenta con la que quiera iniciar sesión.

  5. Podría aparecer una segunda ventana indicando que se enviará un código a su dirección de correo electrónico. Si esto sucediera, seleccione Enviar código. Abra el correo electrónico del remitente equipo de cuentas Microsoft, e introduzca el código de un solo uso de siete dígitos. Una vez introducido, seleccione Guardar.

  6. En Mantener sesión iniciada, puede seleccionar No o Sí.

  7. La aplicación solicita permiso para iniciar sesión y acceder a los datos. Seleccione Aceptar para continuar.

Cerrar sesión en la aplicación

  1. Para cerrar la sesión de la aplicación, seleccione Cerrar sesión en la barra de navegación.
  2. Aparece una ventana en la que se pregunta en qué cuenta quiere cerrar sesión.
  3. Tras cerrar sesión correctamente, aparece una ventana final que aconseja cerrar todas las ventanas del explorador.

Consulte también