Tutorial: Preparar uma aplicação de página única JavaScript de Baunilha 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 artigo mostra-lhe como criar uma aplicação de página única (SPA) JavaScript (JS) de Baunilha e configurá-la para iniciar sessão e terminar sessão dos utilizadores com o inquilino do cliente.

Neste tutorial;

Criar um projeto JavaScript de Baunilha no Visual Studio Code
Instalar pacotes necessários
Adicionar código ao server.js para criar um servidor

Pré-requisitos

Conclusão dos pré-requisitos e passos em Preparar o inquilino do cliente para autenticar uma aplicação de página única JavaScript de Baunilha.
Embora qualquer ambiente de desenvolvimento integrado (IDE) que suporte aplicações Vanilla JS possa ser utilizado, o Visual Studio Code é recomendado para este guia. Pode ser transferido a partir da página Transferências .
Node.js.

Criar um novo projeto Vanilla JS e instalar dependências

Abra o Visual Studio Code, selecionePasta AbrirFicheiro>.... Navegue até e selecione a localização para criar o projeto.
Abra um novo terminal ao selecionar Terminal>Novo Terminal.
Execute o seguinte comando para criar um novo projeto Vanilla JS:
```
npm init -y
```

Crie pastas e ficheiros adicionais para alcançar a seguinte estrutura de projeto:

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

Instalar dependências de aplicações

No Terminal, execute o seguinte comando para instalar as dependências necessárias para o projeto:
```
npm install express morgan @azure/msal-browser
```

Editar o ficheiro server.js

O Express é uma arquitetura de aplicação Web para Node.js. É utilizado para criar um servidor que aloja a aplicação. Morgan é o middleware que regista pedidos HTTP na consola. O ficheiro de servidor é utilizado para alojar estas dependências e contém as rotas para a aplicação. A autenticação e a autorização são processadas pela Biblioteca de Autenticação da Microsoft para JavaScript (MSAL.js).

Adicione o fragmento de código seguinte ao ficheiro deserver.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}!`);
});

Neste código, a variável de aplicação é inicializada com o módulo express e o express é utilizado para servir os recursos públicos. O MSAL-browser é servido como um recurso estático e é utilizado para iniciar o fluxo de autenticação.

Passos seguintes

Configurar o SPA para autenticação

Partilhar via