Tutorial: Crie um SPA Vanilla JavaScript para autenticação em um locatário externo

Artigo
04/18/2024

Esse tutorial é a parte 2 de uma série que demonstra a compilação de um aplicativo de página única (SPA ) Vanilla JavaScript (JS) e o prepara para autenticação usando o centro de administração do Microsoft Entra. Na Parte 1 desta série, você registrou um aplicativo e configurou fluxos de usuários no seu locatário externo. Este tutorial demonstra como criar um SPA JavaScript Vanilla usando npm e criando arquivos necessários para autenticação e autorização.

Neste tutorial;

Criar um projeto Vanilla JavaScript no Visual Studio Code
Instalar os pacotes necessários
Adicione o código a server.js para criar um servidor

Pré-requisitos

Tutorial: Preparar o locatário externo para autenticar usuários em um aplicativo de página única do Vanilla JavaScript.
Embora qualquer ambiente de desenvolvimento integrado (IDE) que dê suporte a aplicativos JavaScript Vanilla possa ser usado, o Visual Studio Code é recomendado para este guia. Você pode baixá-lo na página Downloads.
Node.js.

Criar um novo projeto JavaScript Vanilla e instalar dependências

Abra o Visual Studio Code, selecione Arquivo>Abrir Pasta.... Navegue e selecione o local no qual criar seu projeto.
Abra um novo terminal selecione Terminal>Novo Terminal.
Execute o seguinte comando para criar um novo projeto JavaScript Vanilla:
```
npm init -y
```

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

Instalar dependências do aplicativo

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 arquivo server.js

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.

Adicione o seguinte snippet de 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}!`);
});

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

Próxima etapa

Parte 3: manipular fluxos de autenticação em um SPA JavaScript Vanilla

Compartilhar via