الإعداد

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

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

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

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

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

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

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

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

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

  1. افتح في قسم "منصّة Google للمصادقة" ضمن.
  2. إذا طُلب منك ذلك، اختَر المشروع الذي أنشأته للتو.

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

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

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

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

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

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

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

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

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

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

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

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

استخدام ميزة "نقرة واحدة" من خلال FedCM

إعدادات الموافقة على OAuth كما يعرضها Chrome One Tap باستخدام FedCM

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

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

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

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

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

تحميل مكتبة البرامج

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

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

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

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

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

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

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

إذا كان موفّر خدمة السحابة الإلكترونية يتضمّن ما يلي:

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

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

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

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" إجراء تغييرات على Cross-Origin-Opener-Policy (COOP) من أجل إنشاء النوافذ المنبثقة بنجاح.

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

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

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

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