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

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

Google AD

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

Liker 讚賞

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

｜

上一章節已經大致上介紹登入時要使用哪個 API，後面就介紹了一下加入 Flash 及欄位擴充，這章節就來認真講一下登入相關

前言

上一章節已經大致上介紹登入時要使用哪個 API，後面就介紹了一下加入 Flash 及欄位擴充，這章節就來認真講一下登入相關

登入機制

先讓我們回到原本的程式碼

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 errorMessage = error.message;
    req.flash('info', errorMessage);
    res.redirect('/login/');
  });
});

上一章節我們大致上只做到這樣子，登入後會取得使用者資料

user

但是一般登入之後其實會將一些東西儲存至 Session 那該怎麼做呢?其實這樣子就可以了

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) {
    req.sessionID = user.user.uid;
    console.log(req.sessionID);
  })
  .catch(function(error) {
    // Handle Errors here.
    var errorMessage = error.message;
    req.flash('info', errorMessage);
    res.redirect('/login/');
  });
});

如果正確的話就可以取的這個使用者 UID

UID

但是建議還是這樣子寫比較好 req.session.uid = user.user.uid;，所以我們也可以將使用者名稱等等都拉出來，並且導入至另一個頁面顯示暱稱

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) {
    req.session.uid = user.user.uid;
    req.session.displayName = user.user.displayName;
    res.redirect('users');
  })
  .catch(function(error) {
    // Handle Errors here.
    var errorMessage = error.message;
    req.flash('info', errorMessage);
    res.redirect('/login/');
  });
});

那由於我是導致 users 頁面所以就要在設計一個 router 來接 session 資料，打開 users router 設計，並將程式碼貼入以下

router.get('/', function(req, res, next) {
  var uid = req.session.uid;
  var displayName = req.session.displayName;
  res.render('users',{
    title: '登入成功',
    uid: uid,
    displayName: displayName
  })
});

接下來 EJS 那邊也要打開來調整，由於我們會透過使用者是否有 uid 來做判定顯示名稱，所以 EJS 會這樣寫

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <% if (uid) { %>
    您的名稱是:<%- displayName %>
  <% } else {%>
    您還沒登入
  <% } %>
</body>
</html>

那麼預期結果還沒登入會像這樣

還沒登入

那如果登入呢?

登入成功

取得擴充欄位資料

接下來就是要來取得擴充欄位的資料，一樣要先修改一下 router，但是是 auth.js

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) {
    req.session.uid = user.user.uid;
    req.session.displayName = user.user.displayName;
    var fireRef = firebaseDb.ref('/user/' + user.user.uid);
    fireRef.once('value', function(snapshat) {
      req.session.nikename = snapshat.val().nikename;
      res.redirect('/users/');
    })
  })
  .catch(function(error) {
    // Handle Errors here.
    var errorMessage = error.message;
    req.flash('info', errorMessage);
    res.redirect('/login/');
  });
});

那麼 users router 也只需要調整一下就可以取得暱稱

router.get('/', function(req, res, next) {
  var uid = req.session.uid;
  var displayName = req.session.displayName;
  var nikename = req.session.nikename;
  res.render('users',{
    title: '登入成功',
    uid: uid,
    displayName: displayName,
    nikename: nikename
  })
});

EJS 部分我就不提供了，只是稍微調整而已。

顯示暱稱