مصادقة Google NodeJS باستخدام Passport و Express

إذا سبق لك استخدام حساب Google الخاص بك لتسجيل الدخول إلى أحد التطبيقات ، فربما تكون قد لاحظت مدى سهولة ذلك. ما عليك سوى النقر فوق زر واحد وليس عليك كتابة بريدك الإلكتروني أو كلمة المرور. في حين أن هذا يبدو بسيطًا ، فإن ما يحدث تحت الغطاء معقد للغاية. ومع ذلك ، فإن أدوات مثل Passport تجعل الأمر أسهل.

في هذا البرنامج التعليمي ، ستتعلم كيفية تنفيذ مصادقة Google في Node باستخدام Passport و Express.

ما هو جواز السفر؟

جواز سفر (أو Passport.js) عبارة عن برنامج وسيط لمصادقة Node يوفر أكثر من 500 إستراتيجية لمصادقة المستخدمين بما في ذلك المصادقة الاجتماعية باستخدام منصات مثل Google و Twitter.

ستستخدم جواز سفر جوجل oauth2 استراتيجية لمصادقة المستخدمين على Google.

إنشاء نظام مصادقة Google في Node

هذه نظرة عامة على نظام المصادقة الذي ستقوم بإنشائه:

• عندما ينقر المستخدم على زر تسجيل الدخول ، سيتم إرساله إلى صفحة تسجيل الدخول إلى Google حيث سيقوم بتسجيل الدخول.
• ستعيد Google توجيه المستخدم إلى تطبيقك برمز وصول. يمنحك رمز الوصول إذنًا للوصول إلى معلومات الملف الشخصي لهذا المستخدم.
• أرسل رمز الوصول إلى Google للحصول على بيانات الملف الشخصي.
instagram viewer
• إنشاء مستخدم جديد أو استرداد المستخدم الحالي من قاعدة البيانات.
• استخدم JWTs لحماية المسارات الحساسة.

كيفية إعداد مصادقة Google في NodeJS باستخدام Passport

اتبع الخطوات أدناه لتفويض المستخدمين باستخدام Google OAuth ،

الخطوة 1: أنشئ معرّف عميل Google وسر العميل

قبل استخدام Google لتسجيل دخول المستخدمين إلى تطبيقك ، تحتاج إلى تسجيل تطبيقك لدى Google للحصول على معرّف العميل وسر العميل لاستخدامهما عند تكوين Passport.

قم بتسجيل الدخول إلى وحدة تحكم جوجل السحابية واتبع الخطوات التالية لتسجيل تطبيقك.

أنشئ مشروعًا جديدًا. في شريط القائمة ، حدد أوراق اعتماد ومن القائمة المنسدلة ، حدد معرّف عميل OAuth.

لنوع التطبيق ، حدد تطبيق الويب. أضف الاسم المفضل لتطبيقك في حقل الاسم.

تحت عناوين URI المعتمدة لإعادة التوجيه ، استخدم http://localhost: 3000 و http://localhost: 3000 / auth / google / callback لإعادة التوجيه المصرح بها URIs.

انقر يزيد لإنشاء عميل OAuth. نظرًا لأن بيانات اعتماد التطبيق حساسة ، فستحتاج إلى إنشاء ملف .env ملف وإضافة معرف العميل وسر العميل إليه.

CLIENT_ID = 
CLIENT_SECRET = 

الخطوة 2: إعداد خادم العقدة

قم بإنشاء مجلد ، المستخدم- google- المصادقة ، وانتقل إليه.

mkdir المستخدم جوجل المصادقة
القرص المضغوط المستخدم-جوجل-المصادقة

التهيئة npm لنصنع او لنبتكر package.json.

npm الحرف الأول

نظرًا لأنك ستستخدم صريحًا لـ إنشاء الخادم، قم بتثبيته عن طريق تشغيل الأمر التالي.

npm التثبيت السريع

افتح المجلد باستخدام محرر النصوص المفضل لديك وأنشئ ملفًا جديدًا app.js. سيكون بمثابة نقطة دخول للتطبيق الخاص بك.

أنشئ خادم NodeJS بتنسيق app.js.

const صريحة = تتطلب ("صريحة") ؛
تطبيق const = express () ؛
ميناء كونست = 3000 ؛
app.listen (PORT، () => {
 console.log (`الاستماع على المنفذ $ {PORT}`) ؛
});

الخطوة 2: إعداد MongoDB

سوف تقوم بتخزين بيانات المستخدم الواردة من Google في ملف قاعدة بيانات MongoDB. قبل حفظ معلومات المستخدم ، تحتاج إلى تحديد الهيكل الذي سيتم تخزين البيانات فيه. النمس مثالي لهذا الغرض. يوفر طريقة مباشرة إلى حد ما لإنشاء نماذج البيانات.

ثبت النمس.

npm تثبيت النمس

قم بإنشاء ملف جديد userModel.js، وأنشئ مخطط المستخدم.

const النمس = تتطلب ("النمس") ؛
const {مخطط} = mongoose.model ؛
const UserSchema = مخطط جديد ({
 غوغل: {
 هوية شخصية: {
 اكتب: سلسلة ،
 },
 اسم: {
 اكتب: سلسلة ،
 },
 البريد الإلكتروني: {
 اكتب: سلسلة ،
 },
 },
});
مستخدم const = mongoose.model ("المستخدم" ، UserSchema) ؛
module.exports = المستخدم ؛

في userModel.js، لقد استوردت النمس وأنشأت مخططًا جديدًا.

لاحظ أنك تقوم بتجميع المعلومات من Google. يكون هذا مفيدًا بشكل خاص عندما تستخدم أيضًا طرق مصادقة أخرى ويستخدم المستخدم أكثر من طريقة. يجعل منع التسجيل المزدوج أسهل.

بعد ذلك ، قم بإنشاء db.js.

const النمس = تتطلب ("النمس") ؛
النمس. الوعد = عالمي. يعد؛
const dbUrl = "mongodb: // localhost / المستخدم" ؛
const connect = غير متزامن () => {
 mongoose.connect (dbUrl، {useNewUrlParser: true، useUnifiedTopology: true})؛
 const ديسيبل = النمس.
 db.on ("خطأ"، () => {
 console.log ("تعذر الاتصال") ؛
 });
 db.once ("فتح"، () => {
 console.log ("> الاتصال بنجاح بقاعدة البيانات") ؛
 });
};
module.exports = {connect} ؛

اتصل بقاعدة البيانات بتنسيق app.js.

const صريحة = تتطلب ("صريحة") ؛
تطبيق const = express () ؛
ميناء كونست = 3000 ؛
const db = تتطلب (". / ديسيبل") ؛
db.connect () ؛
app.listen (PORT، () => {
 console.log (`الاستماع على المنفذ $ {PORT}`) ؛
});

الخطوة 3: إعداد جواز السفر

ثبت جواز سفر و جواز سفر جوجل oauth2.

npm i جواز جواز السفر-google-oauth2

قم بإنشاء ملف جديد ، PassportConfig.js، واستيراد إستراتيجية Google من جواز سفر جوجل oauth2 و userModel.js.

const GoogleStrategy = تتطلب ("Passport-google-oauth2"). إستراتيجية ؛
const User = تتطلب ("./ userModel") ؛

استخدم بيانات اعتماد التطبيق للتهيئة جواز سفر مع Google OAuth.

module.exports = (جواز السفر) => {
 Passport.use (new GoogleStrategy ({
 معرف العميل: process.env. CLIENT_ID ،
 سر العميل: process.env. CLIENT_SECRET ،
 عاود الاتصال بالعنوان: " http://localhost: 3000 / auth / google / callback "،
 passReqToCallback: صحيح
 },
 غير متزامن (طلب ، وصول ، تحديث ، ملف تعريف ، تم) => {
 يحاول {
 اسمح الموجودةUser = await User.findOne ({'google.id': profile.id}) ؛
// إذا كان المستخدم موجودًا ، فقم بإرجاع المستخدم
 إذا (مستخدم موجود) {
 تم إرجاعه (فارغ ، موجود مستخدم) ؛
 }
// إذا كان المستخدم غير موجود ، فقم بإنشاء مستخدم جديد
 console.log ('إنشاء مستخدم جديد ...') ؛
 const newUser = مستخدم جديد ({
 الطريقة: "google" ،
 غوغل: {
 المعرّف: profile.id ،
 الاسم: profile.displayName ،
 البريد الإلكتروني: profile.emails [0] .value
 }
 });
 انتظار newUser.save () ؛
 تم إرجاعه (null، newUser)؛
 } catch (خطأ) {
 تم الإرجاع (خطأ ، خطأ)
 }
 }
 ));
}

بمجرد تلقي معلومات الملف الشخصي من Google ، تحقق مما إذا كان المستخدم موجودًا في قاعدة البيانات. إذا فعلوا ذلك ، ما عليك سوى إعادة المستخدم الذي تم العثور عليه. إذا كان المستخدم جديدًا ، فأنشئ مستندًا جديدًا في قاعدة البيانات وأعد المستخدم الذي تم إنشاؤه.

لاحظ أنك تعمل مع الحسد المتغيرات لذلك استخدم npm صفقة دوتنف للوصول إليها في التطبيق الخاص بك.

ثبت دوتنف.

npm تثبيت dotenv

يستخدم دوتنف في app.js.

تتطلب ("dotenv"). config ()

في app.js،يمر جواز سفر ل PassportConfig.js

جواز سفر const = يتطلب ("جواز سفر") ؛
تتطلب ("./ PassportConfig") (جواز سفر) ؛

الخطوة 4: إنشاء مسارات المصادقة

تحتاج إلى ثلاث طرق من أجل:

• أعد توجيه المستخدم إلى صفحة تسجيل الدخول إلى Google للحصول على رمز الوصول.
• استرجع بيانات المستخدم باستخدام رمز الوصول الذي تم استلامه.
• أعد توجيه المستخدم إلى صفحة الملف الشخصي بعد المصادقة الناجحة.

// إعادة توجيه المستخدم إلى صفحة تسجيل الدخول إلى Google
app.get (
 "/ auth / google" ،
 Passport.authenticate ("google" ، {النطاق: ["البريد الإلكتروني" ، "الملف الشخصي"]})
);
// استرداد بيانات المستخدم باستخدام رمز الوصول الذي تم استلامه
app.get (
 "/ auth / google / callback" ،
 Passport.authenticate ("google"، {session: false}) ،
 (مطلوب ، الدقة) => {
 res.redirect ("/ الملف الشخصي /") ؛
 }
);
// مسار الملف الشخصي بعد تسجيل الدخول بنجاح
app.get ("/ profile"، (req، res) => {
 console.log (مطلوب) ؛
 res.send ("مرحبًا") ؛
});

الخطوة 5: حماية الطرق الخاصة

الآن بعد أن قمت بتسجيل الدخول كمستخدم ، كيف يمكنك تقييد بعض أجزاء التطبيق الخاص بك للمستخدمين المصادق عليهم فقط؟ طريقة واحدة للقيام بذلك هي استخدام JSON Web Tokens (JWTs). تقدم JWTs طريقة آمنة لنقل المعلومات. ل تخويل المستخدمين باستخدام JWTs ، سيقوم تطبيقك بما يلي:

• قم بإنشاء رمز مميز باستخدام بيانات المستخدم.
• قم بتمرير الرمز المميز للمستخدم (سيرسل المستخدم الرمز المميز مع الطلبات التي تحتاج إلى إذن).
• تحقق من إرسال الرمز المميز مرة أخرى.
• امنح حق الوصول إلى المستخدم إذا كان الرمز المميز المقدم صالحًا.

ثبت jsonwebtoken للعمل مع JWTs.

npm تثبيت jsonwebtoken

في app.js، يستورد jsonwebtoken.

const jwt = تتطلب ("jsonwebtoken")

قم بتعديل عنوان URL لمعاودة الاتصال في Google لتسجيل المستخدم وإنشاء رمز مميز.

app.get (
 "/ auth / google / callback" ،
 Passport.authenticate ("google"، {session: false}) ،
 (مطلوب ، الدقة) => {
 jwt.sign (
 {المستخدم: req.user} ،
 "مفتاح سري"،
 {expiresIn: "1h"}،
 (يخطئ ، رمز) => {
 إذا (يخطئ) {
 إرجاع res.json ({
 الرمز المميز: فارغ ،
 });
 }
 res.json ({
 رمز
 });
 }
 );
 }
);

إذا قمت بتسجيل الدخول ، فستتلقى الرمز المميز.

بعد ذلك ، استخدم جواز السفر JWT، وهي إستراتيجية JWT المقدمة من Passport للتحقق من الرمز المميز وتفويض المستخدمين.

npm تثبيت جواز السفر jwt

في PassportConfig.js، أضف إستراتيجية JWT.

const JwtStrategy = تتطلب ("جواز السفر- jwt"). إستراتيجية ؛
const {ExtractJwt} = تتطلب ("Passport-jwt") ؛
module.exports = (جواز السفر) => {
 Passport.use (GoogleStrategy جديدة (
// استراتيجية جوجل
 );
 جواز السفر.
 إستراتيجية Jwt الجديدة (
 {
 jwtFromRequest: ExtractJwt.fromHeader ("التفويض") ،
 مفتاح السر: "secretKey" ،
 },
 غير متزامن (jwtPayload ، تم) => {
 يحاول {
// استخراج المستخدم
 مستخدم const = jwtPayload.user ؛
 تم (فارغة ، مستخدم) ؛ 
 } catch (خطأ) {
 تم (خطأ ، خطأ) ؛
 }
 }
 )
 );
}

هنا ، تقوم باستخراج الرمز المميز من رأس التفويض حيث يتم تخزينه - وهو أكثر أمانًا من تخزينه في نص الطلب.

بمجرد التحقق من الرمز المميز ، يتم إرسال كائن المستخدم مرة أخرى إلى نص الطلب. لتفويض المستخدمين ، أضف البرامج الوسيطة لمصادقة JWT لجواز السفر إلى المسارات المحمية.

app.get (
 "/الملف الشخصي"،
 Passport.authenticate ("jwt"، {session: false}) ،
 (مطلوب ، الدقة ، التالي) => {
 res.send ("مرحبًا") ؛
 }
);

الآن ، فقط الطلبات التي تقدم رمزًا صالحًا ستحصل على حق الوصول.

الخطوات التالية

أوضح لك هذا البرنامج التعليمي كيف يمكنك استخدام Passport لتسجيل دخول المستخدمين إلى تطبيقك باستخدام حساب Google الخاص بهم. يعد استخدام Passport أبسط بكثير من النماذج الأخرى ، وستوفر الكثير من الوقت من خلال استخدامه.

يوفر Passport أيضًا استراتيجيات مصادقة أخرى لاستخدامها مع موفري الهوية الآخرين ، مثل Twitter و Facebook. لذا ، من الجدير التحقق من هؤلاء أيضًا.

مصادقة المستخدم في NodeJS باستخدام Passport و MongoDB

اقرأ التالي

عن المؤلف