Tutorial: Criar um SPA React para autenticação em um locatário externo

Artigo
07/25/2024

Este tutorial é a parte 2 de uma série que demonstra a criação de um aplicativo de página única React (protegendo o acesso privilegiado (SPA)) e preparando-o para autenticação usando o 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 React usando npm e criando arquivos necessários para autenticação e autorização.

Neste tutorial;

Criar um projeto React no Visual Studio Code
Instalar pacotes de identidade e bootstrap
Definir as configurações para o aplicativo

Pré-requisitos

Tutorial: Prepare seu locatário externo para autenticar usuários em um SPA React.
Embora qualquer ambiente de desenvolvimento integrado (IDE) que ofereça suporte a aplicativos React possa ser usado, este tutorial usa o Visual Studio Code.
Node.js.

Criar um projeto React

Abra o Visual Studio Code, selecione File>Open Folder.... Navegue até o local para criar seu projeto e selecione-o.
Abra um novo terminal selecionando Terminal>New Terminal.
Execute os seguintes comandos para criar um novo projeto React com o nome reactspalocal, mude para o novo diretório e inicie o projeto React. Um navegador da Web é aberto com o endereço http://localhost:3000/ por padrão. O navegador permanece aberto e renderiza novamente para cada alteração salva.
```
npx create-react-app reactspalocal
cd reactspalocal
npm start
```

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

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 de aplicativos

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 é usado.

Na barra Terminal, selecione o + ícone para criar um novo terminal. Uma nova janela do terminal é aberta, permitindo que o outro terminal continue funcionando em segundo plano.
Se necessário, navegue até reactspalocal e insira os seguintes comandos no terminal para instalar os msal pacotes 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 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', // 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 seguintes valores pelos valores do portal do Azure:
- Encontre o Enter_the_Application_Id_Here valor e substitua-o pela ID do aplicativo (clientId) do aplicativo que você registrou no centro de administração do Microsoft Entra.
- Em Autoridade, localize-o Enter_the_Tenant_Subdomain_Here e substitua-o pelo subdomínio do seu inquilino. Por exemplo, se o domínio principal do locatário for contoso.onmicrosoft.com, use contoso. Se não tiver o nome do inquilino, saiba como ler os detalhes do inquilino.
Guarde o ficheiro.

Usar 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 ciamlogin.com nome de domínio.

Use as seguintes etapas para usar um domínio personalizado:

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

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

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

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.

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/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óximo passo

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

Partilhar via