من السهل مصادقة جوجل ل Node.js

5 خطوات بسيطة للتكامل مع جوجل - رمز المدرجة.

تضخمت عيني بالدموع كما أدركت أن الساعات العشر الأخيرة من الترميز كانت بلا مقابل ... Passport.js قد أعطاني ، وشعوب هذا العالم ، أملاً مزيفًا.

لست متأكدًا مما إذا كنت قد نظرت من قبل إلى الكود الموجود داخل مكتبة Passport.js ولكن ليس هناك الكثير منه ، وهو ليس جيدًا أيضًا. إنه في الأساس رمز صغير يتأكد من وضع بيانات اعتماد المصادقة في المكان الصحيح. لكن العيب الرئيسي لهذا هو أنه يقتل مرونتك. باستخدام جواز السفر ، يجب إعادة توجيه طلبات رد الاتصال الخاصة بك إلى الخادم. إذا كنت لا تعرف معنى ذلك ؛ بشكل أساسي ، تتمص إذا كنت تقوم بإنشاء أي نوع من التطبيق بخلاف تطبيق خادم مقدم (مثل تطبيق صفحة واحدة أو SPA).

لكن لا تقلق! إليك برنامج تعليمي سريع سيوضح لك كيفية إضافة Google Auth بشكل صحيح.

قبل البدء ️

يفترض هذا البرنامج التعليمي أن لديك:

  1. فهم جيد لجافا سكريبت و Node.js
  2. تطبيق مع خادم

رائع ، دعنا نذهب!

الخطوة 1: تثبيت التبعيات 🖥

واحد فقط - إنه موجود على NPM إذا لم تكن قد افترضت ذلك بالفعل.

  • googleapis

كان ذلك سهلا!

الخطوة 2: تكوين Google

بعد ذلك ، ستحتاج إلى تكوين المكتبة بأوراق اعتمادك حتى تعرف Google من يقوم بتقديم الطلبات.

للحصول على بيانات اعتماد - إذا لم تكن تمتلكها بالفعل - انتقل إلى وحدة التحكم في Google الخاصة بك وقم بإنشاء مشروع جديد. بمجرد أن يكون لديك مشروع جديد ، اطلب بعض مفاتيح API. هنا رابط جيد لمزيد من المساعدة في هذا الشأن.

ملف: src / google-util.js

الملف أعلاه ؛ يستورد المكتبة ، ويقوم بإنشاء كائن تهيئة بتفاصيلنا ، ويضيف وظيفة تتصل بـ Google عندما نريدها.

الخطوة 3: احصل على عنوان URL لتسجيل الدخول إلى Google

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

ملف: src / google-util.js

الكود أعلاه يقوم ببعض الأشياء ؛ يحدد المعلومات والأذونات التي نريدها من المستخدم عند تسجيل الدخول ، كما أنه ينشئ وظيفة سنستخدمها لإنشاء عنوان URL. أخيرًا ، نقوم بإنشاء دالة تنشئ عنوان URL ستحتاج إلى إرساله إلى العميل.

الخطوة 4: دورك - إعادة توجيه المستخدمين إلى عنوان URL الخاص بـ Google

تتطلب هذه الخطوة منك إرسال المستخدمين إلى عنوان URL الذي أنشأناه للتو. في تطبيقي ، أقوم بإنشاء عنوان URL في واجهة برمجة التطبيقات وأرسله إلى الواجهة الأمامية حيث اجعله عنوان href لزر ما ، على سبيل المثال

 تسجيل الدخول باستخدام Google 

سينتقل هذا المستخدم إلى صفحة تسجيل الدخول.

استكشاف الأخطاء وإصلاحها: إذا أتيت إلى صفحة تخبرك بأنه ليس لديك حق الوصول (أو شيء مشابه) فقد يعني ذلك أنك لم تقم بتكوين بيانات اعتماد مشروع Google بشكل صحيح. تأكد من إعدادهم بشكل صحيح في Google Console.

الخطوة 5: حفظ تفاصيل تسجيل الدخول

نأمل أن تكون قادرًا على تسجيل الدخول إلى حساب google الخاص بك وأن تعيد Google توجيهك إلى تطبيقك (أو عنوان إعادة التوجيه الذي أخبرته بالذهاب إليه). الآن كل ما يتعين علينا القيام به هو التأكد من أن الحساب الذي قام بتسجيل الدخول به يطابق مستخدمًا في قاعدة بياناتنا (أو أنشئ حسابًا واحدًا).

للقيام بذلك ، أعطتنا Google معلمة على عنوان إعادة التوجيه المسمى "code". سترى هذا كـ:

https://yourwebsite.com/callback؟code=a-bunch-of-random-characters

تحتاج إلى استخراج معلمة "الرمز" هذه وإعادتها إلى مكتبة Google api للتحقق من هوية المستخدم الذي قام بتسجيل الدخول. إليك حزمة NPM جيدة يمكنها مساعدتك في استخراج المعلمة ولكن لا يهم كيف تقوم بذلك.

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

ملف: src / google-util.js

الآن كل ما عليك فعله هو التحقق من البريد الإلكتروني أو المعرف مقابل قاعدة البيانات الخاصة بك وتسجيل المستخدم أو تسجيل الدخول - الأمر متروك لك!

النسخة الكاملة

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

Yahoooo !!

يدعم تطبيقك الآن Google. للوصول إلى أيٍّ من واجهات برمجة التطبيقات الخاصة بـ Google ، ما عليك سوى إضافتها إلى مجموعة "النطاقات" الخاصة بك وعندما يذهب المستخدم لتسجيل الدخول ، سيُطلب منك منحك حق الوصول إلى تلك البيانات ، على سبيل المثال بيانات تقويم Google.

إذا كنت قد استمتعت بهذا المقال ، فيرجى تقديم عدد قليل من التصفيق (يمكنك ترك ما يصل إلى 50) أو يمكنك التعليق إذا كان لديك أي أسئلة ، سأبذل قصارى جهدي للإجابة!

تابعني على تويتر.

شكر!

المادة التي أنشأتها مؤسسي Authenticator - مصادقة بسيطة وسريعة لتطبيقك.

المزيد من الوظائف من قبل جاك سكوت.

  • كيف بدأت تشغيل في 4 أيام
  • بناء خادم GraphQL كامل مع Node.js
  • وداعا استرجاع