Desenvolvendo um login com NodeJS, MongoDB, Express e Passport.

starch1

Starch1

Posted on January 23, 2024

Desenvolvendo um login com NodeJS, MongoDB, Express e Passport.

Introdução

Este artigo explora a utilização do Express.js, um framework que simplifica a estruturação de aplicações web por meio de middleware e rotas. Além disso, aborda o MongoDB, um banco de dados NoSQL popular que oferece uma abordagem distinta para o armazenamento de dado

Express.js é um framework que simplifica a organização de funcionalidades em aplicações, facilitando o uso de middleware e a definição de rotas.

MongoDB é um banco de dados NoSQL popular. Ao contrário dos bancos relacionais, como tabelas, o MongoDB oferece uma abordagem diferente para armazenar dados, utilizando o formato chamado BSON.

Passport.jsé um middleware de autenticação flexível para NodeJS. Ele pode ser facilmente integrado em qualquer aplicação web baseada em Express, tornando a implementação de autenticação mais simples e personalizável.

Passos para criar o projeto e instalar os modulos:

Vamos iniciar um novo projeto usando

npm init
Enter fullscreen mode Exit fullscreen mode

Instale os modulos usando o comando

npm i express ejs mongoose body-parser express-session
npm i passport passport-local 
npm i passport-local-mongoose 
Enter fullscreen mode Exit fullscreen mode

Crie duas pastas dentro do diretorio do projeto usando o comando

mkdir model
mkdir views
Enter fullscreen mode Exit fullscreen mode

Crie um arquivo app.js
Dentro da pasta model, crie um arquivo User.js o que vai ter os nossos Schemas
Dentro da pasta views crie os seguintes arquivos

home.ejs
login.ejs
secret.ejs
register.ejs
Enter fullscreen mode Exit fullscreen mode

EJS é uma linguagem de modelo que permite incorporar codigo JS diretamente em um arquivo de modelo.

Estrutura do projeto deve se parecer com algo assim

Image description

Dependencias no package.json

"dependencies": {
    "body-parser": "^1.20.2",
    "ejs": "^3.1.9",
    "express": "^4.18.2",
    "express-session": "^1.17.3",
    "mongoose": "^8.1.0",
    "passport": "^0.7.0",
    "passport-local": "^1.0.0",
    "passport-local-mongoose": "^8.0.0"
  }
Enter fullscreen mode Exit fullscreen mode

No User.js vamos definir um schema que recebe dois campos usernamee password, o passportLocalMongooseadiciona os metodos e campos adicionais ao schema pra facilitar a autenticação local.

//Arquivo User.js
const { default: mongoose } = require('mongoose')
const mangoose = require('mongoose')
const Schema = mongoose.Schema 

const passportLocalMongoose = require('passport-local-mongoose')

const User = new Schema({
    username: {
        type: String
    },
    password: {
        type: String
    }
})

User.plugin(passportLocalMongoose)

module.exports = mongoose.model('User', User)
Enter fullscreen mode Exit fullscreen mode

No arquivo app.js vamos começar definindo as libs do projeto

//Arquivo app.js

const express = require("express"),
    mongoose = require("mongoose"),
    passport = require("passport"),
    bodyParser = require("body-parser"),
    LocalStrategy = require("passport-local"),
    passportLocalMongoose = 
        require("passport-local-mongoose")
const User = require("./model/User")
let app = express()
Enter fullscreen mode Exit fullscreen mode

Vamos criar uma conexão com o MongoDB

mongoose.connect("mongodb://localhost/27017")
Enter fullscreen mode Exit fullscreen mode

Vamos configurar o express para usar a engine de visualização do EJS, configurar o middleware para processar os dados do formulário e a autenticação com Passport.js


app.set('view engine', 'ejs')
app.use(bodyParser.urlencoded({ extended: true}))
app.use(require("express-session")({
    secret: "xxx",
    resave: false,
    saveUninitialized: false
}))

app.use(passport.initialize())
app.use(passport.session())

passport.use(new LocalStrategy(User.authenticate()))
passport.serializeUser(User.serializeUser())
passport.deserializeUser(User.deserializeUser())

Enter fullscreen mode Exit fullscreen mode

Agora vamos configurar as rotas GET com express.

app.get('/', (req,res)=>{
    res.render('home')
})


app.get('/secret', isLoggedIn, (req,res)=>{
    res.render('register')
})

app.get('/register', (req,res)=>{
    res.render('register')
})


app.get('/login', (req,res) =>{
  res.render('login')
})

Enter fullscreen mode Exit fullscreen mode

Vamos definir a rota que vai tratar as solicitações post para o endpoint /register, que cria um novo usuario com base no dados fornecidos no formulario do register.ejs.

app.post('/register', async (req,res)=>{
    const user = await User.create({
        username: req.body.username,
        password: req.body.password,
    })
    return res.status(200).json(user)
})
Enter fullscreen mode Exit fullscreen mode

Agora definir a rota de login que lida com autenticação dos usuarios e logout que, bom, faz log out

app.post('/login', passport.authenticate('local', {
  sucessRedirect: '/secret',
  failureRedirect: 'login',
 // failureFlash: true,
}))

app.get("/logout", (req, res)=> {
    req.logout((err)=> {
        if (err) { return next(err) }
        res.redirect('/')
      })
})
Enter fullscreen mode Exit fullscreen mode

Vamos criar uma função que age como middleware que vai garantir que só usuários autenticados tenham acesso a rotas privadas da aplicação.

function isLoggedIn(req,res,next){
    if(req.isAuthenticated()) return next()
    res.redirect('/login')
}
Enter fullscreen mode Exit fullscreen mode

Por fim vamos definir a porta para acessar-mos e fazer os testes localmente e por o servidor online.

const port = 3000 
app.listen(port, ()=>{
    console.log('🔥')
})
Enter fullscreen mode Exit fullscreen mode

Pra tudo acima funcionar você precisa ter o um servidor mongoose rodando. Caso não tenha eu escrevi um artigo sobre como preparar o ambiente Preparando ambiente de trabalho MongoDB

Você pode iniciar o servidor com o comando

mongod
Enter fullscreen mode Exit fullscreen mode

Depois navegue até a pasta onde está o app.js e digite no terminal

node app.js
Enter fullscreen mode Exit fullscreen mode

Abra o navegador e digite na barra o endereço:

http://localhost:3000/
Enter fullscreen mode Exit fullscreen mode

Conclusão

Integrando essas tecnologias, você ganha não apenas eficiência no desenvolvimento, mas também uma base sólida para construir aplicações escaláveis e seguras. O uso intuitivo de middleware, a flexibilidade do MongoDB e a robustez da autenticação com Passport.js proporcionam uma experiência de desenvolvimento acessível, mesmo para aqueles que estão começando.

💖 💪 🙅 🚩
starch1
Starch1

Posted on January 23, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related