Tutorial: Adicionar adicionar entrada e saída em seu aplicativo Web Node.js

Artigo
08/27/2024

Este tutorial é a parte final de uma série que demonstra a criação de um aplicativo Web Node.js e prepará-lo para autenticação usando o centro de administração do Microsoft Entra. Na parte 2 desta série, você criou um aplicativo Web Node.js e organizou todos os arquivos necessários. Neste tutorial, você adicionará login, inscrição e logout ao aplicativo Web Node.js. Para simplificar a adição de autenticação ao aplicativo Web Node.js, use a Biblioteca de Autenticação da Microsoft (MSAL) para Nó. O fluxo de entrada usa o protocolo de autenticação OpenID Connect (OIDC), que conecta os usuários com segurança.

Neste tutorial, você:

Adicionar lógica de entrada e saída
Exibir declarações de token de ID
Execute o aplicativo e teste a experiência de entrada e saída.

Pré-requisitos

Você concluiu as etapas em Tutorial: Preparar um aplicativo Web Node.js para autenticação.

Criar objeto de configuração MSAL

No editor de códigos, abra authConfig.js arquivo e adicione o seguinte código:

require('dotenv').config();

const TENANT_SUBDOMAIN = process.env.TENANT_SUBDOMAIN || 'Enter_the_Tenant_Subdomain_Here';
const REDIRECT_URI = process.env.REDIRECT_URI || 'http://localhost:3000/auth/redirect';
const POST_LOGOUT_REDIRECT_URI = process.env.POST_LOGOUT_REDIRECT_URI || 'http://localhost:3000';

/**
 * Configuration object to be passed to MSAL instance on creation.
 * For a full list of MSAL Node configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-node/docs/configuration.md
 */
const msalConfig = {
    auth: {
        clientId: process.env.CLIENT_ID || 'Enter_the_Application_Id_Here', // 'Application (client) ID' of app registration in Azure portal - this value is a GUID
        authority: process.env.AUTHORITY || `https://${TENANT_SUBDOMAIN}.ciamlogin.com/`, // replace "Enter_the_Tenant_Subdomain_Here" with your tenant name
        clientSecret: process.env.CLIENT_SECRET || 'Enter_the_Client_Secret_Here', // Client secret generated from the app registration in Azure portal
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                console.log(message);
            },
            piiLoggingEnabled: false,
            logLevel: 'Info',
        },
    },
};

module.exports = {
    msalConfig,
    REDIRECT_URI,
    POST_LOGOUT_REDIRECT_URI,
    TENANT_SUBDOMAIN
};

O msalConfig objeto contém um conjunto de opções de configuração que você usa para personalizar o comportamento de seus fluxos de autenticação.

No arquivo authConfig.js , substitua:

Enter_the_Application_Id_Here com o ID do aplicativo (cliente) do aplicativo que você registrou anteriormente.
Enter_the_Tenant_Subdomain_Here e substitua-o pelo subdomínio Directory (locatário). 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.
Enter_the_Client_Secret_Here com o valor de segredo do aplicativo que você copiou anteriormente.

Se você usar o arquivo .env para armazenar suas informações de configuração:

No editor de códigos, abra o arquivo .env e adicione o código a seguir.

    CLIENT_ID=Enter_the_Application_Id_Here
    TENANT_SUBDOMAIN=Enter_the_Tenant_Subdomain_Here
    CLIENT_SECRET=Enter_the_Client_Secret_Here
    REDIRECT_URI=http://localhost:3000/auth/redirect
    POST_LOGOUT_REDIRECT_URI=http://localhost:3000

Substitua os espaços reservados e Enter_the_Tenant_Subdomain_Here Enter_the_Client_Secret_Here , conforme explicado Enter_the_Application_Id_Hereanteriormente.

Você exporta msalConfig, TENANT_SUBDOMAIN REDIRECT_URIe POST_LOGOUT_REDIRECT_URI variáveis no arquivo authConfig.js, o que as torna acessíveis onde quer que você precise do arquivo.

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
    },
    //...
};

Adicionar rotas expressas

As rotas Express fornecem os pontos de extremidade que nos permitem executar operações como entrar, sair e exibir declarações de token de ID.

Ponto de entrada do aplicativo

No editor de códigos, abra o arquivo routes/index.js e adicione o seguinte código:

const express = require('express');
const router = express.Router();

router.get('/', function (req, res, next) {
    res.render('index', {
        title: 'MSAL Node & Express Web App',
        isAuthenticated: req.session.isAuthenticated,
        username: req.session.account?.username !== '' ? req.session.account?.username : req.session.account?.name,
    });
});    
module.exports = router;

A / rota é o ponto de entrada para o aplicativo. Ele renderiza a exibição views/index.hbs que você criou anteriormente em Compilar componentes da interface do usuário do aplicativo. isAuthenticated é uma variável booleana que determina o que você vê na exibição.

No editor de códigos, abra o arquivo routes/auth.js e adicione o código de auth.js a ele.
No editor de códigos, abra o arquivo controller/authController.js e adicione o código de authController.js a ele.
No editor de códigos, abra o arquivo auth/AuthProvider.js e adicione o código de AuthProvider.js a ele.

O /signin, /signout e /redirect rotas são definidas no arquivo routes/auth.js , mas você implementa sua lógica na classe auth/AuthProvider.js .

O login método manipula a /signin rota:
- Ele inicia o fluxo de entrada acionando a primeira perna do fluxo de código de autenticação.
- Ele inicializa uma instância confidencial do aplicativo cliente usando o objeto de configuração MSAL, msalConfig, que você criou anteriormente.
```
    const msalInstance = this.getMsalInstance(this.config.msalConfig);
```
  O getMsalInstance método é definido como:
```
    getMsalInstance(msalConfig) {
        return new msal.ConfidentialClientApplication(msalConfig);
    }
```
- A primeira etapa do fluxo de código de autenticação gera uma URL de solicitação de código de autorização e, em seguida, redireciona para essa URL para obter o código de autorização. Esta primeira etapa é implementada no redirectToAuthCodeUrl método. Observe como usamos o método getAuthCodeUrl do MSAL para gerar URL de código de autorização:
```
//...
const authCodeUrlResponse = await msalInstance.getAuthCodeUrl(req.session.authCodeUrlRequest);
//...
```
  Em seguida, redirecionamos para o próprio URL do código de autorização.
```
//...
res.redirect(authCodeUrlResponse);
//...
```
O handleRedirect método manipula a /redirect rota:
- Você define essa URL como URI de redirecionamento para o aplicativo Web no centro de administração do Microsoft Entra anteriormente em Registrar o aplicativo Web.
- Este ponto de extremidade implementa a segunda perna de usos de fluxo de código de autenticação. Ele usa o código de autorização para solicitar um token de ID usando o método acquireTokenByCode da MSAL.
```
//...
const tokenResponse = await msalInstance.acquireTokenByCode(authCodeRequest, req.body);
//...
```
- Depois de receber uma resposta, você pode criar uma sessão Express e armazenar as informações que desejar nela. Você precisa incluir isAuthenticated e defini-lo como true:
```
//...        
req.session.idToken = tokenResponse.idToken;
req.session.account = tokenResponse.account;
req.session.isAuthenticated = true;
//...
```

O logout método manipula a /signout rota:

async logout(req, res, next) {
    /**
     * Construct a logout URI and redirect the user to end the
        * session with Azure AD. For more information, visit:
        * https://docs.microsoft.com/azure/active-directory/develop/v2-protocols-oidc#send-a-sign-out-request
        */
    const logoutUri = `${this.config.msalConfig.auth.authority}${TENANT_SUBDOMAIN}.onmicrosoft.com/oauth2/v2.0/logout?post_logout_redirect_uri=${this.config.postLogoutRedirectUri}`;

    req.session.destroy(() => {
        res.redirect(logoutUri);
    });
}

Ele inicia a solicitação de saída.
Quando você deseja sair do aplicativo, não é suficiente encerrar a sessão do usuário. Você deve redirecionar o usuário para o logoutUri. Caso contrário, o usuário poderá se autenticar novamente em seus aplicativos sem reinserir suas credenciais. Se o nome do seu locatário for contoso, o logoutUri será semelhante ao https://contoso.ciamlogin.com/contoso.onmicrosoft.com/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000.

Exibir declarações de token de ID

No editor de códigos, abra o arquivo routes/users.js e adicione o seguinte código:

const express = require('express');
const router = express.Router();

// custom middleware to check auth state
function isAuthenticated(req, res, next) {
    if (!req.session.isAuthenticated) {
        return res.redirect('/auth/signin'); // redirect to sign-in route
    }

    next();
};

router.get('/id',
    isAuthenticated, // check if user is authenticated
    async function (req, res, next) {
        res.render('id', { idTokenClaims: req.session.account.idTokenClaims });
    }
);        
module.exports = router;

Se o usuário for autenticado, a /id rota exibirá declarações de token de ID usando a exibição views/id.hbs . Você adicionou esse modo de exibição anteriormente em Criar componentes da interface do usuário do aplicativo.

Para extrair uma declaração de token de ID específica, como nome próprio:

const givenName = req.session.account.idTokenClaims.given_name

Finalize seu aplicativo Web

No editor de códigos, abra app.js arquivo e adicione o código de app.js a ele.
No editor de códigos, abra server.js arquivo e adicione o código de server.js a ele.
No editor de códigos, abra package.json arquivo e atualize a scripts propriedade para:
```
"scripts": {
"start": "node server.js"
}
```

Executar e testar o aplicativo Web

No terminal, verifique se você está na pasta do projeto que contém seu aplicativo Web, como ciam-sign-in-node-express-web-app.
No seu terminal, execute o seguinte comando:
```
npm start
```
Abra o navegador e vá para http://localhost:3000. Você deve ver a página semelhante à seguinte captura de tela:
Depois que a página concluir o carregamento, selecione Link de login . Ser-lhe-á pedido para iniciar sessão.
Na página de início de sessão, escreva o seu endereço de e-mail, selecione Seguinte, escreva a sua Palavra-passe e, em seguida, selecione Iniciar sessão. Se você não tiver uma conta, selecione Sem conta? Crie um link, que inicia o fluxo de inscrição.
Se você escolher a opção de inscrição, depois de preencher seu e-mail, senha única, nova senha e mais detalhes da conta, você conclui todo o fluxo de inscrição. Você verá uma página semelhante à captura de tela a seguir. Você verá uma página semelhante se escolher a opção de login.
Selecione Sair para sair do usuário do aplicativo Web ou selecione Exibir declarações de token de ID para exibir todas as declarações de token de ID.

Partilhar via

Pré-requisitos

Criar objeto de configuração MSAL

Usar domínio de URL personalizado (opcional)

Adicionar rotas expressas

Ponto de entrada do aplicativo

Exibir declarações de token de ID

Finalize seu aplicativo Web

Executar e testar o aplicativo Web

Consulte também

Comentários

Recursos adicionais

Partilhar via

Pré-requisitos

Criar objeto de configuração MSAL

Usar domínio de URL personalizado (opcional)

Adicionar rotas expressas

Ponto de entrada do aplicativo

Iniciar e terminar sessão

Exibir declarações de token de ID

Finalize seu aplicativo Web

Executar e testar o aplicativo Web

Consulte também

Comentários

Recursos adicionais