Форма входа с использованием Node.js и MongoDB

Опубликовано: 1 Августа, 2021

Выполните эти простые шаги, чтобы узнать, как создать форму входа с помощью Node.js и MongoDB. Форма входа позволяет пользователям входить на сайт после того, как они создали свою учетную запись с помощью формы регистрации.

Установка модулей:

```
 $ npm установить ejs
```
Встроенный javaScript позволяет создавать разметку HTML с помощью простого JavaScript.
```
 $ npm install express --save
```
Express - это модульная структура для Node, которую вы можете использовать для приложений.
```
 $ npm установить мангуста
```
Mongoose - это библиотека моделирования объектных данных (ODM) для MongoDB и Node.js. Он управляет отношениями между данными, обеспечивает проверку схемы и используется для преобразования между объектами в коде и представлением этих объектов в MongoDB.
```
 $ npm install body-parser --save
```
Body-parser позволяет express прочитать тело, а затем преобразовать его в объект JSON, который мы можем понять.
```
 npm install express-session --save
```
Express.js использует cookie для хранения идентификатора сеанса.
```
 npm установить паспорт, паспорт-местный - сохранить
npm установить паспорт-местный-мангуст - сохранить
```
Passport - это промежуточное ПО для аутентификации для Node. js. Чрезвычайно гибкий и модульный, Passport можно ненавязчиво добавить в любое веб-приложение на основе Express. Исчерпывающий набор стратегий поддерживает аутентификацию с использованием имени пользователя и пароля, Facebook, Twitter и др.

Имя файла: 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!" );
 });

Имя файла: 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" из a ></ li > "/logout" >Logout</ ></ li > 

Имя файла: 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" из a ></ li > "/logout" >Logout</ ></ li > 

Имя файла: register.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" из a ></ li > "/logout" >Logout</ ></ li > 

Имя файла: 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" из a ></ li > "/logout" >Logout</ ></ li > 

Шаги по запуску программы:

Структура проекта будет выглядеть так:

А содержимое каталога views будет выглядеть так:

Остальные файлы будут созданы после запуска npm init для инициализации файла .json
Запустите файл index.js, используя команду ниже:
```
 nodemon app.js
```
ИЛИ Если у вас не установлен nodemon вы можете запустить:
```
 узел app.js
```
Теперь перейдите в свой браузер и введите следующий URL:
```
 http: // локальный: 3000 /
```
Сначала вам нужно будет зарегистрироваться, затем только вы сможете войти в приложение.
Теперь вы успешно зарегистрировались. Теперь это форма входа, как показано ниже:

Эта форма входа приведет вас на секретную страницу, как показано ниже:

Вот как вы можете создать форму входа, используя Node.js и MongoDB.

Node.js Вопросы о Web технологиях MongoDB MongoDB

Форма входа с использованием Node.js и MongoDB

РЕКОМЕНДУЕМЫЕ СТАТЬИ