Compartilhar via

Tutorial: Criar um aplicativo de página única do React e prepará-lo para autenticação

Aplica-se a: Círculo verde com um símbolo de marca de seleção branco. Locatários da força de trabalho Círculo verde com um símbolo de marca de seleção branco. Locatários externos (saiba mais)

Neste tutorial, você criará um SPA (aplicativo de página única) do React e o preparará para autenticação usando a plataforma de identidade da Microsoft. Este tutorial demonstra como criar um REACT SPA usando npm, criar arquivos necessários para autenticação e autorização e adicionar os detalhes do locatário ao código-fonte. O aplicativo pode ser usado para funcionários em um locatário da força de trabalho ou para clientes que usam um locatário externo.

Neste tutorial, você:

  • Criar um novo projeto do React
  • Instalar pacotes necessários para autenticação
  • Criar sua estrutura de arquivos e adicionar código ao arquivo de servidor
  • Adicionar os detalhes do locatário ao arquivo de configuração de autenticação

Pré-requisitos

Criar um novo projeto do React

  1. Abra o Visual Studio Code, selecione Arquivo>Abrir Pasta.... Navegue e selecione o local no qual criar seu projeto.

  2. Abra um novo terminal selecione Terminal>Novo Terminal.

  3. Execute os comandos a seguir para criar um novo projeto React com o nome reactspalocal, altere para o novo diretório e inicie o projeto React. Um navegador da Web será aberto com o endereço http://localhost:3000/ por padrão. O navegador permanece aberto e renderiza novamente a cada alteração salva.

    npx create-react-app reactspalocal
cd reactspalocal
npm start

  4. Crie pastas e arquivos adicionais para obter a seguinte estrutura de pasta:

    ├─── public
│   └─── index.html
└───src
    └─── styles
    │   └─── App.css
    │   └─── index.css
    ├─── utils
    │   └─── claimUtils.js
    ├─── components
    │   └─── DataDisplay.jsx
    │   └─── NavigationBar.jsx
    │   └─── PageLayout.jsx
    └── App.jsx
    └── authConfig.js
    └── index.js

Instalar pacotes de identidade e inicialização

Os pacotes npm relacionados à identidade devem ser instalados no projeto para habilitar a autenticação do usuário. Para estilo de projeto, Bootstrap será usado.

  1. Na barra Terminal, selecione o ícone + para criar um novo terminal. Uma janela de terminal separada será aberta com o terminal do nó anterior ainda sendo executado em segundo plano.

  2. Verifique se o diretório correto está selecionado (reactspalocal) e insira o seguinte no terminal para instalar os pacotes msal e bootstrap relevantes.

    npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap

Adicionar os detalhes do locatário à configuração da MSAL

O arquivo authConfig.js contém as configurações do fluxo de autenticação e é usado para definir MSAL.js com as configurações necessárias para autenticação.

  1. Na pastasrc, abra authConfig.js e adicione o seguinte snippet de código:

    
 import { LogLevel } from '@azure/msal-browser';

 /**
 * Configuration object to be passed to MSAL instance on creation. 
 * For a full list of MSAL.js configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
 */

 export const msalConfig = {
     auth: {
         clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply.
         authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', // Replace the placeholder with your tenant info
         redirectUri: 'http://localhost:3000/redirect', // Points to window.location.origin. You must register this URI on Microsoft Entra admin center/App Registration.
         postLogoutRedirectUri: '/', // Indicates the page to navigate after logout.
         navigateToLoginRequestUrl: false, // If "true", will navigate back to the original request location before processing the auth code response.
     },
     cache: {
         cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
         storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
     },
     system: {
         loggerOptions: {
             loggerCallback: (level, message, containsPii) => {
                 if (containsPii) {
                     return;
                 }
                 switch (level) {
                     case LogLevel.Error:
                         console.error(message);
                         return;
                     case LogLevel.Info:
                         console.info(message);
                         return;
                     case LogLevel.Verbose:
                         console.debug(message);
                         return;
                     case LogLevel.Warning:
                         console.warn(message);
                         return;
                     default:
                         return;
                 }
             },
         },
     },
 };

 /**
 * Scopes you add here will be prompted for user consent during sign-in.
 * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
 * For more information about OIDC scopes, visit: 
 * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
 export const loginRequest = {
     scopes: [],
 };

 /**
 * An optional silentRequest object can be used to achieve silent SSO
 * between applications by providing a "login_hint" property.
 */
 // export const silentRequest = {
 //     scopes: ["openid", "profile"],
 //     loginHint: "example@domain.net"
 // };

  2. Substitua os valores a seguir pelos valores obtidos do Centro de administração do Microsoft Entra.

    • clientId - O identificador do aplicativo, também conhecido como o cliente. Substitua Enter_the_Application_Id_Here pelo valor da ID do Aplicativo (cliente) que foi registrado anteriormente na página de visão geral do aplicativo registrado.
    • authority – Isso é composto de duas partes:
      • A Instância é o endpoint do provedor de nuvem. Verifique com os diferentes pontos de extremidade disponíveis em Nuvens nacionais.
      • A ID do Locatário é o identificador do locatário em que o aplicativo está registrado. Substitua Enter_the_Tenant_Info_Here pelo valor da ID (locatário) do Diretório que foi registrada anteriormente na página de visão geral do aplicativo registrado.

  3. Salve o arquivo.

Adicionar o provedor de autenticação

Os msal pacotes são usados para fornecer autenticação no aplicativo. O msal-browser pacote é usado para lidar com o fluxo de autenticação e o msal-react pacote é usado para se integrar msal-browser ao React. addEventCallback é usado para escutar eventos que ocorrem durante o processo de autenticação, como quando um usuário faz logon com êxito. O setActiveAccount método é usado para definir a conta ativa do aplicativo, que é usada para determinar quais informações do usuário exibir.

  1. Na pasta src, abra o arquivo index.js e substitua o conteúdo do arquivo pelo seguinte snippet de código para utilizar os pacotes msal e o estilo inicial do bootstrap:

    import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import { PublicClientApplication, EventType } from '@azure/msal-browser';
import { msalConfig } from './authConfig';

import 'bootstrap/dist/css/bootstrap.min.css';
import './styles/index.css';

/**
* MSAL should be instantiated outside of the component tree to prevent it from being re-instantiated on re-renders.
* For more, visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
*/
const msalInstance = new PublicClientApplication(msalConfig);

// Default to using the first account if no account is active on page load
if (!msalInstance.getActiveAccount() && msalInstance.getAllAccounts().length > 0) {
    // Account selection logic is app dependent. Adjust as needed for different use cases.
    msalInstance.setActiveAccount(msalInstance.getActiveAccount()[0]);
}

// Listen for sign-in event and set active account
msalInstance.addEventCallback((event) => {
    if (event.eventType === EventType.LOGIN_SUCCESS && event.payload.account) {
        const account = event.payload.account;
        msalInstance.setActiveAccount(account);
    }
});

const root = createRoot(document.getElementById('root'));
root.render(
    <App instance={msalInstance}/>
);

  2. Salve o arquivo.

Para saber mais sobre esses pacotes, consulte a documentação em msal-browser e msal-react.

Adicionar o componente principal do aplicativo

Todas as partes do aplicativo que exigem autenticação devem ser encapsuladas no componente MsalProvider. Você define uma instance variável que chama o useMsal hook para obter a PublicClientApplication instância, e em seguida, passa-a para MsalProvider. O componente MsalProvider disponibiliza a instância PublicClientApplication em todo o aplicativo por meio da API de Contexto do React. Todos os componentes abaixo do MsalProvider terão acesso à instância PublicClientApplication via contexto, assim como a todos os hooks e componentes fornecidos por msal-react.

  1. Na pasta src , abra App.jsx e substitua o conteúdo do arquivo pelo seguinte snippet de código:

    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;

  2. Salve o arquivo.

Próximas etapas

Tutorial: Criar componentes para entrar e sair em um aplicativo de página única do React