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

前言

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

登入機制

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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 那該怎麼做呢?其實這樣子就可以了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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;,所以我們也可以將使用者名稱等等都拉出來,並且導入至另一個頁面顯示暱稱

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 設計,並將程式碼貼入以下

1
2
3
4
5
6
7
8
9
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 會這樣寫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 也只需要調整一下就可以取得暱稱

1
2
3
4
5
6
7
8
9
10
11
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 部分我就不提供了,只是稍微調整而已。

顯示暱稱

0%