Nodejs Express MariaDB(Ubuntu) 회원가입 및 로그인 (2)

CMD에서 다음의 명령을 사용해 express를 설치하시오

npm install express-generator -g

그러면 이제 express-generator를 사용할 수 있습니다.

Step 1. 새 App 디렉토리를 만듭시다.

cmd를 켜고 cd /desktop으로 디렉토리를 바꾸고 새로운 app을 생성 ㄱㄱ

express --view=ejs myApp

cd myApp

code .

myApp 디렉토리로 이동 하고 편집기를 엽니다.

Step 2. 필요한 모듈들을 설치합니다.

npm i express express-session express-flash express-validator method-override mysql http-errors cookie-parser body-parser morgan ejs path http

오타가 있다면 너그러이 이해해주시고 수정해서 해주세요.

Step 3. App과 DB를 연결

Ubuntu mariaDB에서, 데이터베이스를 만들고 테이블을 생성해줍니다.

CREATE DATABASE IF NOT EXISTS `myApp` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE `myApp`;

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL,
  `name` varchar(50) NOT NULL,
  `password` varchar(255) NOT NULL,
  `email` varchar(100) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

INSERT INTO `users` (`id`, `name`, `password`, `email`) VALUES (1, 'test', 'test', 'test@test.com');

ALTER TABLE `users` ADD PRIMARY KEY (`id`);
ALTER TABLE `users` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=2;

그리고 이제 편집기에서 lib 디렉토리를 만들고 그 안에 db.js를 만들어줍니다.

lib/db.js

const mysql = require('mysql');
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '1234',
  database: 'user'
});
connection.connect(function (error) {
  if (!!error) {
    console.log(error);
  } else {
    console.log('Connected!:)');
  }
});
module.exports = connection;

Step 4. app.js를 작성해 봅시다.

app.js

const createError = require('http-errors');
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');
const expressValidator = require('express-validator');
const flash = require('express-flash');
const session = require('express-session');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const connection = require('./lib/db');
const authRouter = require('./routes/auth');
const app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(session({
  secret: '123456cat',
  resave: false,
  saveUninitialized: true,
  cookie: { maxAge: 60000 }
}))
app.use(flash());
app.use(expressValidator());
app.use('/auth', authRouter);

// catch 404 and forward to error handler
app.use(function (req, res, next) {
  next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  // render the error page
  res.status(err.status || 500);
  res.render('error');
});
module.exports = app;

Step 5. Authentication Routes들을 생성

routes 디렉토리 안에 auth.js를 만들어줍니다.

routes/auth.js

var express = require('express');
var router = express.Router();
var connection = require('../lib/db');

//display login page
router.get('/', function (req, res, next) {
  // render to views/user/add.ejs
  res.render('auth/login', {
    title: 'Login',
    email: '',
    password: ''
  })
})

//display login page
router.get('/login', function (req, res, next) {
  // render to views/user/add.ejs
  res.render('auth/login', {
    title: 'Login',
    email: '',
    password: ''
  })
})

//authenticate user
router.post('/authentication', function (req, res, next) {

  var email = req.body.email;
  var password = req.body.password;
  connection.query('SELECT * FROM accounts WHERE email = ? AND password = ?', [email, password], function (err, rows, fields) {
    if (err) throw err

    // if user not found
    if (rows.length <= 0) {
      req.flash('error', 'Please correct enter email and Password!')
      res.redirect('/login')
    }
    else { // if user found
      // render to views/user/edit.ejs template file
      req.session.loggedin = true;
      req.session.name = name;
      res.redirect('/home');
    }
  })

})

//display login page
router.get('/register', function (req, res, next) {
  // render to views/user/add.ejs
  res.render('auth/register', {
    title: 'Registration Page',
    name: '',
    email: '',
    password: ''
  })
})

// user registration
router.post('/post-register', function (req, res, next) {
  req.assert('name', 'Name is required').notEmpty()           //Validate name
  req.assert('password', 'Password is required').notEmpty()   //Validate password
  req.assert('email', 'A valid email is required').isEmail()  //Validate email

  var errors = req.validationErrors()

  if (!errors) {   //No errors were found.  Passed Validation!


    var user = {
      name: req.sanitize('name').escape().trim(),
      email: req.sanitize('email').escape().trim(),
      password: req.sanitize('password').escape().trim()
    }

    connection.query('INSERT INTO users SET ?', user, function (err, result) {
      //if(err) throw err
      if (err) {
        req.flash('error', err)

        // render to views/user/add.ejs
        res.render('auth/register', {
          title: 'Registration Page',
          name: '',
          password: '',
          email: ''
        })
      } else {
        req.flash('success', 'You have successfully signup!');
        res.redirect('/login');
      }
    })
  }
  else {   //Display errors to user
    var error_msg = ''
    errors.forEach(function (error) {
      error_msg += error.msg + '<br>'
    })
    req.flash('error', error_msg)

    /**
     * Using req.body.name 
     * because req.param('name') is deprecated
     */
    res.render('auth/register', {
      title: 'Registration Page',
      name: req.body.name,
      email: req.body.email,
      password: ''
    })
  }
})

//display home page
router.get('/home', function (req, res, next) {
  if (req.session.loggedin) {

    res.render('auth/home', {
      title: "Dashboard",
      name: req.session.name,
    });
  } else {
    req.flash('success', 'Please login first!');
    res.redirect('/login');
  }
});

// Logout user
router.get('/logout', function (req, res) {
  req.session.destroy();
  req.flash('success', 'Login Again Here');
  res.redirect('/login');
});
module.exports = router;

Step 6. views 안에 ejs 들을 채워봅시다

/views/auth/login.ejs

<!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="/auth/authentication" 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>

/views/auth/register.ejs

<!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="/auth/post-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>

/views/auth/home.ejs

<!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="auth/logout" class="btn btn-primary">Logout</a>
        </div>
      </div>
    </div>
  </body>
</html>

Step 7. App Server를 열어봅시다.

// package.json 에서
//"scripts": {
//    "start": "node ./bin/www"
//  },
//로 바꿔주고

npm start

http://127.0.0.1:3000/auth
OR
http://127.0.0.1:3000/auth/login

결론

node.js 및 mysql(mariaDB)에서 등록 및 로그인 양식을 만듭니다. MySQL(mariaDB)와 함께 express js 프레임워크를 사용하여 node js에서 로그인 시스템을 만드는 방법을 배웠습니다.

출처

https://laratutorials.com/node-js-express-mysql-registration-and-login-form/

Node.js Express MySQL Registration and Login Form - Lara Tutorials

Create registration and login form in node.js express and mysql tutorial; i am going to shwo you how to create user login and registration apps using node js express and MySQL. In this creating registration and login form in node.js and mysql example

laratutorials.com

저작자표시 비영리 변경금지

'Node.js' 카테고리의 다른 글

Warning: connect.session() MemoryStore is not designed for a production environment (0)	2022.11.02
Nodejs Express MariaDB(Ubuntu) 회원가입 및 로그인 (1) (0)	2021.12.21
[MERN] SNS Chat App 만들기 (1) (0)	2021.11.24
[Node.js] Express Server 구축 (0)	2021.11.09
[React] constructor() 생성자 사용법 (0)	2021.10.20