Compartilhar via

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

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

Neste tutorial, você criará um SPA (aplicativo de página única) JavaScript 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 da 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
  • Criar sua estrutura de arquivos e adicionar código ao arquivo de servidor
  • Adicionar 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 e selecione o local no qual criar seu projeto.

  3. Abra um novo terminal selecione 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 aplicativo Web para Node.js. É usado para criar um servidor que hospeda o aplicativo. Morgan é o middleware que registra solicitações HTTP no console. O arquivo de servidor é usado para hospedar essas dependências e contém as rotas para o aplicativo. A aquisição e a renovação de tokens são manipuladas pela Biblioteca de Autenticação da Microsoft (MSAL.js) para JavaScript.

  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;

Nesse código, a variável de aplicativo é inicializada com o módulo expresso é usada para atender aos ativos públicos. O MSAL-browser é servido como um ativo estático e é utilizado para iniciar o fluxo de autenticação.

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

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

  1. Abra public/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:

    • Localize o valor Enter_the_Application_Id_Here e substitua-o pelo ID do Aplicativo (clientId) do aplicativo registrado no Centro de Administração do Microsoft Entra.
    • Localize o valor Enter_the_Tenant_Info_Here e substitua-o pela ID de Locatário do locatário da força de trabalho que você criou no centro de administração do Microsoft Entra.

  3. Salve o arquivo.

Próxima etapa

Manipular fluxos de autenticação em um SPA JavaScript

  • Last updated on