Formulario de inicio de sesión usando Node.js y MongoDB

Siga estos sencillos pasos para aprender a crear un formulario de inicio de sesión con Node.js y MongoDB. El formulario de inicio de sesión permite a los usuarios iniciar sesión en el sitio web después de haber creado su cuenta mediante el formulario de registro.
Instalación de módulos: 

$ npm install ejs

JavaScript incorporado le permite generar marcado HTML con JavaScript simple.

$ npm install express --save

Express es un marco de módulo para Node que puede usar para aplicaciones.

$ npm install mongoose

Mongoose es una biblioteca de modelado de datos de objetos (ODM) para MongoDB y Node.js. Gestiona las relaciones entre los datos, proporciona validación de esquemas y se utiliza para traducir entre objetos en el código y la representación de esos objetos en MongoDB.

$ npm install body-parser --save

Body-parser permite que Express lea el cuerpo y luego lo analice en un objeto JSON que podamos entender.

npm install express-session --save

Express.js usa una cookie para almacenar una identificación de sesión.

npm install passport passport-local --save
npm install passport-local-mongoose --save

• Passport es un middleware de autenticación para Node. js. Extremadamente flexible y modular, Passport se puede colocar discretamente en cualquier aplicación web basada en Express. Un conjunto integral de estrategias admite la autenticación mediante un nombre de usuario y contraseña, Facebook, Twitter y más.

Nombre de archivo: app.js 
 

var express = require("express"),
    mongoose = require("mongoose"),
    passport = require("passport"),
    bodyParser = require("body-parser"),
    LocalStrategy = require("passport-local"),
    passportLocalMongoose =
        require("passport-local-mongoose"),
    User = require("./models/user");
 
mongoose.set('useNewUrlParser', true);
mongoose.set('useFindAndModify', false);
mongoose.set('useCreateIndex', true);
mongoose.set('useUnifiedTopology', true);
mongoose.connect("mongodb://localhost/auth_demo_app");
 
var app = express();
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({ extended: true }));
 
app.use(require("express-session")({
    secret: "Rusty is a dog",
    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("home");
});
 
// Showing secret page
app.get("/secret", isLoggedIn, function (req, res) {
    res.render("secret");
});
 
// Showing register form
app.get("/register", function (req, res) {
    res.render("register");
});
 
// Handling user signup
app.post("/register", function (req, res) {
    var username = req.body.username
    var password = req.body.password
    User.register(new User({ username: username }),
            password, function (err, user) {
        if (err) {
            console.log(err);
            return res.render("register");
        }
 
        passport.authenticate("local")(
            req, res, function () {
            res.render("secret");
        });
    });
});
 
//Showing login form
app.get("/login", function (req, res) {
    res.render("login");
});
 
//Handling user login
app.post("/login", passport.authenticate("local", {
    successRedirect: "/secret",
    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!");
});

Nombre de archivo: home.ejs 
 

<h1>This is home page</h1>
 
<li><a href="/register">Sign up!!</a></li>
<li><a href="/login">Login</a></li>
<li><a href="/logout">Logout</a></li>

Nombre de archivo: login.ejs 
 

<h1>login</h1>
 
<form action="/login" method="POST">
    <input type="text" name="username"
        placeholder="username">
    <input type="password" name="password"
        placeholder="password">
    <button>login</button>
</form>
 
<h1>This is home page</h1>
 
<li><a href="/register">Sign up!!</a></li>
<li><a href="/login">Login</a></li>
<li><a href="/logout">Logout</a></li>

Nombre de archivo: registro.ejs 
 

<h1> Sign up form </h1>
 
<form action="/register" method="POST">
    <input type="text" name="username"
        placeholder="username">
    <input type="password" name="password"
        placeholder="password">
    <button>Submit</button>
</form>
 
<h1>This is home page</h1>
 
<li><a href="/register">Sign up!!</a></li>
<li><a href="/login">Login</a></li>
<li><a href="/logout">Logout</a></li>

Nombre de archivo: secret.ejs 
 

<h1>This is secrect page</h1>
 
<img src="https://encrypted-tbn0.gstatic.com/
images?q=tbn%3AANd9GcQ5PdxXFw4u3BRG4166i7Nbk
x0VyGGNt0hWc3loNeD7GIL4nbbo&usqp=CAU">
 
<h1>This is home page</h1>
 
<li><a href="/register">Sign up!!</a></li>
<li><a href="/login">Login</a></li>
<li><a href="/logout">Logout</a></li>

Pasos para ejecutar el programa: 

• La estructura del proyecto se verá así:

• Y el contenido del directorio de vistas se verá así:

• Los archivos de descanso se crearán después de ejecutar npm init para inicializar el archivo .json.
• Ejecute el archivo index.js usando el siguiente comando:

nodemon app.js

• O si no tiene instalado nodemon, puede ejecutar:

node app.js

• Ahora ve a tu navegador y escribe la siguiente URL:

http://localhost:3000/

• Primero deberá registrarse y luego solo usted puede iniciar sesión en la aplicación. 
   

• Ahora que se ha registrado con éxito, ahora este es el formulario de inicio de sesión como se muestra a continuación:

• Este formulario de inicio de sesión lo llevará a la página Secreta como se muestra a continuación:

Entonces, así es como puede crear un formulario de inicio de sesión usando Node.js y MongoDB.