Advertisement
  1. Code
  2. Yii

بناء بدء التشغيل مع PHP: تبسيط Onramp مع OAuth

by
Read Time:14 minsLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup With PHP: Email Commands
Building Your Startup: Exporting iCal Files into Calendar Events

Arabic (العربية/عربي) translation by Hamdan Veerlax (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

هذا البرنامج التعليمي جزء من سلسلة Build Your Startup With PHP على Envato Tuts +. في هذه السلسلة ، أرشدك من خلال إطلاق شركة ناشئة من المفهوم إلى الواقع باستخدام تطبيق مخطط الاجتماعات الخاص بي كمثال واقعي. في كل خطوة على طول الطريق ، سأصدر رمز مخطط الاجتماعات كأمثلة مفتوحة المصدر يمكنك التعلم منها. سوف أتطرق أيضا إلى القضايا التجارية ذات الصلة ببدء التشغيل عند ظهورها.

في هذا البرنامج التعليمي ، سأرشدك من خلال تنفيذ تكامل OAuth مع الشبكات الاجتماعية الشائعة لجعل الاشتراك والاستخدام المتكرر أسهل وأكثر كفاءة. سأقوم باستكشاف Facebook و Google و Twitter و LinkedIn ، الشبكات التي أراها أكثر ملاءمة للمستخدمين المستهدفين لمخطط الاجتماع.

تتم كتابة كافة التعليمات البرمجية لـ مخطط الاجتماع في إطار Yii2 لـ PHP. إذا كنت ترغب في معرفة المزيد عن Yii2 ، تحقق من سلسلة متوازية البرمجة مع Yii2 في Envato Tuts+.

إذا لم تجرِّب مخطط الاجتماعات حتى الآن ، فحاول جدولة اجتماعك الأول الآن. انها حقا بدأت في الاجتماع معا هذا العام. في النهاية ، تمكنت من استخدام دعم AuthClient المدمج في Yii2 لتوفير تسجيل الدخول من جميع الشبكات المذكورة أعلاه - حتى يمكنك استخدام هذه للتسجيل الآن.

ردود الفعل هو موضع ترحيب. إذا كان لديك سؤال أو اقتراح موضوع ، الرجاء نشر تعليق أدناه. يمكنك أيضًا الاتصال بي على Twitter@reifman.

ما هو اوتوكلينت؟

AuthClient عبارة عن دعم مضمّن من Yii لتطبيقاتك للمصادقة عبر خدمات جهات خارجية باستخدام OpenID أو OAuth أو OAuth2.

إذا كنت قد اتبعت سلسلة Yii2 في حزيران 2015 ، فستشاهدني باستخدام AuthClient للتكامل مع Google عبر OpenID ، لكن الشركة أنهت دعمها للمواصفات بعد فترة وجيزة. بعد ذلك ، في كانون الأول ، كتبت برنامجًا تعليميًا استخدم فيه ملحق Yii2-User لإضافة دعم Google OAuth - لم يكن إطار Yii2 يحتوي على هذا. ومع ذلك ، لا يتكامل Yii2-User جيدًا مع codebases المنشأة التي تحتوي بالفعل على تعليمات برمجية موجهة إلى المستخدم. ولكن لحسن الحظ ، فقد أضاف إطار Yii2 دعمًا إلى Google OAuth ، وأصبح كل شيء أكثر وضوحًا.

في هذا البرنامج التعليمي ، سأرشدك خلال استخدام وظيفة AuthClient الجديدة للتكامل مع مجموعة متنوعة من الشبكات الاجتماعية الشائعة. من خارج منطقة الجزاء ، يوفر Yii الدعم للعملاء التاليين:

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

دعونا نبدأ مع تكامل الرمز.

تثبيت AuthClient في تطبيقنا

أولاً ، نحتاج إلى تثبيت مكونات Yii لـ OAuth و AuthClient في Yi.

إضافة AuthClient إلى Composer

دعنا نضيف مكتبة AuthClient إلى composer.json:

بعد ذلك ، نحتاج إلى تحديث الملحن:

تكوين دعم AuthClient

ونحتاج إلى إضافة إعدادات تهيئة AuthClient إلى ملف التكوين الخاص بنا في frontend\config\main.php\.

إضافة عناصر مصفوفة لكافة خدمات الجهات الخارجية التي ترغب في دعمها (يمكن العثور على تفاصيل كل منها في دليل AuthClient):

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

تسجيل تطبيقات المطور

اتبع الخطوات التالية أثناء إرشادك أثناء الاشتراك في بعض الشبكات وبعض جوانب التهيئة الأعمق مع الآخرين.

التسجيل مع تويتر

قم بإنشاء تطبيق Twitter جديد على لوحة معلومات تطبيق Twitter:

Building Your Startup OAuth - Create AppBuilding Your Startup OAuth - Create AppBuilding Your Startup OAuth - Create App

انقر على إنشاء تطبيق جديد - لقد وجدت أن عنوان URL للإرجاع غير ضروري ، ولكن في الوقت الحالي ، استخدمت العنصر النائب http://mydomain.com/user/security/auth.

Building Your Startup OAuth - Twitter Dev App DetailsBuilding Your Startup OAuth - Twitter Dev App DetailsBuilding Your Startup OAuth - Twitter Dev App Details

ها هي الصفحة الجديدة لطلبنا:

Building Your Startup OAuth - Twitter App PageBuilding Your Startup OAuth - Twitter App PageBuilding Your Startup OAuth - Twitter App Page

وهنا صفحة الإعدادات:

Building Your Startup OAuth - Twitter Dev App SettingsBuilding Your Startup OAuth - Twitter Dev App SettingsBuilding Your Startup OAuth - Twitter Dev App Settings

إليك صفحة المفاتيح و رموز الوصول. هنا ، نحتاج إلى نسخ مفتاح العميل (مفتاح واجهة برمجة التطبيقات) وسرية العميل (سر API):

Building Your Startup OAuth - Twitter Dev App Keys and TokensBuilding Your Startup OAuth - Twitter Dev App Keys and TokensBuilding Your Startup OAuth - Twitter Dev App Keys and Tokens

هذه المفاتيح تذهب في ملف mp.ini الخاص بنا ، والذي تتم قراءته في المتغير $config الموجود أعلاه لتكوين AuthClient for Twitter.

تسجيل تطبيق Facebook لدينا

بعد ذلك ، لنقم بزيارة وحدة تحكم مطوّري برامج Facebook وإضافة تطبيق جديد:

Building Your Startup OAuth - Facebook Dev ConsoleBuilding Your Startup OAuth - Facebook Dev ConsoleBuilding Your Startup OAuth - Facebook Dev Console

سنختار إنشاء تطبيق موقع ويب WWW في الوقت الحالي:

Building Your Startup OAuth - Facebook Dev Console Add an AppBuilding Your Startup OAuth - Facebook Dev Console Add an AppBuilding Your Startup OAuth - Facebook Dev Console Add an App

قدم اسم طلبنا:

Building Your Startup OAuth - Facebook Dev Console Generate App IDBuilding Your Startup OAuth - Facebook Dev Console Generate App IDBuilding Your Startup OAuth - Facebook Dev Console Generate App ID

وجمع معرف التطبيق الجديد لدينا:

Building Your Startup OAuth - Facebook Dev Console Create an App DialogsBuilding Your Startup OAuth - Facebook Dev Console Create an App DialogsBuilding Your Startup OAuth - Facebook Dev Console Create an App Dialogs

يطلبون جميع المعلومات العادية ، مثل عناوين URL:

Building Your Startup OAuth - Facebook Dev Console App Webpage URLBuilding Your Startup OAuth - Facebook Dev Console App Webpage URLBuilding Your Startup OAuth - Facebook Dev Console App Webpage URL

وبعد ذلك يمكنك العثور على تطبيق مخطط الاجتماعات لدينا في القائمة:

Building Your Startup OAuth - Facebook Dev Console with Apps ListedBuilding Your Startup OAuth - Facebook Dev Console with Apps ListedBuilding Your Startup OAuth - Facebook Dev Console with Apps Listed

إليك لوحة تحكم Facebook لتطبيقك:

Building Your Startup OAuth - Facebook Dev Console Finished App PageBuilding Your Startup OAuth - Facebook Dev Console Finished App PageBuilding Your Startup OAuth - Facebook Dev Console Finished App Page

سجل مع جوجل

تعد واجهات برمجة تطبيقات Google أكثر تعقيدًا بعض الشيء من Twitter و Facebook ، لذلك من الصعب جدًا اتباع أسلوب UX. ولكن في الأساس ، بمجرد إنشاء تطبيق ، تحتاج إلى مفاتيح OAuth 2.0 ، التي تحصل عليها من خلال فتح منطقة التطبيق على شاشة بيانات الاعتماد:

Building Your Startup OAuth - Google Dev App CredentialsBuilding Your Startup OAuth - Google Dev App CredentialsBuilding Your Startup OAuth - Google Dev App Credentials

يأخذك إلى هنا:

Building Your Startup OAuth - Google Dev App Keys and redirect URLsBuilding Your Startup OAuth - Google Dev App Keys and redirect URLsBuilding Your Startup OAuth - Google Dev App Keys and redirect URLs

لأسباب تتعلق بالأمان ، تتطلب Google (و LinkedIn) قائمة كاملة بمدى دقة مسارات وعناوين URL التي يمكن استخدامها أثناء تسلسل OAuth. أثناء التطوير ، قد يتطلب هذا الكثير من التعديل - حتى للاختبار من localhost.

بمجرد إدخالها ، ستراها مدرجة أدناه:

Building Your Startup OAuth - Google Dev App All Those URLsBuilding Your Startup OAuth - Google Dev App All Those URLsBuilding Your Startup OAuth - Google Dev App All Those URLs

تعمل Google بشكل رائع في مساعدتك على تهيئة شاشة الموافقة التي سيشاهدها المستخدمون عندما يحاولون الاشتراك أو ربط حساب Google بمخطط الاجتماعات:

Building Your Startup OAuth - Google Dev App Credentials PreviewBuilding Your Startup OAuth - Google Dev App Credentials PreviewBuilding Your Startup OAuth - Google Dev App Credentials Preview

سجل مع ينكدين

ينكدين بسيط إلى حد ما مقارنة بـ Google. أنت بحاجة إلى التفاصيل الأساسية لطلبك:

Building Your Startup OAuth - LinkedIn Dev App SettingsBuilding Your Startup OAuth - LinkedIn Dev App SettingsBuilding Your Startup OAuth - LinkedIn Dev App Settings

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

Building Your Startup OAuth - LinkedIn Dev Keys and Redirect URLs againBuilding Your Startup OAuth - LinkedIn Dev Keys and Redirect URLs againBuilding Your Startup OAuth - LinkedIn Dev Keys and Redirect URLs again

ترتيبوضع مفاتيح في ملف التكوين لدينا

في حماية مفاتيحك من GitHub ، وصفت بالتفصيل كيف أستخدم ملف تهيئة لتخزين جميع المفاتيح الخاصة بي بصرف النظر عن مستودع GitHub الخاص بي. ثم أقوم بتضمين هذا الملف في بداية ملفات تهيئة Yii الخاصة بي. هذا يحفظني من فحص المفاتيح الخاصة بي عن طريق الخطأ إلى مخزني وتهديد حساباتي.

نضع مفاتيح تطبيق Twitter و Facebook والأسرار في /var/secure/mp.ini/ خارج المستودع:

هنا مرة أخرى هو رمز في frontend\config\main.php\ الذي يتضمن هذه الإعدادات ويعين متغيرات التكوين الفردية:

تحديث المخطط لتخزين مفاتيح الجلسات

الآن بعد أن أصبح جاهزًا لكتابة رمز لدمج الاشتراك الاجتماعي وتسجيل الدخول ، نحتاج إلى قاعدة البيانات لإنشاء جدول مصادقة والذي سيخزن الخدمة الاجتماعية ، ومعرّفها للشخص ، و user_id لهذا الشخص في مخطط الاجتماع:

في ما يلي شكل الترحيل:

وهنا النتيجة عندما نديرها:

مرة أخرى ، استعملت المولد الشفهي لـ Yi Gii لإنشاء نموذج Auth:

Building Your Startup OAuth - Yiis Gii Model Generator of Auth ModelBuilding Your Startup OAuth - Yiis Gii Model Generator of Auth ModelBuilding Your Startup OAuth - Yiis Gii Model Generator of Auth Model

في النهاية ، سيحتفظ جدول Auth بمحتويات مثل هذه:

Building Your Startup OAuth - Database view of Auth tableBuilding Your Startup OAuth - Database view of Auth tableBuilding Your Startup OAuth - Database view of Auth table

إضافة AuthChoice القطعة إلى مخطط الاجتماع

تقوم أداة AuthChoice في Yii2 بعمل ممتاز في تنفيذ أزرار تسجيل الدخول لكل خدمة تقوم بتكوينها. ويفعل ذلك بالترتيب الذي تقوم فيه بإعداد مجموعة الخدمات والمفاتيح (بحيث يمكنك تغييرها).

من السهل جدًا إضافة الأداة إلى نماذجنا على login.php و signup.php:

ها هي صفحة الاشتراك لدينا الآن:

Building Your Startup OAuth - The New Login Screen with AuthChoice Widget Buttons to Social NetworksBuilding Your Startup OAuth - The New Login Screen with AuthChoice Widget Buttons to Social NetworksBuilding Your Startup OAuth - The New Login Screen with AuthChoice Widget Buttons to Social Networks

بالنسبة إلى المستخدمين الحاليين الذين يسجلون دخولهم ، أنشأت طريقة سهلة لهم لربط حساباتهم. يطلق عليه Link Social Accounts على صفحة إعدادات الملف الشخصي:

Building Your Startup OAuth - New Link Social AccountsBuilding Your Startup OAuth - New Link Social AccountsBuilding Your Startup OAuth - New Link Social Accounts

إذا نقرت على LinkedIn ، فإليك شاشة OAuth التي ستطلب منك منح إذن لمخطط الاجتماعات:

Building Your Startup OAuth - LinkedIn Permissions PageBuilding Your Startup OAuth - LinkedIn Permissions PageBuilding Your Startup OAuth - LinkedIn Permissions Page

وهنا شاشة جوجل:

Building Your Startup OAuth - Google Permissions PageBuilding Your Startup OAuth - Google Permissions PageBuilding Your Startup OAuth - Google Permissions Page

ولكن ما الذي يحدث بالفعل عندما يسمح لنا المستخدم بمشاركة تفاصيل حسابه الاجتماعي؟ دعنا نتصفح الشفرة التي كتبتها لمعالجة إجراءات المستخدمين.

معالجة إذن OAuth

يعالج frontend \ controllers \ SiteController.php\ إجراء المصادقة الوارد إلى الدالة onAuthSuccess:

يقدم معظم عملاء OAuth الجيدين معلومات مماثلة في مجموعة خصائص مشابهة ، باستثناء Twitter. تأخر Twitter إلى لعبة مشاركة عناوين البريد الإلكتروني ، وبالنسبة إلى MVP لن يكون من المفيد القيام بالعمل الإضافي لتكوينه الآن. جوجل و Facebook أكثر انتشارا.

أولاً ، أقوم بتجميع تفاصيل الخدمة وجمع أكبر قدر ممكن من البيانات الشخصية: البريد الإلكتروني واسم العائلة واسم العائلة والاسم الكامل ، وخصوصًا المعرّف الخارجي لذلك المستخدم في تلك الشبكة الاجتماعية:

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

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

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

إذا كان المعرف الخارجي موجودًا بالفعل في جدول Auth ، فسوف نسجله. كان ذلك سهلاً (بالنسبة لهم)!

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

Building Your Startup OAuth - Error Msg for We have Your Email PreviouslyBuilding Your Startup OAuth - Error Msg for We have Your Email PreviouslyBuilding Your Startup OAuth - Error Msg for We have Your Email Previously

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

إذا ربطوا من صفحة الاشتراك ، فنحن نضمن عدم خوض المستخدم الجديد لاسم مستخدم مكرر (لمستخدم مخطط الاجتماع الموجود مسبقًا). في هذا السيناريو ، نقوم فقط بتوسيع اسم المستخدم بسلسلة عشوائية في الوقت الحالي. ونحن نسجلها كمستخدم جديد في Meeting Planner بكلمة مرور (والتي لن تحتاج إليها حقًا).

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

ربط حسابات مخطط الاجتماعات الحالية

إذا كانوا قادمين من علامة تبويب الحسابات الاجتماعية في Link في صفحة الملف الشخصي للمستخدم (بدلاً من صفحة تسجيل الدخول أو تسجيل الدخول) ، فإننا نحتاج فقط إلى إضافة تفاصيل حسابهم الخارجي إلى Auth ، ونقل معلومات تسجيل الدخول الخاصة بهم إلى User :: STATUS_ACTIVE. (تذكر أن المستخدمين الذين يصلون من ارتباطات دعوة منظم الاجتماع ولكنهم غير مسجلين لديهم وضع User :: STATUS_PASSIVE.)

إليك ما يبدو (في المستقبل ، سأملأ معلومات التسمية من معلومات OAuth - لم يتم تنفيذها بعد):

Building Your Startup OAuth - Successful Account LinkageBuilding Your Startup OAuth - Successful Account LinkageBuilding Your Startup OAuth - Successful Account Linkage

في الختام

لا بد لي من الاعتراف بأن تأثير اتصالات OAuth العملية بالخدمات الرئيسية مثل Google و Facebook و LinkedIn أمر مثير جدًا. يجعل الاشتراك والاستخدام المنتظم لمخطط الاجتماعات سهل وسريع للمصادقة المستقبلية. انها حقا نوع من لا يصدق.

لقد حان اجتماع منظم حقا معا في الشهرين الماضيين. يرجى تجربة تسجيل الدخول والتسجيل الاجتماعي الآن! شاهد البرامج التعليمية القادمة في سلسلة بدء عملك مع PHP - هناك الكثير من الميزات المرحة التي ستظهر عندما يتجه المنتج نحو MVP.

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

لا تتردد في إضافة أسئلتك وتعليقاتك أدناه ؛ أشارك بشكل عام في المناقشات. يمكنك أيضا الوصول لي على تويترreifman@. أرحب بميزة الموضوع والموضوع.

إذا كنت ترغب في معرفة موعد وصول البرنامج التعليمي Yii2 التالي ، فاتبعنيreifman@ على تويتر أو التحقق من صفحة مدرب بلدي. ستشمل صفحتي التدريبية جميع المقالات من هذه السلسلة بمجرد نشرها.

روابط ذات علاقة

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.