Habilitar a autenticação no seu aplicativo do React usando o Azure Active Directory B2C

  • Artigo

Este artigo mostra como adicionar a autenticação do Azure Active Directory B2C (Azure AD B2C) ao seu próprio SPA (aplicativo de página única) do React. Saiba como integrar um aplicativo React à biblioteca de autenticação do MSAL para React.

Use este artigo com o artigo relacionado intitulado Configurar autenticação em um exemplo de aplicativo de página única React. Substitua o aplicativo React de exemplo pelo seu aplicativo React. Depois de concluir as etapas neste artigo, seu aplicativo aceitará as credenciais por meio do Azure AD B2C.

Pré-requisitos

Examine os pré-requisitos e as etapas de integração no artigo Configurar a autenticação em um exemplo de aplicativo de página única React.

Etapa 1: criar um projeto do aplicativo React

Você pode usar um aplicativo React ou criar um aplicativo React. Para criar um projeto, execute os seguintes comandos no shell de comando:

npx create-react-app my-app
cd my-app

Etapa 2: instalar as dependências

Para instalar as bibliotecas do MSAL Navegador e do MSAL React em seu aplicativo, execute os comandos a seguir no shell de comando:

npm i @azure/msal-browser  @azure/msal-react

Instale o react-router-dom versão 5.*. O pacote react-router-dom contém associações para usar o Roteador React em aplicativos Web. Execute o seguinte comando em seu shell de comando:

npm i react-router-dom@5.3.3

Instale o Bootstrap para React (opcional, para interface do usuário):

npm i bootstrap react-bootstrap

Etapa 3: adicionar os componentes de autenticação

O código de exemplo é composto pelos componentes a seguir. Adicione esses componentes do aplicativo React de exemplo ao seu próprio aplicativo:

  • public/index.html – o processo de agrupamento usa esse arquivo como um modelo e injeta os componentes React no elemento <div id="root">. Se você abri-lo diretamente no navegador, verá uma página vazia.

  • src/authConfig.js – um arquivo de configuração que contém informações sobre o seu provedor de identidade do Azure AD B2C e o serviço da API Web. O aplicativo React usa essas informações para estabelecer uma relação de confiança com o Azure AD B2C, conectar e desconectar o usuário, adquirir tokens e validá-los.

  • src/index.js – o ponto de entrada JavaScript para seu aplicativo. Este arquivo JavaScript:

    • Monta o componente App como raiz no elemento <div id="root"> da página public/index.html.
    • Inicia a biblioteca MSAL PublicClientApplication com a configuração definida no arquivo authConfig.js. A React MSAL deve ser instanciada fora da árvore de componentes para evitar que ela seja reinstalada em renderizações.
    • Após a instanciação da biblioteca MSAL, o código JavaScript passa msalInstance como propriedades para os componentes do aplicativo. Por exemplo, <App instance={msalInstance} />.

  • src/App.jsx – define os componentes App e Pages:

    • O componente App é o componente de nível superior do seu aplicativo. Ele encapsula tudo entre componentes MsalProvider. Todos os componentes abaixo de MsalProvider têm acesso à instância PublicClientApplication por meio de contexto e todos os ganchos e componentes fornecidos pelo MSAL React. O componente App monta o PageLayout e seu elemento filho Pages.

    • O componente Pages registra e cancela o registro dos retornos de chamada do evento MSAL. Os eventos são usados para lidar com erros de MSAL. Ele também define a lógica de roteamento do aplicativo.

    Importante

    Se o nome do arquivo de componente do aplicativo for App.js, altere-o para App.jsx.

  • src/pages/Hello.jsx – demonstre como chamar um recurso protegido com o token de portador OAuth2.

    • Ele usa o gancho useMsal que retorna a instância PublicClientApplication.
    • Com a instância PublicClientApplication, ele adquire um token de acesso para chamar a API REST.
    • Invoca a função callApiWithToken para buscar os dados da API REST e renderiza o resultado usando o componente DataDisplay.

  • src/components/NavigationBar.jsx – A barra de navegação superior do aplicativo que tem os botões de entrada, saída, edição de perfil e redefinição da API REST.

    • Ele usa AuthenticatedTemplate e UnauthenticatedTemplate, que só renderizam seus filhos se um usuário for autenticado ou não autenticado, respectivamente.
    • Manipule o logon e saia com eventos de janela pop-up e redirecionamento.

  • src/components/PageLayout.jsx

    • O layout comum que fornece aos usuários uma experiência consistente durante sua navegação de uma página a outra. O layout inclui elementos comuns da interface do usuário, como o cabeçalho do aplicativo, o componente NavigationBar, o rodapé e seus componentes filho.
    • Ele usa o AuthenticatedTemplate, que renderizará seus filhos somente se um usuário for autenticado.

  • src/components/DataDisplay.jsx – renderiza o retorno de dados da chamada à API REST.

  • src/styles/App.css e src/styles/index.css – arquivos de estilo CSS para o aplicativo.

  • src/fetch.js – busca solicitações HTTP para a API REST.

Etapa 4: Configurar o aplicativo React

Depois de adicionar os componentes de autenticação, configure seu aplicativo React com as configurações do Azure AD B2C. As configurações do provedor de identidade do Azure AD B2C são definidas no arquivo authConfig.js.

Para diretrizes, confira Configurar seu aplicativo React.

Etapa 5: Executar o aplicativo React

  1. No Visual Studio Code, abra um novo terminal e execute os seguintes comandos:

    npm install && npm update
npm start

    A janela de console exibe o número da porta em que o aplicativo está hospedado:

    Listening on port 3000...

  2. Para chamar uma API REST, siga as diretrizes de como executar a API Web

  3. No navegador, vá para http://localhost:3000 para exibir o aplicativo

Próximas etapas