Tiếp theo trong phần xác thực thành viên, mình sẽ hướng dẫn các bạn xác thực thành viên qua tài khoản Facebook.

Chúng ta sẽ tiếp tục sử dụng project đang xây dựng.

Đầu tiên, hãy cài đặt thêm module passport-facebook.


npm install --save passport-facebook

Tiếp theo hãy thêm file config/auth.js chứa thông tin cấu hình cho thao tác đăng nhập qua facebook.


module.exports = {

'facebookAuth' : {
 'clientID' : 'your-secret-clientID-here', // your App ID
 'clientSecret' : 'your-client-secret-here', // your App Secret
 'callbackURL' : 'http://localhost:8000/auth/facebook/callback'
 }

};

Có 2 thông số cần thiết mà chúng ta cần thêm là clientID và clientSecret. Hãy truy cập vào trang https://developers.facebook.com/apps/ và tạo 1 app mới.

2015-05-13_064456

Nhấn vào Add New App và chọn loại là Website. Điền các thông tin cần thiết và nhấn Create App ID

2015-05-13_064704

Tiếp theo điền site url là localhost. Xong, quay trở lại dashboard.

Untitled

Như bạn thấy thì app của chúng ta vẫn chưa được hoạt động, bây giờ hãy vào setting và điền thông số email của admin.

Untitled

 

Tiếp theo qua status & review để bật app công khai nhé.

2015-05-13_065534

 

Bây giờ hãy quay trở lại dashboard và lấy 2 thông số điền vào phần cấu hình của config/auth.js nhé.

2015-05-13_065829

Cấu hình Passport’s Facebook Strategy

Hãy quay lại file library/passport.js và bổ sung.

var LocalStrategy = require('passport-local').Strategy;
var FacebookStrategy = require('passport-facebook').Strategy;

// load model User
var User = require('../models/user');

// load thông tin cấu hình
var configAuth = require('../config/auth');

module.exports = function(passport) {

passport.serializeUser(function(user, done) {
done(null, user.id);
});

passport.deserializeUser(function(id, done) {
User.findById(id, function(err, user) {
done(err, user);
});
});

// CODE ĐĂNG KÝ
// CODE ĐĂNG NHẬP

// =========================================================================
// ĐĂNG NHẬP BẰNG FACEBOOK =================================================
// =========================================================================
passport.use(new FacebookStrategy({

clientID : configAuth.facebookAuth.clientID,
clientSecret : configAuth.facebookAuth.clientSecret,
callbackURL : configAuth.facebookAuth.callbackURL,
passReqToCallback : true,
profileFields: ['id', 'displayName', 'photos', 'emails']

},
function(req, token, refreshToken, profile, done) {

process.nextTick(function() {
User.findOne({ 'email' : profile.emails[0].value }, 
function(err, user) {
if (err)
return done(err);

if (user) {
return done(null, user);
} else {
// nếu chưa tồn tại người dùng này trong hệ thống thì tạo mới
var newUser = new User();

newUser.username = profile.displayName;
newUser.email = profile.emails[0].value;
newUser.avatar= profile.photos[0].value;
newUser.save(function(err) {
if (err)
throw err;
return done(null, newUser);
});
}
});
});

}));

};

Ở đây ta cần require thêm passport-facebook  và cấu hình config/auth.js.

Tiếp theo, viết route xử lý cho thao tác này trong controllers/auth.js


app.get('/auth/facebook', passport.authenticate('facebook',
 { scope : 'email' }));

// Xử lý sau khi facebook xác thực thành viên
app.get('/auth/facebook/callback',
passport.authenticate('facebook', {
successRedirect : '/profile',
failureRedirect : '/login'
}));

Quay lại view đăng nhập (public/templates/login.dust) và thêm đường dẫn đăng nhập facebook.


<div class="form-group">
<a href="/auth/facebook" class="btn btn-primary">
  Đăng nhập bằng Facebook
</a>
</div>

Rồi test nào.

2015-05-13_071533

Nhấn Okay. Sau khi Facebook xác thực tài khoản xong, sẽ được chuyển qua trang thông tin cá nhân với các thông tin lấy được từ Facebook.

2015-05-13_071731

 

Lời kết:

Như vậy, chúng ta đã xây dựng thành công chức năng đăng nhập qua tài khoản Facebook sử dụng Passport trong KrakenJS. Bạn có thể tham khảo source project tại:

https://github.com/sangnguyenplus/KrakenJS—Tutorial

Trong bài viết tiếp theo mình sẽ hướng dẫn các bạn xác thực thành viên sử dụng tài khoản Google.

Nếu có vấn đề gì trong quá trình thực hiện, hãy để comment bên dưới để mình hỗ trợ.

Mình là 1 developer mới vào nghề, chưa có nhiều kinh nghiệm với lập trình web nhưng luôn muốn chia sẻ những hiểu biết của mình với các lập trình viên khác.
  • Địa chỉ: Hồ Chí Minh