Express: auth e local

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

As rotas já leem dados.json. Neste capítulo a Biblioteca da Ribeira recebe um formulário POST neste computador. Sessão fica no nível da ideia. “Colocar no ar” aqui significa continuar no PC, não pagar hospedagem.

Pasta: exemplos/32-express-auth-e-local/. npm install, npm start, barra http://127.0.0.1:3000/. Leia o formulário completo, mude um rótulo, preveja, recarregue e confira.

O que você vai aprender

• Enviar um POST local com urlencoded.
• Distinguir GET (ler) e POST (enviar neste PC).
• Entender sessão como memória do navegador, sem conta na nuvem.
• Distinguir execução local de deploy, que é disponibilizar uma aplicação num ambiente de uso.

Form POST neste computador

O app.js da pasta já prepara o corpo do POST:

app.use(express.urlencoded({ extended: false }));

Isso lê campos de formulário HTML. Sem essa linha, req.body vem vazio.

A referência já contém GET e POST de /reserva, validação no servidor e escape do título. Confira as duas rotas em app.js. Escape transforma < em texto visível, em vez de permitir que o título vire marcação. O trecho a seguir explica a estrutura; use o arquivo completo da referência para executar:

app.get("/reserva", function (_req, res) {
  res.type("html").send(`<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Reserva local</title>
</head>
<body>
  <h1>Reserva de leitura</h1>
  <form method="post" action="/reserva">
    <label for="titulo">Título</label>
    <input id="titulo" name="titulo" required>
    <button type="submit">Reservar neste computador</button>
  </form>
  <p><a href="/livros">Voltar aos livros</a></p>
</body>
</html>`);
});
app.post("/reserva", function (req, res) {
  const titulo = escapar(req.body.titulo || "(sem título)");
  res.type("html").send(`<!DOCTYPE html>
<html lang="pt-BR">
<head><meta charset="utf-8"><title>Pedido</title></head>
<body>
  <h1>Pedido local</h1>
  <p>Você pediu “${titulo}”. Nada foi enviado para a internet.</p>
  <p><a href="/livros">Voltar aos livros</a></p>
</body>
</html>`);
});

method="post" manda o campo. name="titulo" vira req.body.titulo. O rótulo label aponta para o id do campo.

Reinicie o Node. Abra http://127.0.0.1:3000/reserva. Digite Maré Alta. Envie. A próxima página deve repetir o título.

Pare e experimente. Troque o texto do botão para “Pedir leitura”. Preveja só o rótulo do botão. Recarregue GET /reserva.

Erro comum: usar method="get" e achar que houve envio secreto. GET coloca o título na barra. POST coloca no corpo. Os dois continuam locais se o action for este servidor.

Sessão, no conceito

Sessão é o servidor lembrar quem voltou. No navegador isso costuma ser um cookie. No Express completo existiria um armazenamento de sessão.

Neste recorte você não instala banco de sessão. O POST da reserva não cria conta. Não há senha. Não há e-mail. O pedido vive naquela resposta e acaba.

O admin do Django (capítulo 29) já mostrou login local. Express aqui só demonstra o form. Autenticação de verdade exigiria hash de senha, HTTPS e regras que este volume não pede.

Erro comum: colar nome e senha reais num form de estudo. Use um título de livro fictício. Nada mais.

Execução local e deploy

A origem deste material fala em publicar o tutorial. Aqui o caminho oficial é outro: o exercício permanece em 127.0.0.1:3000.

Deploy significa disponibilizar uma aplicação num ambiente de uso. Executar npm start novamente no seu computador é retomar o teste local; não é publicação. Pasta no disco. Node instalado. Sem plano pago. Sem “subir para produção” como dever de casa.

Se um dia você publicar um site, isso será outro projeto, com outra chave e outro endereço. Não use estes dados.json nem este form.

O listen continua:

app.listen(3000, "127.0.0.1", function () {
  console.log("http://127.0.0.1:3000");
});

Quando GET e POST de /reserva funcionarem só nesta máquina, avance para performance. Encerre com Ctrl+C.

Atividades

1. Qual a diferença entre GET /livros e POST /reserva neste exemplo?
2. O que express.urlencoded permite ler?
3. Rodar npm start novamente é publicar a aplicação?

Respostas comentadas

1. GET /livros lê dados.json e mostra a lista. POST /reserva recebe o campo do form e devolve uma página de confirmação local. Nenhum dos dois publica.
2. Os campos de um form HTML enviado com POST. req.body.titulo vem do name="titulo".
3. Não. É retomar o teste local. Deploy disponibiliza a aplicação num ambiente de uso; a publicação pública está fora deste exercício.