CRUD dengan ExpressJS & Mongoose Part 9 : Login dan Logout

Ditutorial kali ini kita akan membahas cara login dengan ExpressJS dan MongoDB/Mongoose. Di tutorial sebelumnya kita sudah mempunyai halaman view data pegawai, form pegawai dan form kecamatan serta databasenya yang bernama crud_pegawai, silahkan membaca tutorial sebelumnya.

Baca Sebelumnya - CRUD Dengan ExpressJS & Mongoose Part 8 : Edit Data

Silahkan masuk dulu ke direktori yang kemarin sudah di buat yaitu folder crud_pegawai. 

C:\Users\RSAM>cd Documents/nodejs_tutorial/express/crud_pegawai

Setelah itu kita install modul session dan flash, perhatikan perintah dibawah.

C:\Users\RSAM\Documents\nodejs_tutorial\express\crud_pegawai>npm install express-session

C:\Users\RSAM\Documents\nodejs_tutorial\express\crud_pegawai>npm install express-flash

Langkah selanjutnya yaitu membuat skema user di folder models dengan nama file User.js

C:\Users\RSAM\Documents\nodejs_tutorial\express\crud_pegawai>cd models

C:\Users\RSAM\Documents\nodejs_tutorial\express\crud_pegawai\models>vim User.js

Dan masukan script dibawah.

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

var userSchema = new Schema({
 username: { type: String, required: true, unique: true  },
 password: { type: String, required: true },
 email: { type: String, required: true  },
 name: String,
 admin: Boolean
},
{
 timestamps: true
});

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

module.exports = User;

Karena kita belum membuat halaman untuk membuat user, maka kita akan membuat sebuah script sederhana untuk melakukan preload atau mengisi data awal untuk collection User. Karena User memiliki field password dan tentu saja harus kita sembunyikan bentuk aslinya, jangan sampai admin melihat password orang lain. Maka kita dapat menggunakan modul crypto yang dimiliki oleh NodeJS. Kita akan sembunyikan setiap password user dengan menggunakan sha256 dengan kunci brotherhood2013.

Silahkan buat terlebih dahulu folder bernama data di dalam folder crud_pegawai

C:\Users\RSAM\Documents\nodejs_tutorial\express\crud_pegawai>mkdir data

Kemudian kita buat script dibawah dengan nama init.js

var mongoose = require('mongoose');
var crypto = require('crypto');

var secret = 'brotherhood2013';
var password = crypto.createHmac('sha256', secret).update('admin').digest('hex');

console.log('password: ' + password);

mongoose.Promise = global.Promise;
mongoose.connect('mongodb://localhost/crud_pegawai');

var User = require('../models/user');

User.find({username:'admin'}, function(err, user){
 if(user.length == 0){
  var admin = new User({
   username: 'admin',
   email: 'admin@gmail.com',
   password: password,
   name: 'admin',
   admin: true
  });
  admin.save(function(err){
   if(err) throw err;
   console.log('admin dibuat');
  });
 }
});

Setelah itu jalankan perintah seperti dibawah untuk membuat akun admin.

C:\Users\RSAM\Documents\nodejs_tutorial\express\crud_pegawai>node data/init.js

Silahkan cek data user di database kalian seperti pada tutorial mongodb sebelumya.

Selanjutnya kita akan membuat middleware untuk autentikasi. ExpressJS memiliki sebuah filter yang dinamakan dengan middleware. Sebuah kode yang dapat disematkan disetiap route tanpa harus menyertakan kodenya pada kode didalam route. Middleware dibuat di dalam file terpisah, kemudian objeknya digunakan sebelum menyertakan callback untuk menangani aksi pada route. Middleware akan dieksekusi sebelum proses memasuki kode route.

Silahkan buat terlebih dahulu sebuah folder dengan nama middlewares 

C:\Users\RSAM\Documents\nodejs_tutorial\express\crud_pegawai>mkdir middlewares

Kemudian di dalamnya buat sebuah file dengan nama auth.js. dan masukan script dibawah.

var Auth = {
 check_login: function(req, res, next){
  if(!req.session.logged_in){
   return res.redirect('/login');
  }
  next();
 },
 is_admin: function(req, res, next){
  if(!req.session.admin){
   req.flash('info', 'maaf tidak bisa akses halaman ini');
   return res.redirect('/');
  }
  next();
 }
}

module.exports = Auth;

Setelah membuat middleware kita lanjut akan mengedit app.js seperti berikut

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var flash = require('express-flash');
var session = require('express-session');

var indexRouter = require('./routes/index');
var kecRouter = require('./routes/kecamatan');
var pegawaiRouter = require('./routes/pegawai');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(session({secret:'brotherhood2013'}));
app.use(flash());

//koneksi
var mongoose = require('mongoose');
mongoose.Promise = global.Promise;

mongoose.connect('mongodb://localhost/crud_pegawai', { useNewUrlParser: true })
.then(() => console.log('berhasil terhubung'))
.catch((err) => console.error(err));

console.log('mongodb terkoneksi');

app.use('/', indexRouter);
app.use('/kecamatan', kecRouter);
app.use('/pegawai', pegawaiRouter);

// 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;

Sekarang kita akan menggunakan model user dan middleware yang telah kita buat sebelumnya, silahkan edit index.js di folder routes.

var express = require('express');
var crypto = require('crypto');

var router = express.Router();
var Pegawai = require('../models/Pegawai');
var User = require('../models/User');
var Auth_mdw = require('../middlewares/auth');

var secret = 'brotherhood2013';
var session_store;

/* GET home page. */
router.get('/', Auth_mdw.check_login, function(req, res, next) {
 Pegawai.find({}, function(err, pegawai){
  console.log(pegawai);
  res.render('index', { pegawai: pegawai, title: 'CRUD Pegawai', session_store:session_store });
 }).populate('id_kec').select('_id nama email umur');
});

router.get('/login', function(req, res, next){
 res.render('login');
});

router.post('/login', function(req, res, next){
 session_store = req.session;
 var password = crypto.createHmac('sha256', secret).update(req.param('password')).digest('hex');
 
 if(req.param('username') == "" || req.param('password') == ""){
  req.flash('info', 'Isi dengan benar');
  res.redirect('/login');
 }else{
  User.find({ username: req.param('username'), password: password }, function(err, user){
  if(err) throw err;
  if(user.length > 0){
   session_store.username = user[0].username;
   session_store.email = user[0].email;
   session_store.admin = user[0].admin;
   session_store.logged_in = true;
   res.redirect('/');
  }else{
   req.flash('info', 'akun salah!!');
   res.redirect('/login');
  }
  })
 }
});

module.exports = router;

Setelah itu kita akan buat file baru dengan nama login.ejs di folder views. Masukan script dibawah ini.

<!DOCTYPE html>
<html>
 <head>
  <title>Login</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <link rel='stylesheet' href='/bootstrap/css/bootstrap.min.css'>
 </head>
 <body>
  <h1>Login</h1><% if(messages.info){ %>
  <p><%=  messages.info %></p>
  <% }  %>
  <form action='/login/' method='post' role='form'>
  <div class='form-group'>
   <label for='exampleInputEmail'>Username</label>
   <input type='text' name='username' class='form-control' placeholder='Enter Username' required>
  </div>
  <div class='form-group'>
   <label for='exampleInputEmail'>Password</label>
   <input type='password' name='password' class='form-control' placeholder='Enter Password' required>
  </div>
  <button type='submit' class='btn btn-primary'>Submit</button>
 </body>
 <script style='javascript' src'/bootstrap.min.js' >
</html>

Yang terakhir kita akan menambahkan fungsi logout di index.js pada folder routes.

router.get('/logout', function(req, res){
    req.session.destroy(function(err){
    if(err){
      console.log(err);
    }
    else
    {
      res.redirect('/login');
    }
  });
});

Lihat script lengkapnya dibawah.

routes/index.js

var express = require('express');
var crypto = require('crypto');

var router = express.Router();
var Pegawai = require('../models/Pegawai');
var User = require('../models/User');
var Auth_mdw = require('../middlewares/auth');

var secret = 'brotherhood2013';
var session_store;

/* GET home page. */
router.get('/', Auth_mdw.check_login, function(req, res, next) {
 Pegawai.find({}, function(err, pegawai){
  console.log(pegawai);
  res.render('index', { pegawai: pegawai, title: 'CRUD Pegawai', session_store:session_store });
 }).populate('id_kec').select('_id nama email umur');
});

router.get('/login', function(req, res, next){
 res.render('login');
});

router.post('/login', function(req, res, next){
 session_store = req.session;
 var password = crypto.createHmac('sha256', secret).update(req.param('password')).digest('hex');
 
 if(req.param('username') == "" || req.param('password') == ""){
  req.flash('info', 'Isi dengan benar');
  res.redirect('/login');
 }else{
  User.find({ username: req.param('username'), password: password }, function(err, user){
  if(err) throw err;
  if(user.length > 0){
   session_store.username = user[0].username;
   session_store.email = user[0].email;
   session_store.admin = user[0].admin;
   session_store.logged_in = true;
   res.redirect('/');
  }else{
   req.flash('info', 'akun salah!!');
   res.redirect('/login');
  }
  })
 }
});

router.get('/logout', function(req, res){
    req.session.destroy(function(err){
    if(err){
      console.log(err);
    }
    else
    {
      res.redirect('/login');
    }
  });
});

module.exports = router;

Pada tahap ini kita sudah bisa membuat login dan logout di ExpressJS dan Mongoose. Ketika kita menjalankan "npm start" dan mengakses browser "localhost:3000" kita akan melihat tampilan form login bukan view data pegawai dan ketika diisi username = admin, password = admin maka akan menuju ke halaman view data pegawai atau kalian coba isikan salah maka akan ada keterangan akun salah di atas form login. Yang terakhir kita tambahkan link logout di index.ejs pada folder view seperti ini "<a href='/logout'>Logout</a>" dan simpan sesudah </table>

Sekian untuk tutorial cara login dan logout di ExpressJS (NodeJS) dan Mongoose (MongoDB). Selamat mencoba!

Catatan :
Autentikasi/middleware hanya ada di halaman view data pegawai, di halaman form tambah pegawai dan tambah kecamatan blum di tambahkan. silahkan kalian coba tambah middleware di dalamnya.