Tutorial: Preparar um React aplicação de página única (SPA) para autenticação num inquilino do cliente

2023-09-22

No artigo anterior, registou uma aplicação e configurou fluxos de utilizador no seu ID de Microsoft Entra para o inquilino dos clientes. Este tutorial demonstra como criar uma React aplicação de página única com npm e criar ficheiros necessários para autenticação e autorização.

Neste tutorial;

Criar um projeto React no Visual Studio Code
Instalar pacotes de identidade e bootstrap
Configurar as definições da aplicação

Pré-requisitos

Conclusão dos pré-requisitos e passos em Preparar o inquilino do cliente para autenticar os utilizadores numa aplicação de página única (SPA) React.
Embora qualquer ambiente de desenvolvimento integrado (IDE) que suporte React aplicações possa ser utilizado, este tutorial utiliza o Visual Studio Code. Pode transferi-lo aqui.
Node.js.

Criar um projeto React

Abra o Visual Studio Code, selecione Ficheiro>Abrir Pasta.... Navegue para e selecione a localização na qual pretende criar o projeto.
Abra um novo terminal ao selecionar Terminal>Novo 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. Por predefinição, será aberto um browser com o endereço http://localhost:3000/ . O browser permanece aberto e é novamente composto por cada alteração guardada.
```
npx create-react-app reactspalocal
cd reactspalocal
npm start
```

Crie pastas e ficheiros 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 aplicações

Os pacotes npm relacionados com a identidade têm de ser instalados no projeto para ativar a autenticação do utilizador. Para o estilo do projeto, é utilizado o Bootstrap .

Na barra terminal , selecione o + ícone para criar um novo terminal. Será aberta uma nova janela de terminal que permite que o outro terminal continue em execução em segundo plano.
Se necessário, navegue para reactspalocal e introduza 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
```

Criar o ficheiro de configuração de autenticação ,authConfig.js

Na pasta src , abra authConfig.js e adicione o seguinte fragmento 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:
- Localize o Enter_the_Application_Id_Here valor e substitua-o pelo ID da Aplicação (clientId) da aplicação que registou 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 primário do inquilino for contoso.onmicrosoft.com, utilize contoso. Se não tiver o nome do inquilino, saiba como ler os detalhes do inquilino.
Guarde o ficheiro.

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

Todas as partes da aplicação que necessitam de autenticação têm de ser encapsuladas no MsalProvider componente. Instancia uma PublicClientApplication e, em seguida, transmite-a para MsalProvider.

Na pasta src , abra index.js e substitua o conteúdo do ficheiro pelo fragmento de código seguinte para utilizar os pacotes e o msal estilo 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}/>
);

Passos seguintes

Configurar SPA para autenticação

Partilhar via