الإعداد

لإضافة زر "تسجيل الدخول باستخدام حساب Google" أو إشعارَي "تسجيل الدخول بنقرة واحدة" و"تسجيل الدخول تلقائيًا" إلى موقعك الإلكتروني، عليك أولاً:

  1. الحصول على معرِّف عميل OAuth 2.0
  2. ضبط إعدادات وعلامة OAuth التجارية
  3. تحميل مكتبة عملاء Google Identity Services
  4. إعداد سياسة أمان المحتوى اختياريًا
  5. تعديل السياسة المحدّدة لفتح المستندات المشتركة المصدر

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

لتفعيل "خدمات هوية Google" على موقعك الإلكتروني، عليك أولاً إعداد معرّف عميل واجهة برمجة التطبيقات من Google. لإجراء ذلك، يُرجى إكمال الخطوات التالية:

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

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

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

أدرِج معرّف العميل في تطبيق الويب باستخدام حقلَي data-client_id أو client_id.

تتضمّن كل من ميزة "تسجيل الدخول باستخدام حساب Google" ومصادقة One Tap شاشة موافقة تُعلم المستخدمين بالتطبيق الذي يطلب الوصول إلى بياناتهم ونوع البيانات التي يُطلب منهم تقديمها والأحكام التي تنطبق.

  1. افتح في قسم Google Auth Platform ضمن .
  2. اختَر المشروع الذي أنشأته للتو إذا طُلب منك ذلك.

  3. في ، املأ النموذج وانقر على الزر "حفظ".

    1. اسم التطبيق: هو اسم التطبيق الذي يطلب الموافقة. يجب أن يعبّر الاسم عن تطبيقك بدقة وأن يكون متسقًا مع اسم التطبيق الذي يظهر للمستخدمين في أماكن أخرى.

    2. شعار التطبيق: تظهر هذه الصورة على شاشة الموافقة لمساعدة المستخدِمين في التعرّف على تطبيقك. يظهر الشعار على شاشة الموافقة على ميزة "تسجيل الدخول باستخدام حساب Google" وعلى إعدادات الحساب، ولكن لا يظهر في مربّع حوار "النقرة الواحدة".

    3. عنوان البريد الإلكتروني لفريق الدعم: يظهر على شاشة الموافقة لفريق دعم المستخدمين ولمشرفي G Suite الذين يقيّمون إمكانية وصول المستخدمين إلى تطبيقك. يظهر عنوان البريد الإلكتروني هذا للمستخدمين على شاشة الموافقة على "تسجيل الدخول باستخدام حساب Google" عندما ينقر المستخدم على اسم التطبيق.

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

    5. رابط الصفحة الرئيسية للتطبيق: يظهر على شاشة طلب الموافقة على ميزة "تسجيل الدخول باستخدام حساب Google" ومعلومات إخلاء المسؤولية المتوافقة مع "اللائحة العامّة لحماية البيانات" (GDPR) في ميزة "تسجيل الدخول بنقرة واحدة" تحت الزر "متابعة باستخدام". يجب أن تكون مستضافة على نطاق مفوَّض.

    6. رابط سياسة خصوصية التطبيق: يظهر على شاشة طلب الموافقة على ميزة "تسجيل الدخول باستخدام حساب Google"، وعلى معلومات بيان إخلاء المسؤولية المتوافق مع "اللائحة العامّة لحماية البيانات" (GDPR) في ميزة "تسجيل الدخول بنقرة واحدة" تحت الزر "متابعة باسم". يجب أن تكون مستضافة على نطاق مفوَّض.

    7. رابط بنود خدمة التطبيق (اختياري): يظهر على شاشة طلب الموافقة على ميزة "تسجيل الدخول باستخدام حساب Google" ومعلومات إخلاء المسؤولية المتوافقة مع "اللائحة العامّة لحماية البيانات" (GDPR) في ميزة "تسجيل الدخول بنقرة واحدة" تحت الزر "متابعة باسم". يجب أن تكون مستضافة على نطاق مفوَّض.

  4. انتقِل إلى لضبط النطاقات لتطبيقك.

    1. نطاقات واجهات برمجة تطبيقات Google: تسمح النطاقات لتطبيقك بالوصول إلى data المستخدم الخاصة. بالنسبة إلى المصادقة، يكون النطاق التلقائي (البريد الإلكتروني والملف الشخصي وopenid) كافيًا، ولا تحتاج إلى إضافة أي نطاقات حسّاسة. من أفضل الممارسات بشكل عام طلب النطاقات بشكل تدريجي، في وقت الحاجة إلى الوصول، بدلاً من طلبها مسبقًا.

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

عرض إعدادات OAuth أثناء تسجيل الدخول

النقرة الواحدة باستخدام FedCM

إعدادات موافقة OAuth كما تظهر في ميزة "النقرة الواحدة" من Chrome باستخدام FedCM

يتم عرض النطاق المفوَّض من المستوى الأعلى أثناء موافقة المستخدم في Chrome. إنّ استخدام ميزة "النقرة الواحدة" في إطارات iframe من مصادر متعددة ولكن على الموقع الإلكتروني نفسه فقط هو طريقة متوافقة.

ميزة "نقرة واحدة" بدون FedCM

إعدادات موافقة OAuth كما تظهر في ميزة "النقرة الواحدة"

يتم عرض اسم التطبيق أثناء موافقة المستخدم.

الشكل 1: إعدادات موافقة OAuth التي تعرِضها ميزة "النقرة الواحدة" في Chrome

تحميل مكتبة العميل

احرص على تحميل مكتبة برامج Google Identity Services على أي صفحة قد يُسجّل فيها المستخدم الدخول. استخدِم مقتطف الرمز البرمجي التالي:

<script src="https://accounts.google.com/gsi/client" async></script>

يمكنك تحسين سرعة تحميل صفحاتك إذا حمّلت النص البرمجي باستخدام السمة async.

راجِع مراجع واجهتَي برمجة التطبيقات HTML وJavaScript للاطّلاع على قائمة methods والخصائص التي تتوافق معها المكتبة.

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

على الرغم من أنّ سياسة أمان المحتوى اختيارية، إلا أنّنا ننصح باستخدامها لتأمين تطبيقك ومنع هجمات استخدام النصوص البرمجية على المواقع الإلكترونية (XSS). لمزيد من المعلومات، يمكنك الاطّلاع على مقدّمة عن سياسة أمان المحتوى (CSP) وسياسة أمان المحتوى (CSP) وهجمات XSS.

قد تتضمّن سياسة أمان المحتوى توجيهًا واحدًا أو أكثر، مثل connect-src أو frame-src أو script-src أو style-src أو default-src.

إذا كان مقدّم خدمة إدارة المحتوى (CSP) يتضمّن ما يلي:

  • توجيه connect-src، أضِف https://accounts.google.com/gsi/ للسماح لصفحة بتحميل عنوان URL الرئيسي لنقاط نهاية Google Identity Services من جهة الخادم.
  • frame-src، أضِف https://accounts.google.com/gsi/ للسماح بالملف الشخصي لعنوان URL الرئيسي لإطارَي iframe لزرَّي One Tap و"تسجيل الدخول باستخدام حساب Google".
  • script-src، أضِف https://accounts.google.com/gsi/client لسماح بعنوان URL لمكتبة JavaScript في Google Identity Services.
  • style-src، أضِف https://accounts.google.com/gsi/style للسماح بعنوان URL لجداول التنسيق في "خدمات إدارة الهوية من Google".
  • يُعدّ توجيه default-src، في حال استخدامه، بديلاً في حال عدم تحديد أي من التوجيهات السابقة (connect-src أو frame-src أو script-src أو style-src). أضِف https://accounts.google.com/gsi/ للسماح لصفحة بتحميل عنوان URL الأصلي لنقاط نهاية Google Identity Services من جهة الخادم.

تجنَّب إدراج عناوين URL فردية لنظام المعلومات الجغرافية عند استخدام connect-src. يساعد ذلك في تقليل الأعطال عند تحديث نظام المعلومات الجغرافية. على سبيل المثال، بدلاً من إضافة https://accounts.google.com/gsi/status، استخدِم عنوان URL الرئيسي لنظام المعلومات الجغرافية https://accounts.google.com/gsi/.

يتيح مثال عنوان الاستجابة هذا لخدمات Google Identity Services التحميل والتنفيذ بنجاح:

Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;

السياسة المحدّدة لفتح المستندات المشتركة المصدر

قد يتطلّب زر "تسجيل الدخول باستخدام حساب Google" وميزة "Google One Tap" إجراء تغييرات على Cross-Origin-Opener-Policy (COOP) من أجل إنشاء النوافذ المنبثقة بنجاح.

عند تفعيل FedCM، يعرض المتصفّح النوافذ المنبثقة مباشرةً ولا يلزم إجراء أي تغييرات.

ومع ذلك، عند إيقاف FedCM، يجب ضبط عنوان COOP:

  • إلى same-origin و
  • أن تتضمّن same-origin-allow-popups

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