Compartilhar via

Tutorial: Adicionar uma entrada e uma saída a um SPA do React para o locatário externo

  • Artigo

Esse tutorial é a parte final de uma série que demonstra como compilar um aplicativo de página única (SPA) do React e o prepara para autenticação usando o centro de administração do Microsoft Entra. Na parte 3 desta série, você criou uma SPA do React no Visual Studio Code e o configurou para autenticação. Esta etapa final mostra como adicionar a funcionalidade de entrada e saída ao aplicativo.

Neste tutorial;

  • Crie um layout que exiba a experiência de entrada e saída
  • Substitua a função padrão para renderizar informações autenticadas
  • Entre e saia do aplicativo usando o fluxo do usuário

Pré-requisitos

Altere nome do arquivo e adicione função para renderizar informações autenticadas

Por padrão, o aplicativo é executado por meio de um arquivo JavaScript chamado App.js. Ele precisa ser alterado para .jsx, que é uma extensão que permite ao desenvolvedor escrever HTML no React.

  1. Verifique se App.js foi renomeado para App.jsx.

  2. Substitua o código existente pelo seguinte.

     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;

Executar seu projeto e entrar

Todos os snippets de código necessários foram adicionados, portanto, o aplicativo agora pode ser chamado e testado em um navegador da Web.

  1. O aplicativo já deve estar em execução no terminal. Caso contrário, execute o comando a seguir para iniciar seu aplicativo.

    npm start

  2. Abra um navegador da Web e navegue até http://localhost:3000/ se você não for redirecionado automaticamente.

  3. Para os fins desse tutorial, escolha a opção Entrar usando Pop-up.

  4. Depois que a janela pop-up for exibida com as opções de entrada, selecione a conta com a qual deseja entrar.

  5. Uma segunda janela pode aparecer indicando que um código será enviado para seu endereço de email. Se isso acontecer, selecione Enviar código. Abra o email do remetente “Equipe de conta da Microsoft” e insira o código de uso único de sete dígitos. Depois de inserido, selecione Entrar.

  6. Para Permanecer conectado, selecione Não ou Sim.

  7. O aplicativo solicita permissão para entrar e acessar dados. Selecione Aceitar para continuar.

Sair do aplicativo

  1. Para sair do aplicativo, selecione Sair na barra de navegação.
  2. Uma janela é exibida perguntando de qual conta sair.
  3. Após a saída bem-sucedida, uma janela final é exibida aconselhando você a fechar todas as janelas do navegador.

Confira também