DEV Community

Starch1
Starch1

Posted on • Edited on

2

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.

API Trace View

How I Cut 22.3 Seconds Off an API Call with Sentry

Struggling with slow API calls? Dan Mindru walks through how he used Sentry's new Trace View feature to shave off 22.3 seconds from an API call.

Get a practical walkthrough of how to identify bottlenecks, split tasks into multiple parallel tasks, identify slow AI model calls, and more.

Read more →

Top comments (0)

Billboard image

Try REST API Generation for Snowflake

DevOps for Private APIs. Automate the building, securing, and documenting of internal/private REST APIs with built-in enterprise security on bare-metal, VMs, or containers.

  • Auto-generated live APIs mapped from Snowflake database schema
  • Interactive Swagger API documentation
  • Scripting engine to customize your API
  • Built-in role-based access control

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay