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

Após a conclusão do registro, um projeto React pode ser criado usando um ambiente de desenvolvimento integrado (IDE). Este tutorial demonstra como criar um aplicativo React de página única usando npm e criar arquivos necessários para autenticação e autorização.

Neste tutorial:

• Criar um novo projeto React
• Definir as configurações do aplicativo
• Instalar pacotes de identidade e inicialização
• Adicionar o código de autenticação ao aplicativo

Pré-requisitos

• Conclusão dos pré-requisitos e etapas no Tutorial: Registrar um aplicativo.
• Embora qualquer IDE que dê suporte a aplicativos React possa ser usado, os IDEs do Visual Studio a seguir são usados para este tutorial. Eles podem ser baixados na página Downloads. Para usuários do macOS, é recomendável usar o Visual Studio Code.
  • Visual Studio 2022
  • Visual Studio Code
• Node.js.

Criar um novo projeto React

Use as guias a seguir para criar um projeto React no IDE.

Visual Studio

1. Abra o Visual Studio e selecione Criar projeto.

2. Pesquise e escolha o modelo Projeto React de JavaScript Autônomo e selecione Avançar.

3. Insira um nome para o projeto, como reactspalocal.

4. Escolha um local para o projeto ou aceite a opção padrão e selecione Avançar.

5. Em Informações adicionais, selecione Criar.

6. Na barra de ferramentas, selecione Iniciar sem Depuração para iniciar o aplicativo. 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.

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

   ├─── public
   │   └─── index.html
   └───src
       ├─── components
       │   └─── PageLayout.jsx
       │   └─── ProfileData.jsx
       │   └─── SignInButton.jsx
       │   └─── SignOutButton.jsx
       └── App.css
       └── App.jsx
       └── authConfig.js
       └── graph.js
       └── index.css
       └── index.js
   

Visual Studio Code

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
       ├─── components
       │   └─── PageLayout.jsx
       │   └─── ProfileData.jsx
       │   └─── SignInButton.jsx
       │   └─── SignOutButton.jsx
       └── App.css
       └── App.jsx
       └── authConfig.js
       └── graph.js
       └── index.css
       └── 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, a Inicialização será usada.

Visual Studio

1. No Gerenciador de Soluções, clique com o botão direito do mouse na opção npm e selecione instalar novos pacotes npm.
2. Procure @azure/MSAL-browser e selecione Instalar pacote. Repita para @azure/MSAL-react.
3. Pesquise e instale react-bootstrap.
4. Selecione Fechar.

Visual Studio Code

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
   

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

Criar o arquivo de configuração de autenticação

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

   /*
    * Copyright (c) Microsoft Corporation. All rights reserved.
    * Licensed under the MIT License.
    */
   
   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",
           authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
           redirectUri: "http://localhost:3000",
       },
       cache: {
           cacheLocation: "sessionStorage", // This configures where your cache will be stored
           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: ["User.Read"]
   };
   
   /**
    * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
    */
   export const graphConfig = {
       graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
   };
   

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 ponto de extremidade 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.

Modifique index.js para incluir o provedor de autenticação

Todas as partes do aplicativo que exigem autenticação devem ser encapsuladas no componente MsalProvider. Você cria uma instância de PublicClientApplication e passa-a para MsalProvider.

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

   import React from 'react';
   import ReactDOM from 'react-dom';
   import './index.css';
   import App from './App';
   
   import { PublicClientApplication } from '@azure/msal-browser';
   import { MsalProvider } from '@azure/msal-react';
   import { msalConfig } from './authConfig';
   
   // Bootstrap components
   import 'bootstrap/dist/css/bootstrap.min.css';
   
   const msalInstance = new PublicClientApplication(msalConfig);
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   
   /**
    * We recommend wrapping most or all of your components in the MsalProvider component. It's best to render the MsalProvider as close to the root as possible.
    */
    root.render(
     <React.StrictMode>
         <MsalProvider instance={msalInstance}>
             <App />
         </MsalProvider>
     </React.StrictMode>
   );
   

2. Salve o arquivo.

Próximas etapas

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