Morioh
Login
Sérgio Oliveira

Sérgio Oliveira

10 months ago

Formulário de login e registro com Node.js, Express e MongoDB

Um formulário de login e registro é um formulário da web que permite aos usuários fazer login em sua conta existente ou criar uma nova conta. O formulário de login normalmente inclui campos para o nome de usuário ou endereço de e-mail e senha do usuário. O formulário de registro normalmente inclui campos para nome do usuário, endereço de e-mail, senha e outras informações opcionais, como endereço ou número de telefone.

Os formulários de login e registro são uma parte essencial de muitos sites e aplicativos da web. Eles permitem que os usuários acessem suas contas e usem os recursos e serviços que estão disponíveis para eles.

Este tutorial ensinará como criar um aplicativo de registro de usuário e autenticação de login usando banco de dados Node.js, Express e MongoDB. Você aprenderá como criar um modelo de usuário, armazenar dados do usuário no MongoDB e implementar o registro do usuário e a autenticação de login.

Para criar uma aplicação que autentique o registro e login do usuário usando bancos de dados Node.js, Express e MongoDB, siga estas etapas:

  • Etapa 1: instalar o aplicativo e módulos Node JS Express
  • Etapa 2: conectar o aplicativo Node Express Js ao MongoDB
  • Etapa 3: criar modelo
  • Etapa 4: importar módulos e criar rotas em app.js
  • Etapa 5: criar visualizações de login e registro
  • Etapa 6: iniciar o servidor de desenvolvimento

Etapa 1: instalar o aplicativo e módulos Node JS Express

Execute o seguinte comando no terminal para criar um novo diretório para login do nó js e sistema de registro com mongodb:

express --view=ejs myApp

Em seguida, execute o seguinte comando para entrar nos diretórios do aplicativo myApp . Abra seu cmd e execute o seguinte comando:

cd myApp

A estrutura do seu aplicativo node express js se parece com:

Instale algum módulo de nó necessário; então abra novamente seu cmd e execute os seguintes comandos:

 npm install    
 npm install express-flash --save
 npm install express-session --save
 npm install mongoose
 npm install passport passport-local --save
 npm install passport-local-mongoose --save
 npm install body-parser --save

Etapa 2: Conecte o Node js Express ao MongoDB

Crie um novo nome de arquivo database.js; então visite o diretório raiz do seu aplicativo e crie um novo nome de arquivo database.js. Em seguida, adicione o seguinte código para conectar o aplicativo node js express ao banco de dados mongoDB:

var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/node-mongodb', {useNewUrlParser: true});
var conn = mongoose.connection;
conn.on('connected', function() {
    console.log('database is connected successfully');
});
conn.on('disconnected',function(){
    console.log('database is disconnected successfully');
})
conn.on('error', console.error.bind(console, 'connection error:'));
module.exports = conn;

Etapa 3: criar modelo

Criar modelo; então visite o diretório do seu aplicativo e crie o nome do diretório Models. E dentro deste diretório; crie um arquivo userModel.js e adicione os seguintes códigos nele:

Antes da versão 5, o Mongoose tinha uma exportação padrão separada para o Schema e era necessária da seguinte maneira:

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

var userSchema = new Schema({
    name: String,
    email: String,
    password: String
});

var User = mongoose.model('User', userSchema);

Entretanto, com a versão 5 e superior, o construtor Schema agora é exportado diretamente e você deve solicitá-lo da seguinte maneira:

var mongoose = require('mongoose');

var userSchema = new mongoose.Schema({
    name: String,
    email: String,
    password: String
});

var User = mongoose.model('User', userSchema);

Etapa 4: importar módulos e criar rotas em app.js

Importar módulos e criar rotas de login e cadastro no arquivo app.js ; Portanto, visite o diretório raiz do seu aplicativo e abra o arquivo app.js em qualquer editor de texto; em seguida, adicione o seguinte código nele:

var express = require("express");
var mongoose = require("mongoose");
var passport = require("passport");
var bodyParser = require("body-parser");
var LocalStrategy = require("passport-local");
var passportLocalMongoose = require("passport-local-mongoose");
var User = require("./models/userModel");
  
  
var app = express();
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({ extended: true }));
  
app.use(require("express-session")({
    secret: "node js mongodb",
    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());
  
//=====================
// ROUTES
//=====================
  
// Showing home page
app.get("/", function (req, res) {
    res.render('register', {
    title: 'Registration Page',
    name: '',
    email: '',
    password: ''    
  })
});
  
// Showing secret page
app.get("/home", isLoggedIn, function (req, res) {
    res.render("home");
});
  
// Showing register form
app.get("/register", function (req, res) {
    res.render('register', {
    title: 'Registration Page',
    name: '',
    email: '',
    password: ''    
  })
});
  
// Handling user signup
app.post("/register", function (req, res) {
    var email = req.body.email
    var password = req.body.password
    User.register(new User({ email: email }),
            password, function (err, user) {
        if (err) {
            console.log(err);
            return res.render("register");
        }
  
        passport.authenticate("local")(
            req, res, function () {
            req.flash('success', 'You have logged in')
            res.render("home");
        });
    });
});
  
//Showing login form
app.get("/login", function (req, res) {
     res.render('login', {
        title: 'Login',
        email: '',
        password: ''     
    })
});
  
//Handling user login
app.post("/login", passport.authenticate("local", {
    successRedirect: "/home",
    failureRedirect: "/login"
}), function (req, res) {
});
  
//Handling user logout
app.get("/logout", function (req, res) {
    req.logout();
    res.redirect("/");
});
  
function isLoggedIn(req, res, next) {
    if (req.isAuthenticated()) return next();
    res.redirect("/login");
}
  
var port = process.env.PORT || 3000;
app.listen(port, function () {
    console.log("Server Has Started!");
});

Etapa 5: criar visualizações de login e registro

Criar visualizações de login e cadastro; então visite o diretório de visualizações e crie o seguinte arquivo de visualizações nele:

  • login.ejs
  • registrar.ejs
  • home.ejs

Agora, abra seu arquivo login.ejs e atualize o seguinte código em seu arquivo:

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
 
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
  <% if (messages.error) { %>
  <p style="color:red"><%- messages.error %></p>
  <% } %>
    
  <% if (messages.success) { %>
      <p style="color:green"><%- messages.success %></p>
  <% } %>
  <form action="/login" method="post" name="form1">
 
    <div class="form-group">
      <label for="exampleInputEmail1">Email</label>
      <input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email" value="">
    </div>
 
    <div class="form-group">
      <label for="exampleInputEmail1">Password</label>
      <input type="password" name="password" class="form-control" id="password" aria-describedby="emailHelp" placeholder="*********" value="">
    </div>
 
    <input type="submit" class="btn btn-primary" value="Add">
    <a href="auth/register" class="btn btn-success ml-2">Register Here</a>
  </form>
</body>
</html>

Agora, abra seu arquivo Register.ejs e atualize o seguinte código em seu arquivo:

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
 
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
  <% if (messages.error) { %>
  <p style="color:red"><%- messages.error %></p>
  <% } %>
    
  <% if (messages.success) { %>
      <p style="color:green"><%- messages.success %></p>
  <% } %>
  <form action="/register" method="post" name="form1">
 
    <div class="form-group">
      <label for="exampleInputEmail1">Name</label>
      <input type="name" name="name" class="form-control" id="name" aria-describedby="nameHelp" placeholder="Enter name" value="">
    </div>   
 
    <div class="form-group">
      <label for="exampleInputEmail1">Email</label>
      <input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email" value="">
    </div>
 
    <div class="form-group">
      <label for="exampleInputEmail1">Password</label>
      <input type="password" name="password" class="form-control" id="password" aria-describedby="emailHelp" placeholder="*********" value="">
    </div>
 
    <input type="submit" class="btn btn-primary" value="Add">
    <a href="auth/login" class="btn btn-success ml-2">Login</a>
  </form> 
</body>
</html>

Este arquivo login.ejs contém o formulário de login.

Em seguida, abra seu arquivo home.ejs e atualize o seguinte código em seu arquivo:

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
 
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
 
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
     
  <% if (messages.error) { %>
  <p style="color:red"><%- messages.error %></p>
  <% } %>
    
  <% if (messages.success) { %>
      <p style="color:green"><%- messages.success %></p>
  <% } %>
 
  <div class="card">
    <div class="card-header">
     Dashboard <b><%= name %></b>
    </div>
    <div class="card-body">
      <h5 class="card-title">Welcome</h5>
      <p class="card-text">You have successfully login</p>
      <a href="logout" class="btn btn-primary">Logout</a>
    </div>
  </div>
 
  </div>
</body>
</html>

Etapa 6: execute o servidor de desenvolvimento

Você pode usar o seguinte comando para executar o servidor de desenvolvimento:

//run the below command

npm start

after run this command open your browser and hit 

http://127.0.0.1:3000/

Neste tutorial, você aprendeu como criar um aplicativo de registro de usuário e autenticação de login usando Node js, Express js e banco de dados MongoDB.

1.30 GEEK