ما هو معرف العميل؟
معرف عميل Google (أو ClientID) هو معرف فريد يتم تعيينه للتطبيق/المستخدم. يتم استخدامه لمصادقة العملاء والخوادم باستخدام OAuth (Auth 2.0).

للحصول على معرف عميل Google، افتح Google Cloud Console، وابدأ مشروعًا جديدًا. في هذا البرنامج التعليمي، سنسمي المشروع "GoogleReact Sign-In"، ولكن يمكنك اختيار أي اسم تفضله.

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

الآن، قبل إنشاء بيانات الاعتماد الخاصة بك، دعنا ننتقل إلى شاشة موافقة OAuth لإعداد شاشة الموافقة.

قم بإعداد شاشة الموافقة على تسجيل الدخول إلى Google.

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

ببساطة، عند استخدام OAuth 2.0 للحصول على التفويض، يطلب تطبيقك من المستخدم تفويض نطاق وصول واحد أو أكثر باستخدام حساب Google الخاص به. تتضمن نطاقات الوصول أي معلومات أو أنشطة يُصرح لتطبيقك بالوصول إليها أو القيام بها على حساب المستخدم.

لإعداد صفحة موافقة Google لتطبيق React الخاص بك، انتقل إلى علامة التبويب "شاشة موافقة OAuth" في القائمة اليمنى لوحدة تحكم Google Cloud الخاصة بك.

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

بعد ذلك، ضمن نفس الصفحة، قم بتوفير اسم لتطبيقك وعنوان بريد إلكتروني لتلقي التحديثات حول حالة المشروع.

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

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

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

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

قم بإنشاء معرف عميل الويب الخاص بك.

الآن، سنعود إلى خيار بيانات الاعتماد للوصول إلى الصفحة حيث يمكنك إنشاء معرف عميل الويب الخاص بك.
على الشاشة، حدد إنشاء بيانات الاعتماد في أعلى الصفحة، ثم انقر فوق معرف عميل OAuth.

سيُطلب منك اختيار نوع التطبيق كما هو موضح أدناه. انتقل إلى تطبيق الويب إذا كنت تتبع هذه الخطوات لـ React (نحن نستخدم معرف عميل Google للويب).

بعد ذلك، سنختار اسمًا لمعرف العميل الخاص بنا لتحديد أو تحديد رابط المعرف المحدد لتطبيق واحد، ويتم استخدام هذا الاسم. للتمييز بين معرفات الويب وiOS وAndroid، يمكننا وضع "Web ID" و"Android ID" و"iOS ID" وما إلى ذلك في اصطلاحات التسمية الخاصة بهم:

بعد ذلك، سنقدم نوعين من عناوين URL: أصول JavaScript المعتمدة وعناوين URL لإعادة التوجيه المعتمدة.

"عنوان URL لأصول JavaScript المعتمدة" هو عنوان URL الذي يقوم تطبيقك بتسجيل الدخول منه. بالنسبة لمطوري React، فهو المضيف المحلي (المضيف المحلي: 3000) أو عنوان URL المستضاف إذا كنت قد استضفت تطبيقك.

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

أضف عناوين URL التالية إلى أصول JavaScript المعتمدة وعناوين URL لإعادة التوجيه المعتمدة: http://localhost:3000 وhttp://localhost، على التوالي:

لإنشاء معرف عميل الويب، ستحتاج إلى النقر فوق الزر "إنشاء". ستتم إعادتك إلى الصفحة الرئيسية، حيث يمكنك عرض بيانات الاعتماد التي تم إنشاؤها حديثًا. لنسخ معرف عميل الويب الجديد، اضغط على أيقونة النسخ.

الآن بعد أن نجحنا في إنشاء معرف عميل الويب الخاص بنا، ستنتقل إلى تطبيق React الخاص بنا وتضيف معرف العميل الخاص بك إلى ملف .env.