تسجيل الدخول باستخدام حسابات الشبكات الاجتماعية ومكتبة PassportJS

مستوى الصعوبة: مبتدئ-متوسّط

توفّر الشبكات الاجتماعية مكتبات برمجية تسمح الاستفادة من حسابات المُستخدمين في بقيّة التطبيقات، فعوضًا عن إنشاء حساب جديد وتعبئة كافّة البيانات بشكل يدوي، يُمكن للمستخدم اختيار تسجيل الدخول في حسابه في تويتر أو فيسبوك مثلًا لتتم العملية بسهولة تامّة.

في NodeJS هناك مكتبة Passport الشهيرة التي تسمح بإنشاء نظام تسجيل دخول اعتمادًا على حسابات المستخدم في الشبكات الاجتماعية، أو حتى يُمكن إنشاء تسجيل دخول عبر البريد. لكن في هذا الدرس سأستعرض آلية إنشاء نظام تسجيل دخول باستخدام تويتر.

قبل الخوض في آلية العمل سأشرح الفكرة النظرية. المستخدم أولًا يقوم في فيسبوك أو تويتر، أو حتى غوغل، بإنشاء تطبيق جديد من مركز المُطوّرين Dev Center ليحصل بذلك على رقم مُعرّف خاص بتطبيقه وعلى رمز سرّي يتم إدخالهما في مكتبة Passport لإتمام عملية تسجيل الدخول.

الخطوة الأولى بكل تأكيد هي تثبيت المكتبات وإطار عمل ExpressJS كذلك لتسهيل إنشاء الواجهات البرمجية، والمطلوب تحميل التالي:

npm install express passport passport-twitter body-parser cookie-parser express-session --save

بعدها نقوم بإنشاء برنامجنا البسيط الذي يعرض زر لتسجيل الدخول عبر تويتر بالشكل التالي

let express = require("express")
let app = express()
let PORT = process.env.PORT || 3000
let passport = require("passport")
let cookieParser = require("cookie-parser")
let session = require('express-session')
let bodyParser = require("body-parser")



app.use(cookieParser("3alamPro"))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
app.use(session({secret: "3alamPRO2017", saveUninitialized:true, resave:true}))
app.use(passport.initialize())
app.use(passport.session())

require("./configs/passport")(passport)



app.get("/", (req, res)=>{
    res.send("<a href='/login/twitter'> تسجيل الدخول عبر تويتر </a>")
})

app.get("/login/twitter", passport.authenticate('twitter'))
app.get("/login/twitter/cb", passport.authenticate('twitter',{successRedirect:"/", failureRedirect:"/loginFail"}))

app.listen(PORT, ()=>{
    console.log(`Up & Running ${PORT}`)
})

الكود السابق بسيط فهو استدعاء لبعض المكتبات الخاصّة بإدارة الجلسات والكوكيز مع تحديد مسارات تسجيل الدخول عبر تويتر، الأول login/twitter الذي سيتوجه المتصفّح له بعد الضغط على الزر. والثاني سيُعيدنا موقع تويتر إليها وهو ما يُعرف بالـ "كول باك" CallBack.

الآن نحتاج لكتابة ملف passport.js ضمن مُجلّد congif مثلما هو واضح في الكود أعلاه، وهو الملف الذي سيحتوي على المنطق الخاص بعملية تسجيل الدخول

let twitterStrategy = require("passport-twitter").Strategy


module.exports = function(passport){


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

  
 

 passport.use(new twitterStrategy({
   consumerKey:"هنا المُعرّف الخاص بالتطبيق تحصل عليه من تويتر",
   consumerSecret:"الرمز السرّي أيضًا من موقع تويتر",
   callbackURL: "/login/twitter/cb", // المسار الذي سيُعيدنا موقع تويتر إليه
 }, function(token, tokenSecret, profile, done){
	console.log(profile) // هذه بيانات المستخدم من تويتر
   return done(null, profile)
 }))// end of Twitter
 
  }//end of exports

في بداية الملف قُمنا باستدعاء مكتبة تسجيل الدخول في تويتر الخاصّة بمكتبة Passport. ولو رغبت بإنشاء تسجيل دخول عبر فيسبوك فأنت بحاجة لتثبيت واستدعاء مكتبة خاصّة على الشكل 

let facebookStrategy = require("passport-facebook").Strategy

بعدها نحتاج لاستخدام Middleware خاص بالمكتبة الجديدة، وفي مثالنا هو new twitterStrategy مع إدخال بيانات التطبيق، أما الـ "كول باك" فهو سيُعيد لنا أكثر من عنصر من بينها الـ Profile الذي سيحتوي على بيانات المستخدم بعد تحويله إلى تويتر وموافقته على منح صلاحيات للتطبيق. يُمكنك تسميته ما شئت، وفي هذا المكان وعوضًا عن console.log التي استخدمتها أنا بإمكانك مثلًا الاتصال مع قاعدة بيانات لإدخال بيانات المستخدم أو تحديثها إن كانت موجودة ولاتنس شيئين هامّين: الأول هو استخدام return done لأنها تُخبر برنامجنا أن كل شيء يعمل بسلاسة، والثاني هو تعريف passport.serialize وdeserialize لمرّة واحدة فقط لأنها مسؤولة عن إدارة الجلسات الخاصّة ببيانات المستخدم.

أخيرًا، كيف يُمكن التأكيد أن المستخدم قام بتسجيل دخول ناجح وبياناته موجودة ضمن الجلسة من عدمها؟ الطريق بسيطة جدًا فقط اختبر القيمة التالية

if (req.isAuthenticated())
	return "ok"
else
	return "غير مُسجّل للدخول"

ماذا لو أردت استخدام فيسبوك مثلًا؟ المنطق بسيط جدًا. تقوم في تعريف المسارات بإضافة التالي

app.get("/login/facebook/", passport.authenticate('facebook'))
app.get("/login/facebook/cb", passport.authenticate("facebook", {successRedirect:"/", failureRedirect:"/loginFail"}))

ومثلما اتفقنا في صفحة passport تقوم بتعريف "ميدل وير" جديد على الشكل

passport.use(new facebookStrategy({
clientID:"معرف التطبيق",
clientSecret:"الرمز السرّي",
callbackURL:"/login/facebook/cb",
}, function(token, refreshToken, profile, done){
  console.log(profile._json)
 return done(null, profile._json)
}))// end of FB

بانتظار الاستفسارات لو كانت موجودة.