Loading repository data…
oDevFred / repository
Este documento apresenta a implementação de um sistema básico de cadastro e login de usuários, desenvolvido como parte da avaliação final de Fundamentos em Nuvem. O projeto utiliza Node.js para o backend, Express como framework web, MySQL para o banco de dados e interfaces HTML/CSS/JavaScript no frontend.
Título: Avaliação Final - Fundamentos em Nuvem
Seu Nome Completo: Caio Eduardo Ferreira Frederico
Nome do Projeto: Sistema de Cadastro e Login com Node.js e MySQL
Este documento apresenta a implementação de um sistema básico de cadastro e login de usuários, desenvolvido como parte da avaliação final de Fundamentos em Nuvem. O projeto utiliza Node.js para o backend, Express como framework web, MySQL para o banco de dados e interfaces HTML/CSS/JavaScript no frontend. As senhas dos usuários são armazenadas de forma segura utilizando hash com bcrypt.
Manual do Usuário - Sistema de Cadastro e Login
Este manual fornece instruções passo a passo para utilizar o sistema de cadastro e login.
1. Acesso ao Sistema:
http://localhost:3000/register.htmlhttp://localhost:3000/login.html2. Como Cadastrar um Novo Usuário:
http://localhost:3000/register.html).3. Como Fazer Login:
http://localhost:3000/login.html).O código-fonte completo do projeto, incluindo o frontend (HTML, CSS, JavaScript), o backend (Node.js/Express) e as configurações de banco de dados, está versionado no GitHub.
Link para o Repositório GitHub: Sistema Auth
Estrutura do Banco de Dados (Script SQL): As tabelas
userseprofilesforam criadas no MySQL com base no seguinte script SQL:-- Criar o banco de dados (se ainda não existir) CREATE DATABASE IF NOT EXISTS nodejs_auth_db;-- Usar o banco de dados recém-criado
USE nodejs_auth_db;-- Tabela de usuários (users)
CREATE TABLE IF NOT EXISTS users ( id INT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(255) NOT NULL UNIQUE, password VARCHAR(255) NOT NULL, email VARCHAR(255) NOT NULL UNIQUE, telefone VARCHAR(100), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP );-- Tabela de perfis (profiles)
CREATE TABLE IF NOT EXISTS profiles ( user_id INT PRIMARY KEY, data_nascimento DATE, foto_perfil VARCHAR(255), FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE );
Código Frontend (public/register.html - Trecho principal do formulário e script):
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cadastro de Usuário</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="containier">
<h2>Cadastro de Usuários</h2>
<form id="registerForm">
<div class="input-group">
<label for="registerUsername">Nome de Usuário:</label>
<input type="text" id="registerUsername" name="username" required>
</div>
<div class="input-group">
<label for="registerEmail">Email:</label>
<input type="email" id="registerEmail" name="email" required>
</div>
<div class="input-group">
<label for="registerPassword">Senha:</label>
<input type="password" id="registerPassword" name="password" required>
</div>
<button type="submit">Cadastrar</button>
</form>
<p>Já tem uma conta? <a href="login.html">Faça login aqui</a></p>
<p id="registerMessage" class="message"></p>
</div>
<script>
document.getElementById('registerForm').addEventListener('submit', async (event) => {
event.preventDefault(); // Impede o envio padrão do formulário
const username = document.getElementById('registerUsername').value;
const email = document.getElementById('registerEmail').value;
const password = document.getElementById('registerPassword').value;
const messageElement = document.getElementById('registerMessage');
try {
const response = await fetch('/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username, email, password })
});
const data = await response.json();
if (response.ok) {
messageElement.textContent = data.message;
messageElement.style.color = 'green';
document.getElementById('registerForm').reset(); // Limpa o formulário
} else {
messageElement.textContent = `Erro: ${data.message}`;
messageElement.style.color = 'red';
}
} catch (error) {
console.error('Erro ao enviar requisição de registro:', error);
messageElement.textContent = 'Erro ao conectar com o servidor.';
messageElement.style.color = 'red';
}
});
</script>
</body>
</html>
Código Backend (server.js - Trecho da rota /register):
app.post('/register', async (req, res) => {
// Extrai username, email e password do corpo da requisição
const { username, email, password } = req.body;
// Valiidação básiica de entrada
if (!username || !email || !password) {
return res.status(400).json({ message: 'Todos os campos obrigatórios (username, email, password) devem ser preenchidos.'});
}
let connection;
try {
connection = await pool.getConnection(); // Obtém uma conexão do pool
// 1. Verificar se o usuário ou e-mail já existem
const [existingUsers] = await connection.execute(
'SELECT id FROM users WHERE username = ? OR email = ?',
[username, email]
);
if (existingUsers.length > 0) {
return res.status(409).json({ message: 'Nome de usuário ou e-mail já cadastro.'});
}
// 2. Gerar hash da senha para segurança
const saltRounds = 10; // Custo de processamento para o hash (Quanto maios, mais seguro, porém mais lento)
const hashedPassword = await bcrypt.hash(password, saltRounds);
// 3. Inserir o novo usuário na tabela 'users'
const [result] = await connection.execute(
'INSERT INTO users (username, email, password) VALUES (?, ?, ?)',
[username, email, hashedPassword]
);
// 4. Inserir um registro vazio na tabela 'profiles' para o novo usuário
// A chave estrangeira user_id será o ID do usuário recém-criado
await connection.execute(
'INSERT INTO profiles (user_id) VALUES (?)',
[result.insertId] // insertId contem o ID do último registro inserido
);
res.status(201).json({ message: 'Usuário registrado com sucesso!', userId: result.insertId });
} catch(error) {
console.error('Erro no registro:', error);
res.status(500).json({ message: 'Erro interno no servidor ao registrar usuário.'});
} finally {
if (connection) connection.release() // Libera a conexão de volta para a pool
}
});
Explicação: A página register.html exibe um formulário para o usuário inserir nome de usuário, e-mail e senha. O JavaScript no frontend captura esses dados e os envia via fetch (método POST) para a rota /register no backend. No server.js, esta rota recebe os dados, valida-os, verifica se o e-mail ou nome de usuário já existem, gera um hash seguro da senha usando bcrypt e, finalmente, insere as informações do novo usuário (incluindo o hash da senha) nas tabelas users e profiles do MySQL.
Código Frontend (public/login.html - Trecho principal do formulário e script):
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login de Usuário</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>Login de Usuário</h2>
<form id="loginForm">
<div class="input-group">
<label for="loginEmail">Email:</label>
<input type="email" id="loginEmail" name="email" required>
</div>
<div class="input-group">
<label for="loginPassword">Senha:</label>
<input type="password" id="loginPassword" name="password" required>
</div>
<button type="submit">Entrar</button>
</form>
<p>Não tem uma conta? <a href="register.html">Cadastre-se aqui</a></p>
<p id="loginMessage" class="message"></p>
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', async (event) => {
event.preventDefault(); // Impede o envio padrão do formulário
const email = document.getElementById('loginEmail').value;
const password = document.getElementById('loginPassword').value;
const messageElement = document.getElementById('loginMessage');
try {
const response = await fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ email, password })
});
const data = await response.json();
if (response.ok) {
messageElement.textContent = data.message;
messageElement.style.color = 'green';
Selected from shared topics, language and repository description—not editorial ratings.
g-beltran-t2m /
Este documento apresenta uma tabela comparativa entre os métodos mais utilizados em JavaScript e seus equivalentes em C# LINQ, juntamente com descrições e exemplos de uso.
LucasMB15 /
Este projeto é um documento HTML educativo que explica o conceito de declaração de variáveis em programação, com foco em JavaScript. Ele apresenta os principais tipos de variáveis, suas características e exemplos práticos de uso.