Partilhar via

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

  • Artigo

Este tutorial é a parte final de uma série que demonstra a criação de um aplicativo de página única (SPA) React e prepará-lo para autenticação usando o centro de administração do Microsoft Entra. Na parte 3 desta série, você criou um SPA 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;

  • Criar um layout de página e adicionar a experiência de entrada e saída
  • Substitua a função padrão para renderizar informações autenticadas
  • Entrar e sair do aplicativo usando o fluxo de usuário

Pré-requisitos

Alterar nome de arquivo e adicionar 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 que um desenvolvedor escreva HTML no React.

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

  2. Substitua o código existente pelo seguinte trecho:

     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;

Execute o seu projeto e inicie sessão

Todos os trechos de código necessários foram adicionados, então o aplicativo agora pode ser testado em um navegador da web.

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

    npm start

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

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

  4. Depois que a janela pop-up aparecer com as opções de login, selecione a conta com a qual entrar.

  5. Uma segunda janela pode aparecer indicando que um código será enviado para o seu endereço de e-mail. Se isso acontecer, selecione Enviar código. Abra o e-mail da equipa da conta Microsoft do remetente e introduza o código de utilização única de sete dígitos. Depois de inserido, selecione Entrar.

  6. Em Permanecer conectado, você pode selecionar Não ou Sim.

  7. A aplicação pede permissão para iniciar sessão e aceder aos 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 será exibida aconselhando você a fechar todas as janelas do navegador.

Consulte também