Capítulo 5 React node js

Prévia do material em texto

Capítulo 5 – Autenticação e Segurança em Node.js e React 
 
1. A importância da segurança 
• Aplicações web modernas lidam com dados sensíveis (usuários, senhas, 
tokens). 
• Um sistema inseguro pode sofrer ataques como: 
o SQL Injection 
o XSS (Cross-Site Scripting) 
o CSRF (Cross-Site Request Forgery) 
o Brute Force 
 
2. Autenticação com JWT (JSON Web Token) 
Backend (Node.js + Express): 
const express = require('express'); 
const jwt = require('jsonwebtoken'); 
const bcrypt = require('bcrypt'); 
 
const app = express(); 
app.use(express.json()); 
 
const users = []; // exemplo simples 
 
app.post('/register', async (req, res) => { 
 const { username, password } = req.body; 
 const hashed = await bcrypt.hash(password, 10); 
 users.push({ username, password: hashed }); 
 res.send("Usuário registrado!"); 
}); 
 
app.post('/login', (req, res) => { 
 const { username, password } = req.body; 
 const user = users.find(u => u.username === username); 
 if (!user) return res.sendStatus(401); 
 
 bcrypt.compare(password, user.password, (err, ok) => { 
 if (!ok) return res.sendStatus(403); 
 const token = jwt.sign({ username }, 'segredo123', { expiresIn: '1h' }); 
 res.json({ token }); 
 }); 
}); 
 
app.listen(3000, () => console.log("Rodando na porta 3000")); 
 
3. Protegendo rotas com Middleware 
function autenticar(req, res, next) { 
 const auth = req.headers['authorization']; 
 const token = auth && auth.split(' ')[1]; 
 if (!token) return res.sendStatus(401); 
 
 jwt.verify(token, 'segredo123', (err, user) => { 
 if (err) return res.sendStatus(403); 
 req.user = user; 
 next(); 
 }); 
} 
 
// Exemplo de rota protegida 
app.get('/perfil', autenticar, (req, res) => { 
 res.json({ mensagem: "Bem-vindo, " + req.user.username }); 
}); 
 
4. Integração com React (Frontend) 
// Exemplo simples de login em React 
import { useState } from "react"; 
 
function Login() { 
 const [username, setUser] = useState(""); 
 const [password, setPass] = useState(""); 
 
 async function handleLogin() { 
 const res = await fetch("http://localhost:3000/login", { 
 method: "POST", 
 headers: { "Content-Type": "application/json" }, 
 body: JSON.stringify({ username, password }) 
 }); 
 const data = await res.json(); 
 localStorage.setItem("token", data.token); 
 } 
 
 return ( 
 
 setUser(e.target.value)} /> 
 
setPass(e.target.value)} /> 
 Entrar 
 
 ); 
} 
 
5. Boas práticas de segurança 
 Sempre criptografe senhas com bcrypt. 
 Nunca armazene senhas em texto puro. 
 Armazene tokens no httpOnly cookie (mais seguro que localStorage). 
 Use HTTPS para todas as requisições. 
 Sempre valide entradas do usuário para evitar injeções. 
 
 Resumo: 
• Autenticação moderna usa JWT. 
• Node.js fornece APIs seguras com Express. 
• React integra autenticação via tokens. 
• Segurança deve ser prioridade em qualquer sistema. 
 
 Como gerar este PDF 
1. Copie o conteúdo acima e salve como 05_autenticacao_node_react.md. 
2. Rode no terminal: 
pandoc 05_autenticacao_node_react.md -o 05_autenticacao_node_react.pdf