مرحبًا أيها الزملاء المطورين! ؟ هل أنت مستعد لرفع مستوى لعبة المصادقة الخاصة بك؟ اليوم، نتعمق في عالم Google OAuth 2.0 وكيفية تنفيذه باستخدام Passport.js. ثق بي، سيشكرك المستخدمون على تجربة تسجيل الدخول السلسة والآمنة هذه!

لماذا Google OAuth 2.0؟ ?

قبل أن نبدأ، دعونا نتحدث عن سبب أهمية Google OAuth 2.0:

1. سهل الاستخدام: لا مزيد من مشاكل "نسيت كلمة المرور"!
2. Fort Knox Security: الاستفادة من بروتوكولات الأمان المتطورة من Google.
3. تعزيز الثقة: يشعر المستخدمون بأمان أكبر عند استخدام حساباتهم على Google.

يبدو جيدًا، أليس كذلك؟ هيا بنا نبدأ!

الخطوة 1: استعد! ️

أول الأشياء أولاً، لنثبت أدواتنا. قم بتشغيل المحطة الخاصة بك وتشغيلها:

npm install passport passport-google-oauth2 express-session

هذه الحزم هي أفضل أصدقائك الجدد لتطبيق Google OAuth 2.0.

الخطوة 2: مغامرة Google Developer Console ️

حان الوقت لإعداد مشروعك في Google Developer Console. إليك خريطة الكنز الخاصة بك:

1. توجه إلى Google Developer Console.
2. أنشئ مشروعًا جديدًا (أعطه اسمًا رائعًا!).
3. انتقل إلى "واجهات برمجة التطبيقات والخدمات > بيانات الاعتماد".
4. انقر على "إنشاء بيانات اعتماد" واختر "معرفات عميل OAuth 2.0".
5. قم بإعداد شاشة الموافقة الخاصة بك (لا تنس أن تبتسم للرمز!).
6. قم بتكوين معرف عميل OAuth 2.0 (نوع تطبيق الويب).
7. أضف عنوان URI الخاص بإعادة التوجيه (على سبيل المثال، http://localhost:3000/auth/google/callback).

نصيحة احترافية: حافظ على أمان معرف العميل وسر العميل. إنها بمثابة مفاتيح مملكة OAuth الخاصة بك!

الخطوة 3: سحر تكوين جواز السفر ✨

الآن، دعونا نضف بعضًا من سحر Passport.js إلى تطبيقنا:

const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;

passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: "http://localhost:3000/auth/google/callback"
  },
  function(accessToken, refreshToken, profile, done) {
    // Your user-saving logic goes here!
    User.findOrCreate({ googleId: profile.id }, function (err, user) {
      return done(err, user);
    });
  }
));

// Don't forget to serialize and deserialize your users!
passport.serializeUser((user, done) => {
  done(null, user.id);
});

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

الخطوة 4: الطريق إلى النجاح ️

لنقم بإعداد الطرق السريعة للمصادقة:

const express = require('express');
const passport = require('passport');
const app = express();

app.use(passport.initialize());
app.use(passport.session());

// The gateway to Google OAuth
app.get('/auth/google',
  passport.authenticate('google', { scope: ['profile', 'email'] })
);

// Welcome back! Handle the callback
app.get('/auth/google/callback',
  passport.authenticate('google', { 
    successRedirect: '/auth/google/success', 
    failureRedirect: '/auth/google/failure' 
  })
);

// Success and failure destinations
app.get('/auth/google/success', (req, res) => { 
  res.send('Welcome aboard! ?'); 
});

app.get('/auth/google/failure', (req, res) => { 
  res.send('Oops! Something went wrong. ?'); 
});

app.listen(3000, () => {
  console.log('Server is up and running! ?');
});

الخطوة 5: وقت الإطلاق! ?

قم بإعداد متغيرات البيئة (GOOGLE_CLIENT_ID وGOOGLE_CLIENT_SECRET)، وستكون جاهزًا للانطلاق!

node app.js

انتقل إلى http://localhost:3000/auth/google، وشاهد السحر يحدث!

الاختتام؟

وهذا هو الحال يا رفاق! لقد قمت للتو بتطبيق Google OAuth 2.0 باستخدام Passport.js. يمكن للمستخدمين الآن تسجيل الدخول باستخدام حساباتهم على Google، والاستمتاع بتجربة سلسة وآمنة.

تذكر أن هذه مجرد البداية. في تطبيق الإنتاج، قد ترغب في إضافة المزيد من الميزات مثل:

• التعامل الصحيح مع الأخطاء
• تخزين بيانات المستخدم في قاعدة البيانات
• خيارات المصادقة الإضافية

هل حاولت تنفيذ OAuth في مشاريعك؟ ما هي التحديات التي واجهتها؟ قم بإسقاط أفكارك في التعليقات أدناه – أود أن أسمع عن مغامراتك في أرض المصادقة!

أتمنى أن تكون عمليات تسجيل الدخول الخاصة بك سلسة دائمًا! ??‍??‍?