Partilhar via

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

Aplica-se a: círculo verde com um símbolo de marca de seleção branco que indica que o conteúdo a seguir se aplica aos locatários da força de trabalho. Locatários da força de trabalho Círculo verde com um símbolo de marca de seleção branco que indica que o conteúdo a seguir se aplica a locatários externos. Inquilinos externos (saiba 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

Criar um projeto JavaScript e instalar dependências

  1. Entre no centro de administração do Microsoft Entra como Administrador Global.

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

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

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

    npm init -y

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

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

  6. 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:

    /**
* 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 
*/
const msalConfig = {
    auth: {
        clientId: "Enter_the_Application_Id_Here",
        // WORKFORCE TENANT
        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: ["User.Read"],
};

/**
* 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"
// };

// exporting config object for jest
if (typeof exports !== 'undefined') {
    module.exports = {
        msalConfig: msalConfig,
        loginRequest: loginRequest,
    };
}

  2. Substitua os seguintes valores pelos valores do centro de administração do Microsoft 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 Tenant do tenant 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

  • Last updated on