全端勇士之路 Node.js 基礎學習-會員機制(2)

發表於 2019-07-07 分類於 Nodejs

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

在前面已經製作完註冊帳號得邏輯功能，所以接下來就是要做登入得功能

前言

在前面已經製作完註冊帳號得邏輯功能，所以接下來就是要做登入得功能

router.post('/singin', function(req, res, next) {
  var email = req.body.email;
  var password = req.body.password;
  firebase.auth().signInWithEmailAndPassword(email, password).then(function(user) {
    console.log(user)
  })
  .catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    req.flash('info', errorMessage);
    res.redirect('/login/');
  });
});

我們可以先登入看看 user 會是什麼東西

user

而這些就是詳細完整的使用者資訊，其中 UID 是最重要得

UID

另外 Firebase 所提供的會員機制其實算很齊全，例如以下

User

完善註冊訊息

使用方式呢?其實也很簡單，所以這邊順便記錄一下如何更完善註冊要填寫的資料

router.post('/signup', function(req, res, next) {
  var email = req.body.email;
  var password = req.body.password;
  var username = req.body.username;
  console.log(userphone)
  firebase.auth().createUserWithEmailAndPassword(email, password)
  .then(function(userCredentials) {
    userCredentials.user.updateProfile({ displayName: username })
    req.flash('info','註冊成功');
    res.redirect('/login/signup');
  })
  .catch(function(error) {
    // Handle Errors here.
    var errorMessage = error.message;
    req.flash('info', errorMessage);
    res.redirect('/login/signup');
  });
});

主要使用的 API 是 user.updateProfile

所以我們就可以透過這種方式在註冊的時候同時加入相關欄位，我們也可以回到登入來驗證看看是否已經寫入了

updateProfile

那麼其他不足得欄位通常就會透過 firebase 來擴充

擴充使用者欄位

假設說我們希望再增加一個欄位叫做暱稱欄位，那麼該怎麼做呢?就要搭配 firebase 來擴充了，修改成以下

router.post('/signup', function(req, res, next) {
  var email = req.body.email;
  var password = req.body.password;
  var username = req.body.username;
  var nikename = req.body.nikename;
  firebase.auth().createUserWithEmailAndPassword(email, password)
    .then(function(userCredentials) {
      userCredentials.user.updateProfile({ displayName: username });
      var saveUser = {
        email: email,
        username: username,
        nikename: nikename,
        uid: userCredentials.user.uid
      }
      firebaseDb.ref('/user/' + userCredentials.user.uid).set(saveUser);
      req.flash('info','註冊成功');
      res.redirect('/login/signup');
    })
    .catch(function(error) {
      // Handle Errors here.
      var errorMessage = error.message;
      req.flash('info', errorMessage);
      res.redirect('/login/signup');
    });
});

這樣子我們就可以透過這種方式來擴充不足得欄位

擴充不足得欄位

增加欄位驗證

接下來除了前端替我們驗證欄位是否正確之外，我們伺服器端也必須做一次驗證，確保資料無誤，前面我們已經有安裝了 express-validator，所以就可以直接拿來使用

var validat = [
  check('email').isEmail().withMessage('Email 格式錯誤'),
  check('password').isLength({ min: 8 }).withMessage('密碼不可少於 8 字元'),
  check('username').isLength({ min: 2 }).withMessage('姓名不可低於 3 個字元'),
  check('nikename').isLength({ min: 3 }).withMessage('姓名不可低於 3 個字元')
];

router.post('/signup',validat, function(req, res, next) {
  var errors = validationResult(req);
  if (!errors.isEmpty()) {
    req.flash('info',errors.array());
    return res.redirect('/login/signup');
  }
  var email = req.body.email;
  var password = req.body.password;
  var username = req.body.username;
  var nikename = req.body.nikename;
  firebase.auth().createUserWithEmailAndPassword(email, password)
    .then(function(userCredentials) {
      userCredentials.user.updateProfile({ displayName: username });
      var saveUser = {
        email: email,
        username: username,
        nikename: nikename,
        uid: userCredentials.user.uid
      }
      firebaseDb.ref('/user/' + userCredentials.user.uid).set(saveUser);
      req.flash('info','註冊成功');
      res.redirect('/login/signup');
    })
    .catch(function(error) {
      // Handle Errors here.
      var errorMessage = error.message;
      req.flash('info', errorMessage);
      res.redirect('/login/signup');
    });
});

這樣子就可以做到欄位得驗證，確保欄位都有達到一定得字數

欄位驗證