通过 MongoDB 的 Node.js 登录表单

Question

Earlier, I had a site with login forms and such but no database connectivity. I've now connected it to one with mongodb and have gotten some things working. I'm able to use RESTED to send requests and create accounts and validate accounts within the database.

I'm wondering, how would I be able to implement this functionality inside of a form? Where it would take the form details, query it through the database, and login if successful? Same with registering.

Here's the index:

const config = require('config');
var Joi = require('joi');
Joi.objectId = require('joi-objectid')(Joi);
const mongoose = require('mongoose');
const users = require('./routes/users');
const auth = require('./routes/auth');
var express = require("express");
var hbs = require('express-handlebars');
var app = express();
var bodyParser = require('body-parser');

if (!config.get('PrivateKey')) {
    console.error('Error: PrivateKey is not defined.');
    process.exit(1);
}

mongoose.connect('mongodb://localhost/airbnb')
    .then(() => console.log('Now connected to MongoDB!'))
    .catch(err => console.error('Something went wrong', err));

app.use(bodyParser.urlencoded({ extended: true }));

app.set('view engine', 'hbs');

app.engine('hbs', hbs({
    extname: 'hbs', 
    defaultLayout: 'main',
    layoutsDir: __dirname + '/views/layouts',
    partialsDir: __dirname + '/views/partials/' 
}));


app.use('/static', express.static('public'));
app.use(express.json());
app.use('/api/users', users);
app.use('/api/auth', auth);

var HTTP_PORT = process.env.PORT || 8080;

// call this function after the http server starts listening for requests
function onHttpStart() {
    console.log("Express http server listening on: " + HTTP_PORT);
}

// setup a 'route' to listen on the default url path (http://localhost)
app.get("/", function (req, res) {
    res.render('home', {layout: false})
});

// setup another route to listen on /about
app.get("/roomList", function (req, res) {
    res.render('roomList', {layout: false})
});

app.get("/dashboard", function (req, res) {
    res.render('dashboard', {layout: false})
});

// setup http server to listen on HTTP_PORT
app.listen(HTTP_PORT, onHttpStart);

here's user.js

// require mongoose and setup the Schema
var mongoose = require("mongoose");
var Joi = require('joi');
const joiObjectid = require("joi-objectid");

// connect to the localhost mongo running on default port 27017
mongoose.connect("mongodb://localhost/airbnb");

// define the company schema
// register the Company model using the companySchema
// use the web322_companies collection in the db to store documents
var User = mongoose.model('User', new mongoose.Schema({
    email: {
        type: String,
        required: true,
        minlength: 5,
        maxlength: 255,
        unique: true
    },
    password: {
        type: String,
        required: true,
        minlength: 6,
        maxlength: 55555
    }
}));

// validate
function validateUser(user) {
    const schema = Joi.object({
        email: Joi.string().min(5).max(255).required().email(),
        password: Joi.string().min(6).max(55555).required()
    });
    return schema.validate(user);
}

// export

exports.User = User;
exports.validate = validateUser;

here's users.js

const jwt = require('jsonwebtoken');
const config = require('config');
const bcrypt = require('bcrypt');
const _ = require('lodash');
const { User, validate } = require('../models/user');
const express = require('express');
const router = express.Router();

router.post('/', async (req,res) => {
    const { error } = validate(req.body);
    if (error) {
        console.log(req.body.email);
        console.log(req.body.password);
        return res.status(400).send(error.details[0].message);
    }

    let user = await User.findOne({ email: req.body.email });
    if (user) {
        return res.status(400).send('That user already exists!');
    } else {
        user = new User(_.pick(req.body, ['name', 'email', 'password']));
        const salt = await bcrypt.genSalt(10);
        user.password = await bcrypt.hash(user.password, salt);
        await user.save();
        const token = jwt.sign({_id: user._id }, config.get('PrivateKey'));
        res.header('x-auth-token', token).send(_.pick(user, ['_id', 'name', 'email']));
    }
});

module.exports = router;

here's auth.js

const config = require('config');
const jwt = require('jsonwebtoken');
const Joi = require('joi');
const bcrypt = require('bcrypt');
const _ = require('lodash');
const { User } = require('../models/user');
const express = require('express');
const router = express.Router();

router.post('/', async (req, res) => {
    const { error } = validate(req.body);
    if (error) {
        return res.status(400).send(error.details[0].message);
    }

    let user = await User.findOne({ email: req.body.email });
    if (!user) {
        return res.status(400).send('Incorrect email or password');
    }

    const validPassword = await bcrypt.compare(req.body.password, user.password);
   if (!validPassword) {
       return res.status(400).send('Incorrect email or password');
   } 

   const token = jwt.sign({_id: user._id }, config.get('PrivateKey'));

   res.send(token);
});

function validate(req)
 {
    const schema = Joi.object({
        email: Joi.string().min(5).max(255).required().email(),
        password: Joi.string().min(6).max(55555).required()
    });
    return schema.validate(req);
 }
 
module.exports = router;

This is what my signup modal looks like currently:

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Registration</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form name="regForm" method="get" action="dashboard" onsubmit="return validateSignupForm()">
                        <div class="form-group mb-0">
                            <label for="formGroupEmail"></label>
                            <input type="email" class="form-control" id="formGroupEmail" placeholder="Email address"
                                name="signupEmail">
                        </div>
                        <div class="form-group mb-0">
                            <label for="formGroupPassword"></label>
                            <input type="password" class="form-control" id="formGroupPassword" placeholder="Password"
                                name="signupPassword">
                        </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" value="Sign up" class="btn btn-danger">
                </div>
                </form>
            </div>
        </div>
    </div>

function validateSignupForm() {

                var signupEmail = document.forms["regForm"]["signupEmail"].value;
                var signupPassword = document.forms["regForm"]["signupPassword"].value;

                if (signupPassword.match(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/)) {
                    return true;
                }
                else {
                    alert('Password must be between 6 and 20 characters and contain at least one number and uppercase letter');
                    return false;
                }

                

            }

Answer 1

Seems like that's a lot of efforts you are putting up with all that code, whereas you can simply use passport.js specifically passport-local-mongoose to get the register/login working with few lines of code. For submitting the form, You'll have to use something like ajax which can send requests to your backend server.