ExpressJS - 身份驗證

身份驗證是一個過程，在這個過程中，提供的憑據將與本地作業系統或身份驗證伺服器上授權使用者資訊資料庫中的憑據進行比較。如果憑據匹配，則該過程完成，並且使用者被授予訪問許可權。

為了建立一個身份驗證系統，我們需要建立一個註冊頁面和一個使用者密碼儲存。以下程式碼為我們建立了一個帳戶並將其儲存在記憶體中。這僅僅是為了演示目的；建議始終使用永續性儲存（資料庫或檔案）來儲存使用者資訊。

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var multer = require('multer');
var upload = multer(); 
var session = require('express-session');
var cookieParser = require('cookie-parser');

app.set('view engine', 'pug');
app.set('views','./views');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true })); 
app.use(upload.array());
app.use(cookieParser());
app.use(session({secret: "Your secret key"}));

var Users = [];

app.get('/signup', function(req, res){
   res.render('signup');
});

app.post('/signup', function(req, res){
   if(!req.body.id || !req.body.password){
      res.status("400");
      res.send("Invalid details!");
   } else {
      Users.filter(function(user){
         if(user.id === req.body.id){
            res.render('signup', {
               message: "User Already Exists! Login or choose another user id"});
         }
      });
      var newUser = {id: req.body.id, password: req.body.password};
      Users.push(newUser);
      req.session.user = newUser;
      res.redirect('/protected_page');
   }
});

app.listen(3000);

現在對於登錄檔單，建立一個名為signup.jade的新檢視。

SIGNUP.JADE

html
   head
      title Signup
   body
      if(message)
         h4 #{message}
         form(action = "/signup" method = "POST")
         input(name = "id" type = "text" required placeholder = "User ID")
         input(name = "password" type = "password" required placeholder = "Password")
         button(type = "Submit") Sign me up!

訪問 localhost:3000/signup 檢查此頁面是否載入。

我們已為這兩個欄位設定了 required 屬性，因此啟用了 HTML5 的瀏覽器只有在我們提供使用者名稱和密碼後才能提交此表單。如果有人嘗試在沒有使用者 ID 或密碼的情況下使用 curl 請求進行註冊，則會顯示錯誤。在 views 中建立一個名為protected_page.pug的新檔案，內容如下：

html
   head
      title Protected page
   body
      div Hey #{id}, How are you doing today?
      div Want to log out?
      div Logout

此頁面只有在使用者剛剛註冊或登入後才能顯示。現在讓我們定義它的路由，以及登入和登出的路由：

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var multer = require('multer');
var upload = multer(); 
var session = require('express-session');
var cookieParser = require('cookie-parser');

app.set('view engine', 'pug');
app.set('views','./views');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true })); 
app.use(upload.array());
app.use(cookieParser());
app.use(session({secret: "Your secret key"}));

var Users = [];

app.get('/signup', function(req, res){
   res.render('signup');
});

app.post('/signup', function(req, res){
   if(!req.body.id || !req.body.password){
      res.status("400");
      res.send("Invalid details!");
   } else {
      Users.filter(function(user){
         if(user.id === req.body.id){
            res.render('signup', {
               message: "User Already Exists! Login or choose another user id"});
         }
      });
      var newUser = {id: req.body.id, password: req.body.password};
      Users.push(newUser);
      req.session.user = newUser;
      res.redirect('/protected_page');
   }
});
function checkSignIn(req, res){
   if(req.session.user){
      next();     //If session exists, proceed to page
   } else {
      var err = new Error("Not logged in!");
      console.log(req.session.user);
      next(err);  //Error, trying to access unauthorized page!
   }
}
app.get('/protected_page', checkSignIn, function(req, res){
   res.render('protected_page', {id: req.session.user.id})
});

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

app.post('/login', function(req, res){
   console.log(Users);
   if(!req.body.id || !req.body.password){
      res.render('login', {message: "Please enter both id and password"});
   } else {
      Users.filter(function(user){
         if(user.id === req.body.id && user.password === req.body.password){
            req.session.user = user;
            res.redirect('/protected_page');
         }
      });
      res.render('login', {message: "Invalid credentials!"});
   }
});

app.get('/logout', function(req, res){
   req.session.destroy(function(){
      console.log("user logged out.")
   });
   res.redirect('/login');
});

app.use('/protected_page', function(err, req, res, next){
console.log(err);
   //User should be authenticated! Redirect him to log in.
   res.redirect('/login');
});

app.listen(3000);

我們建立了一箇中間件函式checkSignIn來檢查使用者是否已登入。protected_page 使用此函式。要登出使用者，我們銷燬會話。

現在讓我們建立登入頁面。將檢視命名為login.pug並輸入內容：

html
   head
      title Signup
   body
      if(message)
         h4 #{message}
         form(action = "/login" method = "POST")
         input(name = "id" type = "text" required placeholder = "User ID")
         input(name = "password" type = "password" required placeholder = "Password")
         button(type = "Submit") Log in

我們簡單的身份驗證應用程式現在已經完成了；現在讓我們測試一下應用程式。使用nodemon index.js執行應用程式，然後訪問 localhost:3000/signup。

輸入使用者名稱和密碼，然後單擊註冊。如果詳細資訊有效/唯一，您將被重定向到protected_page：

現在登出應用程式。這將把我們重定向到登入頁面：

此路由受保護，因此如果未經身份驗證的人員嘗試訪問它，他將被重定向到我們的登入頁面。這就是關於基本使用者身份驗證的所有內容。始終建議我們使用永續性會話系統並使用雜湊進行密碼傳輸。現在有更好的方法來驗證使用者身份，利用 JSON 令牌。

列印頁面