Partilhar via

Tutorial: Preparar um aplicativo JavaScript de página única para autenticação

  • Artigo

Aplica-se a: círculo verde com um símbolo de marca de verificação branco. Os arrendatários do Workforce círculo verde com um símbolo de marca de verificação branco. Inquilinos externos (saber mais)

Neste tutorial, você criará um aplicativo JavaScript de página única (SPA) e o preparará para autenticação usando a plataforma de identidade da Microsoft. Este tutorial demonstra como criar um SPA JavaScript usando npm, criar arquivos necessários para autenticação e autorização e adicionar os detalhes do locatário ao código-fonte. O aplicativo pode ser usado para funcionários em um locatário de força de trabalho ou para clientes que usam um locatário externo.

Neste tutorial, você:

  • Criar um novo projeto JavaScript
  • Instalar pacotes necessários para autenticação
  • Crie sua estrutura de arquivos e adicione código ao arquivo do servidor
  • Adicione os detalhes do locatário ao arquivo de configuração de autenticação

Pré-requisitos

  • Um trabalhador arrendatário. Você pode usar o seu diretório padrão ou configurar um novo inquilino.
  • Registe uma nova aplicação no centro de administração do Microsoft Entra com a seguinte configuração. Para obter mais informações, consulte Registrar um aplicativo.
    • Nome: identity-client-spa
    • Tipos de conta suportados: Contas apenas neste diretório organizacional (Inquilino único).
    • Configuração da plataforma: Aplicação de página única (SPA).
    • Redirecionar URI: http://localhost:3000/.

Criar um projeto JavaScript e instalar dependências

  1. Abra o Visual Studio Code, selecione Arquivo>Abrir Pasta.... Navegue até o local para criar seu projeto e selecione-o.

  2. Abra um novo terminal selecionando Terminal>Novo Terminal.

  3. Execute o seguinte comando para criar um novo projeto JavaScript:

    npm init -y

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

    └── public
    └── authConfig.js
    └── authPopup.js
    └── authRedirect.js
    └── claimUtils.js
    └── index.html
    └── signout.html
    └── styles.css
    └── ui.js    
└── server.js
└── package.json

  5. No Terminal, execute o seguinte comando para instalar as dependências necessárias para o projeto:

    npm install express morgan @azure/msal-browser

Adicionar código ao arquivo do servidor

Express é uma estrutura de aplicação web para Node.js. Ele é usado para criar um servidor que hospeda o aplicativo. Morgan é o middleware que registra solicitações HTTP no console. O arquivo do servidor é usado para hospedar essas dependências e contém as rotas para o aplicativo. A autenticação e a autorização são tratadas pelo Microsoft Authentication Library for JavaScript (MSAL.js).

  1. Adicione o seguinte código ao arquivo server.js:

    const express = require('express');
const morgan = require('morgan');
const path = require('path');

const DEFAULT_PORT = process.env.PORT || 3000;

// initialize express.
const app = express();

// Configure morgan module to log all requests.
app.use(morgan('dev'));

// serve public assets.
app.use(express.static('public'));

// serve msal-browser module
app.use(express.static(path.join(__dirname, "node_modules/@azure/msal-browser/lib")));

// set up a route for signout.html
app.get('/signout', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/signout.html'));
});

// set up a route for redirect.html
app.get('/redirect', (req, res) => {
    res.sendFile(path.join(__dirname + '/public/redirect.html'));
});

// set up a route for index.html
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(DEFAULT_PORT, () => {
    console.log(`Sample app listening on port ${DEFAULT_PORT}!`);
});

module.exports = app;

Neste código, a variável app é inicializada com o módulo express, que é usado para servir os ativos públicos. navegador MSAL é disponibilizado como um recurso estático e é usado para iniciar o fluxo de autenticação.

Adicionando os detalhes do locatário à configuração do MSAL

O arquivo authConfig.js contém as definições de configuração para o fluxo de autenticação e é usado para configurar MSAL.js com as configurações necessárias para autenticação.

  1. Abra público/authConfig.js e adicione o seguinte código:

    const msalConfig = {
    auth: {

        clientId: "Enter_the_Application_Id_Here", // This is the ONLY mandatory field that you need to supply
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", //  Replace the placeholder with your tenant info
        redirectUri: '/', // You must register this URI on App Registration. Defaults to window.location.href e.g. http://localhost:3000/
        navigateToLoginRequestUrl: true, // 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.
        storeAuthStateInCookie: false, // set this to true if you have to support IE
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case msal.LogLevel.Error:
                        console.error(message);
                        return;
                    case msal.LogLevel.Info:
                        console.info(message);
                        return;
                    case msal.LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case msal.LogLevel.Warning:
                        console.warn(message);
                        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://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
*/
const loginRequest = {
    scopes: [],
};

/**
* An optional silentRequest object can be used to achieve silent SSO
* between applications by providing a "login_hint" property.
*/

// const silentRequest = {
//   scopes: ["openid", "profile"],
//   loginHint: "example@domain.net"
// };

  2. Substitua os seguintes valores pelos valores do centro de administração do Entra:

    • Encontre o valor Enter_the_Application_Id_Here e substitua-o pelo Application ID (clientId) do aplicativo que você registrou no centro de administração do Microsoft Entra.
    • Encontre o valor Enter_the_Tenant_Info_Here e substitua-o pelo ID do Locatário do locatário da força de trabalho que criaste no centro de administração do Microsoft Entra.

  3. Salve o arquivo.

Próximo passo

Manipular fluxos de autenticação numa SPA JavaScript