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

Artigo
04/10/2024

Este tutorial é a parte 2 de uma série que demonstra a criação de um aplicativo de página única (SPA) Vanilla JavaScript (JS) e prepará-lo 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ário em seu locatário externo. Este tutorial demonstra como criar um Vanilla JavaScript SPA usando npm e criar arquivos necessários para autenticação e autorização.

Neste tutorial;

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

Pré-requisitos

Tutorial: Prepare seu locatário externo para autenticar usuários em um SPA JavaScript Vanilla.
Embora qualquer ambiente de desenvolvimento integrado (IDE) que ofereça suporte a aplicativos JavaScript Vanilla possa ser usado, o Visual Studio Code é recomendado para este guia. Pode ser descarregado a partir da página de Downloads .
Node.js.

Crie um novo projeto JavaScript Vanilla e instale dependências

Abra o Visual Studio Code, selecione File>Open Folder.... Navegue até o local para criar seu projeto e selecione-o.
Abra um novo terminal selecionando Terminal>New 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 de aplicativos

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 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 pela Biblioteca de Autenticação da Microsoft para JavaScript (MSAL.js).

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

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

Próximo passo

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

Partilhar via