Tutorial: Como criar um SPA do React para autenticação em um locatário externo

Artigo
07/01/2024

Esse tutorial é a segunda parte de uma série que demonstra como criar um aplicativo de página única [proteção de acesso privilegiado (SPA)] do React e prepará-lo para autenticação por meio do centro de administração do Microsoft Entra. Na Parte 1 desta série, você registrou um aplicativo e configurou fluxos de usuário em seu locatário externo. Este tutorial demonstra como criar um SPA do React por meio de npm e como criar arquivos necessários para autenticação e autorização.

Neste tutorial;

Como criar um projeto de React no Visual Studio Code
Instalar pacotes de identidade e inicialização
Definir as configurações do aplicativo

Pré-requisitos

Tutorial: Como preparar seu locatário externo para autenticar usuários em um SPA do React.
Embora qualquer ambiente de desenvolvimento integrado (IDE) compatível com aplicativos do React possa ser utilizado, esse tutorial usa o Visual Studio Code.
Node.js.

Como criar um projeto do React

Abra o Visual Studio Code, selecione Arquivo>Abrir Pasta.... Navegue e selecione o local no qual criar seu projeto.
Abra um novo terminal selecione Terminal>Novo Terminal.
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 se abre 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
```

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

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

Instalar dependências do aplicativo

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

Na barra Terminal, selecione o ícone + para criar um novo terminal. Uma nova janela de terminal se abre, permitindo que o outro terminal continue em execução em segundo plano.
Se necessário, navegue até reactspalocal e insira os comandos a seguir no terminal para instalar os pacotes msal e bootstrap .
```
npm install @azure/msal-browser @azure/msal-react
npm install react-bootstrap bootstrap
```

Crie o arquivo de configuração de autenticação, ,authConfig.js

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', // This is the ONLY mandatory field that you need to supply.
        authority: 'https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/', // Replace the placeholder with your tenant subdomain 
        redirectUri: '/', // Points to window.location.origin. You must register this URI on Azure Portal/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/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"
// };

Substitua os valores a seguir pelos valores do portal do Azure:
- Localize o valor Enter_the_Application_Id_Here e substitua-o pela ID do aplicativo (clientId) do aplicativo registrado no centro de administração do Microsoft Entra.
- Em Autoridade, localize Enter_the_Tenant_Subdomain_Here e substitua-o pelo subdomínio do seu locatário. Por exemplo, se o domínio primário do locatário for contoso.onmicrosoft.com, use contoso. Se você não tiver o nome do locatário, saiba como ler os detalhes do locatário.
Salve o arquivo.

Usar um domínio de URL personalizado (opcional)

Use um domínio personalizado para marcar totalmente a URL de autenticação. Do ponto de vista do usuário, os usuários permanecem no seu domínio durante o processo de autenticação, em vez de serem redirecionados para o nome de domínio ciamlogin.com.

Use as etapas a seguir para usar um domínio personalizado:

Use as etapas em Habilitar domínios de URL personalizados para aplicativos em locatários externos para habilitar domínio de URL personalizado para seu locatário externo.
Em seu arquivo authConfig.js, localize o objeto auth e, em seguida:
1. Atualize o valor da propriedade authority para https://Enter_the_Custom_Domain_Here/Enter_the_Tenant_ID_Here. Substitua Enter_the_Custom_Domain_Here pelo domínio de URL personalizado e Enter_the_Tenant_ID_Here pela ID do locatário. Se você não tiver o nome do locatário, saiba como ler os detalhes do locatário.
2. Adicione a propriedade knownAuthorities com um valor [Insira_o_Domínio_Personalizado_Aqui].

Depois de fazer as alterações no arquivo authConfig.js, se a URL de domínio personalizado for login.contoso.com e sua ID de locatário for aaaabbbb-0000-cccc-1111-dddd2222eeee, o arquivo deverá ser semelhante ao seguinte snippet:

//...
const msalConfig = {
    auth: {
        authority: process.env.AUTHORITY || 'https://login.contoso.com/aaaabbbb-0000-cccc-1111-dddd2222eeee', 
        knownAuthorities: ["login.contoso.com"],
        //Other properties
    },
    //...
};

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.

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/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 = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App instance={msalInstance}/>
);

Próxima etapa

Parte 3: Manipular fluxos de autenticação em um SPA do React

Compartilhar via