Tutorial de como cria uma rotina de login com Nodejs Express 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 que nem Mr.Robot conseguiria hackear. 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... literalmente.
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. Não é mágica, é tecnologia!
Passo 3: Instalando as Dependências
Agora, vamos instalar algumas dependências que são mais essenciais que pizza em noite de código:
No terminal do vsCode ou da IDE que vc estiver a usar digite
npm install express passport passport-local express-session express-handlebars mysql2
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 projecto 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 sua base de dados
}
);
module.exports=conecao;
// Continua...
Passo 6: Configurando o Handlebars, Express e a Sessão do Usuário
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...
No arquivo app.js, vamos configurar o Express e o Handlebars e a sessão:
// importando o express
const express = require('express');
// importando o handlebars
const exphbs = require('express-handlebars');
// incializar o express
const app = express();
// conectar o express com handlebars
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');
app.set('views', './views');
//Configurando a sessão
app.use(session({
secret:'sua senha secre da sessão',
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
O Passport é como guarda do IMEL (TIo Adão) só deixa entrar quem conhece ou tem o cartão de estudante . Vamos configurá-lo:
Na pasta modules/, crie um arquivo com o nome de passportConfig.js e escreva esse codigo:
const passport = require('passport');
const conecao = require('./db');
const LocalStrategy = require('passport-local').Strategy;
passport.use(new LocalStrategy(
function(username, password, done) {
// Aqui você vai verificar os dados no seu banco MySQL
try{
const [resultado]= await conecao.query(`select * from [NomeTabela] where Nome='${username}'`);
if (resultado.length == 0) {
return done(null, false, { message: 'Esta conta não existe' });
}
else if(resultado[0].senha != password){
return done(null,false, { message: 'Senha errada.' })
}
return done(null,resultado[0]);
}catch(error){
return done(error);
}
}
// Se tudo estiver certo, retorne o usuário com `done(null, user)`
// Se não, `done(null, false)`
}
));
// 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) {
// Armazena a mensagem de erro usando req.flash
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 projecto com node app.js e acesse http://localhost:3000/login. Se tudo der certo, você verá sua página de login brilhando mais que a teste das miúdas do mundinho num dia de sol.
E aí está, um tutorial de como criar uma rotina de login com Node.js, Express, Passport, Handlebars e MySQL, com um toque de humor para não dormir no teclado. 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 🚀!
Comentários
Poderias explicar melhor o que são cookies e o objectivo da pasta views pfv? sou leigo
Poderias explicar melhor o que são cookies e o objectivo da pasta views pfv? sou leigo
Cookies
São pequenos arquivos de texto que são armazenados no navegador do usuário quando ele visita um site. Eles são usados para rastrear informações sobre o usuário, como preferências de idioma, detalhes de login, e outras informações que podem ser úteis para personalizar a experiência do usuário. Os cookies podem ser usados para lembrar que um usuário já fez login em um site, para rastrear o comportamento do usuário em um site (como páginas visitadas), e para armazenar informações temporárias que são necessárias para a funcionalidade do site.
Pasta views no handlebars
Handlebars é um mecanismo de template para JavaScript, que permite gerar HTML dinâmico. Ele é usado para criar templates que podem ser preenchidos com dados para gerar páginas web dinâmicas. Isso é útil para criar páginas que mudam com base nos dados do usuário ou em outras condições.
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 dados dinâmicos. Um template é um modelo pré-definido que pode ser usado para criar documentos ou páginas web que seguem uma estrutura específica.Os templates geralmente contêm placeholders ou variáveis que são substituídas por conteúdo real quando o documento ou página é gerado.Por exemplo
<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>
neste codigo nós temos o tamplate para renderizar páginas de um site dinâmicamente, este template tem um placeholders chamado body que irá receber dinamicamente todo conteúdo da minha página.
good