الإعداد

للسماح بالوصول إلى Google APIs في تطبيق الويب باستخدام مكتبة JavaScript لخدمات Google Identity (google.accounts.oauth2)، عليك أولاً إجراء ما يلي:

  1. احصل على معرِّف عميل OAuth 2.0.
  2. اضبط شاشة طلب الموافقة المتعلّقة ببروتوكول OAuth ونطاقاتها.
  3. تحميل مكتبة البرامج
  4. يمكنك إعداد "سياسة أمان المحتوى" (CSP) و"سياسة فتح النوافذ متعدّدة المصادر" (COOP).

الحصول على معرّف عميل Google API

لتفعيل ميزة "تفويض حساب Google" على موقعك الإلكتروني، عليك أولاً إعداد معرّف عميل Google API. أكمِل الخطوات التالية:

  1. افتح صفحة "العملاء" في Google Cloud Console.
  2. أنشِئ مشروعًا على Cloud Console أو اختَر مشروعًا حاليًا. عند إنشاء تطبيقات إنتاج، قد يكون من الضروري إنشاء مشاريع متعددة، لذا يُرجى تكرار الخطوات المتبقية في هذا القسم لكل مشروع تديره.
  3. انقر على إنشاء عميل، واختَر تطبيق ويب في حقل نوع التطبيق لإنشاء معرِّف عميل جديد. لاستخدام معرِّف عميل حالي، اختَر أحد معرّفات تطبيقات الويب.

  4. أضِف معرّف الموارد المنتظم (URI) لموقعك الإلكتروني إلى مصادر JavaScript المسموح بها. يتضمّن معرّف الموارد المنتظم (URI) المخطط واسم المضيف المؤهَّل بالكامل فقط. على سبيل المثال: https://www.example.com.

  5. إذا كنت تستخدم نموذج رمز التفويض مع ux_mode: 'redirect' (أو رموز تفويض التبادل في نقطة نهاية خلفية)، أضِف معرّفات الموارد المنتظمة (URI) لإعادة التوجيه إلى معرّفات الموارد المنتظمة (URI) المعتمَدة لإعادة التوجيه. تتضمّن معرّفات الموارد المنتظمة (URI) لإعادة التوجيه المخطط واسم المضيف المؤهَّل بالكامل والمسار، ويجب أن تتوافق مع قواعد التحقّق من معرّفات الموارد المنتظمة (URI) لإعادة التوجيه. على سبيل المثال، https://www.example.com/oauth2callback.

بعد اكتمال عملية الضبط، دوِّن معرّف العميل الذي تم إنشاؤه. ستمرّر هذه القيمة في السمة client_id عند إعداد initCodeClient() أو initTokenClient(). (يتم أيضًا إنشاء سر عميل، ويجب الحفاظ على سريته واستخدامه فقط لعمليات تبادل الرموز المميزة من جهة الخادم).

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

  1. افتح صفحة "الهوية البصرية للعلامة التجارية" في قسم Google Auth Platform ضمن Cloud Console.
  2. اختَر المشروع الذي أعددته إذا طُلب منك ذلك.
  3. املأ نموذج الهوية البصرية (اسم التطبيق وشعار التطبيق والبريد الإلكتروني للدعم والنطاقات المصرَّح بها ورابط الصفحة الرئيسية للتطبيق ورابط سياسة الخصوصية) وانقر على حفظ.
  4. انتقِل إلى صفحة "الوصول إلى البيانات" لضبط نطاقات Google API التي يتطلّبها تطبيقك. من أفضل الممارسات طلب النطاقات بشكل تدريجي، في الوقت الذي يكون فيه الوصول مطلوبًا، بدلاً من طلبها مسبقًا.
  5. اطّلِع على حالة التحقّق. إذا كان تطبيقك يطلب نطاقات حساسة أو محدودة، يجب إرسال طلبك لإجراء عملية التحقّق. يُرجى الاطّلاع على متطلبات التحقّق من OAuth لمزيد من التفاصيل.

سياسة أمان المحتوى وCOOP

إذا كان تطبيق الويب يفرض سياسة أمان المحتوى (CSP)، يجب السماح بمصادر Google Identity Services التالية:

  • script-src: https://accounts.google.com/gsi/client
  • frame-src: https://accounts.google.com/gsi/
  • connect-src: https://accounts.google.com/gsi/

بالنسبة إلى عمليات التفويض المنبثقة (initTokenClient أو initCodeClient مع ux_mode: 'popup')، اضبط عنوان استجابة HTTP Cross-Origin-Opener-Policy (COOP) على same-origin-allow-popups لكي تتمكّن نافذة مربّع الحوار من إرسال استجابة التفويض إلى صفحتك.

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

بعد ذلك، حمِّل مكتبة برامج العميل على صفحة الويب لبدء إعداد عميل التفويض.