Partilhar via


Tutorial: Criar um aplicativo de página única do React 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 criando arquivos necessários para autenticação e autorização.

Neste tutorial:

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

Pré-requisitos

  • Conclusão dos pré-requisitos e etapas em Tutorial: Registrar uma inscrição.
  • Embora qualquer IDE que ofereça 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 de Downloads . Para usuários de 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.

  1. Abra o Visual Studio e selecione Criar um novo projeto.

  2. Procure e escolha o modelo Standalone JavaScript React Project e selecione Next.

  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 para cada alteração salva.

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

    ├─── 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 bootstrap

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

  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, em seguida, selecione Instalar pacote. Repita para @azure/MSAL-react.
  3. Procure e instale o react-bootstrap.
  4. Selecione Fechar.

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

Criando o arquivo de configuração de autenticação

  1. Na pasta src, abra authConfig.js e adicione o seguinte trecho 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 seguintes valores pelos valores do centro de administração do Microsoft Entra.

    • clientId - O identificador da aplicação, também referido como o cliente. Substitua Enter_the_Application_Id_Here pelo valor de ID do aplicativo (cliente) que foi registrado anteriormente na página de visão geral do aplicativo registrado.
    • authority - Este é composto por duas partes:
      • A instância é o ponto de extremidade do provedor de nuvem. Verifique com os diferentes pontos finais disponíveis em Nuvens nacionais.
      • O ID do Locatário é o identificador do locatário onde o aplicativo está registrado. Substitua Enter_the_Tenant_Info_Here pelo valor de ID do diretório (locatário) que foi registrado anteriormente na página de visão geral do aplicativo registrado.
  3. Guarde o ficheiro.

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

Todas as partes do aplicativo que exigem autenticação devem ser encapsuladas MsalProvider no componente. Você instancia um PublicClientApplication e, em seguida, passa-o para MsalProvider.

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

    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. Guarde o ficheiro.

Próximos passos