前言
上一章節已經大致上介紹登入時要使用哪個 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) {
var errorMessage = error.message;
req.flash('info', errorMessage);
res.redirect('/login/');
});
});
|
上一章節我們大致上只做到這樣子，登入後會取得使用者資料
但是一般登入之後其實會將一些東西儲存至 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) {
var errorMessage = error.message;
req.flash('info', errorMessage);
res.redirect('/login/');
});
});
|
如果正確的話就可以取的這個使用者 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) {
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) {
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 部分我就不提供了，只是稍微調整而已。
｜
