Tutorial de como criar uma rotina de LOGIN com Nodejs, Mysql, Passaport e Handlebars
Olá, aspirantes a desenvolvedores e entusiastas do Node.js! Hoje, vamos embarcar em uma jornada incrivel e educativa para criar uma rotina de login.Preparados? Então, vamos lá!
Passo 1: Preparando o Ambiente
Antes de mais nada, vamos configurar nosso ambiente de desenvolvimento. Certifique-se de ter o Node.js instalado; se não tiver, vá até o site oficial e baixe-o enquanto faz um chá. Ah, e não se esqueça do MySQL, a menos que você queira armazenar seus dados na nuvem.
Passo 2: Criando o Projeto
Abra seu terminal favorito e digite:
mkdir projeto-login cd projeto-login npm init -y
Isso vai criar uma nova pasta chamada projeto-login e iniciar um novo projeto Node.js.
Passo 3: Instalando as Dependências
Agora, vamos instalar algumas dependências que são para que todo dê certo
No terminal do vsCode ou da IDE que vc estiver a usar digite:
npm install express passport passport-local express-session express-handlebars mysql2 express-mysql-session
Passo 4: Estruturando o Projeto Crie os seguintes arquivos e pastas:
- app.js: nosso arquivo principal, onde a mágica acontece.
- views/: uma pasta para armazenar nossos templates Handlebars.
- routes/: uma pasta para definir as rotas da nossa aplicação.
- modules/: uma pasta para armazenar algumas funcionalidades do nosso projeto como a conexão com a nossa base de dados.
Passo 5: Configurando a Conexão Com a Base De Dados:
Na pasta modules/, crie um arquivo com o nome de db.js e escreva esse codigo:
const mysql=require('mysql2/promise');
const conecao=mysql.createPool(
{
host:'localhost',
user:'root',
password: //Sua senha do banco de dados,
database: //nome da seu banco de dados
}
);
module.exports=conecao;
// Continua...
Passo 6: Configurando o Handlebars, Express e a Sessão do Usuário
Na estrutura de um projeto que usa Handlebars, a pasta views (ou templates, dependendo da configuração) contém os arquivos de template Handlebars. Esses arquivos definem a estrutura HTML das páginas, mas com placeholders para que os dados sejam dinâmicos.
Então na pasta views/, crie uma outra pasta com o nome de layout e dentro desta pasta crie um arquivo com o nome de main.handlebars e escreva esse codigo:
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Astronautas SA</title>
</head>
<body>
{{{body}}}
</body>
</html>
// Continua..
neste codigo nós temos o tamplate para renderizar as páginas do nosso site dinâmicamente, este template tem um placeholders chamado body que irá receber dinamicamente todo conteúdo da página.
No arquivo app.js, vamos configurar o Express e o Handlebars e a sessão:
// importando o express
const express = require('express');
// importando o express session
const session=require('express-session');
// importando o MysqlStor *ele cria uma tabela no nosso banco que armazena o cookie da sessão
const MySQLStore = require('express-mysql-session')(session);
// importando o handlebars
const exphbs = require('express-handlebars');
// incializar o express
const app = express();
// conectando o express com handlebars
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');
app.set('views', './views');
//Configurando a sessão
const options = {
host: 'localhost',
port: 3306,
user: 'root',
password: 'Senha da seu Banco',
database: 'Nome do banco'
};
const sessionStore = new MySQLStore( options);
//Configurando a sessão
app.use(session({
secret:'aqui irá ficar a sua senha secreta da sessão',
store: sessionStore,
resave:false,
saveUninitialized:false,
cookie:{
expires: 24 * 60 * 60 * 1000, // 1 dia em milissegundos
}
}));
app.use(passport.initialize());
app.use(passport.session());
// Continua...
Passo 7: Configurando o Passport
Na pasta modules/, crie um arquivo com o nome de passportConfig.js e escreva esse codigo:
const conecao = require('./db');
const LocalStrategy=require('passport-local').Strategy;
const bcrypt=require('bcryptjs');
module.exports=(passport)=>{
passport.use(new LocalStrategy(
async function(username, password, done) {
try{
const [resultado]= await conecao.query(`select * from [nome da sua tabela] where nome='${username}'`);
if (resultado.length == 0) {
return done(null, false, { message: 'Esta conta não existe' });
}
bcrypt.compare(password,resultado[0].senha,(erro,iguais)=>{
if(iguais==true){
return done(null,resultado[0]);
}else{
return done(null,false, { message: 'Senha errada.' })
}
});
}catch(error){
return done(error);
}}));
// A função serializeUser é usada para decidir quais dados
do usuário devem ser armazenados na sessão após o login bem-sucedido.
passport.serializeUser(function(user,done){
done(null,user.id);
});
// A função deserializeUser é usada para recuperar os detalhes completos do usuário a partir do
identificador único armazenado na sessão
passport.deserializeUser( async function(id,done){
try{
const [resultado] = await conecao.query(`select * from [nome da sua tabela] where id= ${id} `)
done(null,resultado[0]);
}
catch(erro){
console.log(erro);
}
})
}
// continua
Passo 8: Criando as Rotas
Em routes/Login.js, vamos criar uma rota para a página de login:
const express = require('express');
const router = express.Router();
router.post('/login', (req, res) => {
passport.authenticate('local', function(err, user, info) {
// caso ocorra um erro
if (err) { return next(err); }
// se os dados não conferirem
if (!user) {
console.log(info.message);
return res.redirect('/Login');
}
// caso de todo certo ele faz o login
req.logIn(user, function(err) {
if (err) { return next(err)}
else
return res.redirect('/');
});
})(req, res, next);
});
module.exports = router;
Passo 9: A Página de Login
Na pasta views/layout, crie um arquivo login.handlebars e adicione seu HTML e Handlebars mágicos.
Passo 10: Integrando Tudo
Volte ao app.js e integre as rotas e o Passport:
const routesLogin = require('./routes/Login');
app.use('/Login', routesLogin);
Passo 11: Testando
Agora, é hora de testar! Execute seu projeto com node app.js e acesse http://localhost:3000/login. Se tudo der certo, você verá sua página de login
E aí está, um tutorial de como criar uma rotina de login com Node.js, Express, Passport, Handlebars e MySQL. Lembre-se, a prática leva à perfeição, então não desista se algo não funcionar na primeira vez. Afinal, até o Node.js precisa de um npm update de vez em quando.
Espero que tenham gostado e até a próxima aventura cibernética Astronautas SA levamos a inovação e excelência ao infinito e mais além 🚀!