4 min de leitura ·

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;

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 🚀!

silvestrini

1 mês atrás

Nada contra NodeJS, tem seu espaço, mas a simplicidade de digitar isso aqui no terminal é sem igual

// criar projeto com o breeze
laravel new nome_do_projeto --breeze
// entrar no diretorio
cd nome_do_projeto
// criar estrutura do banco - sqlite por padrao
php artisan migrate
// subir o servidor php
php artisan serve

Em menos de 1 minuto você terá em localhost:8000 uma página de login, registro e recuperação de senha funcionando com o frontend de um dashboard para você desenvolver.

Sabalozua18

Autor

30 dias atrás

Olá ✋ Agradeço pelo seu comentário.O Laravel é um bom framework ele tem suas vantagens, especialmente pela simplicidade e rapidez.No entanto, eu ainda opto por usar Node.js por algumas razões específicas como flexibilidade e escalabilidade pois o Node.js é conhecido por sua capacidade de lidar com um grande número de conexões simultâneas.

hbm