مرجع واجهة برمجة التطبيقات HTML الخاصة بخدمة "تسجيل الدخول باستخدام Google"

توضّح صفحة المرجع هذه واجهة برمجة التطبيقات لسمات بيانات HTML الخاصة بميزة "تسجيل الدخول باستخدام حساب Google"، المستخدَمة لعرض الزر "تسجيل الدخول باستخدام حساب Google" أو طلب "النقرة الواحدة" على صفحات الويب.

العنصر الذي يحمل المعرّف "g_id_onload"

يمكنك وضع سمات بيانات "تسجيل الدخول باستخدام Google" في أي عناصر مرئية أو غير مرئية، مثل <div> و<span>. الشرط الوحيد هو ضبط معرّف العنصر على g_id_onload. لا تضع رقم التعريف هذا على عناصر متعددة.

سمات البيانات

يسرد الجدول التالي سمات البيانات مع أوصافها:

السمة
data-client_id معرّف العميل لتطبيقك
data-color_scheme نظام الألوان المُطبَّق على طلب نقرة واحدة
data-auto_prompt عرض ميزة "نقرة واحدة" من Google
data-auto_select تتيح هذه السمة إمكانية الاختيار التلقائي على Google One Tap.
data-login_uri عنوان URL لنقطة نهاية تسجيل الدخول
data-callback اسم دالة معالجة الرمز المميّز لتعريف JavaScript
data-native_login_uri عنوان URL لنقطة نهاية معالج بيانات اعتماد كلمة المرور
data-native_callback اسم دالة معالج بيانات اعتماد كلمة المرور في JavaScript
data-native_id_param اسم مَعلمة قيمة credential.id
data-native_password_param اسم مَعلمة قيمة credential.password
data-cancel_on_tap_outside تتحكّم هذه السمة في ما إذا كان سيتم إلغاء الإشعار إذا نقر المستخدم خارج الإشعار.
data-prompt_parent_id معرّف DOM لعنصر حاوية طلب One Tap
data-skip_prompt_cookie تتخطّى نقرة واحدة إذا كانت ملفات تعريف الارتباط المحدّدة تتضمّن قيمة غير فارغة.
data-nonce سلسلة عشوائية لرموز التعريف
data-essential_claims مطالبات إضافية يتم تضمينها في رمز التعريف الذي تعرضه Google.
data-context العنوان والكلمات في إشعار ميزة "نقرة واحدة"
data-moment_callback اسم دالة أداة معالجة إشعارات حالة واجهة المستخدم الخاصة بالمطالبة
data-state_cookie_domain إذا كنت بحاجة إلى استدعاء One Tap في النطاق الرئيسي ونطاقاته الفرعية، مرِّر النطاق الرئيسي إلى هذه السمة ليتم استخدام ملف تعريف ارتباط مشترك واحد.
data-ux_mode مسار تجربة المستخدم لزر "تسجيل الدخول باستخدام حساب Google"
data-allowed_parent_origin المصادر المسموح لها بتضمين إطار iframe الوسيط تعمل ميزة "نقرة واحدة" في وضع iframe الوسيط إذا كانت هذه السمة متوفّرة.
data-intermediate_iframe_close_callback تتجاوز هذه السمة السلوك التلقائي لإطار iframe الوسيط عندما يغلق المستخدمون ميزة نقرة واحدة يدويًا.
data-itp_support تفعيل تجربة المستخدم المحسّنة لميزة "النقرة الواحدة" على المتصفّحات التي تتوافق مع "سياسة الشفافية وتتبُّع الإعلانات"
data-login_hint تخطّي اختيار الحساب من خلال تقديم تلميح للمستخدم.
data-hd تقييد اختيار الحساب حسب النطاق
data-use_fedcm_for_prompt السماح للمتصفّح بالتحكّم في طلبات تسجيل الدخول للمستخدمين والتوسّط في عملية تسجيل الدخول بين موقعك الإلكتروني وGoogle
data-use_fedcm_for_button يحدّد هذا الحقل ما إذا كان يجب استخدام تجربة المستخدم الخاصة بزر FedCM على Chrome (الإصدار 125 والإصدارات الأحدث على أجهزة الكمبيوتر والإصدار 128 والإصدارات الأحدث على أجهزة Android). القيمة التلقائية هي false.
data-button_auto_select تحديد ما إذا كان سيتم تفعيل خيار الاختيار التلقائي في مسار زر FedCM. في حال تفعيل هذه الميزة، سيتم تلقائيًا تسجيل دخول المستخدمين العائدين الذين لديهم جلسة نشطة على Google، وسيتم تخطّي طلب &quot;محدد الحساب&quot;. القيمة التلقائية هي false.

أنواع السمات

تحتوي الأقسام التالية على تفاصيل حول كل نوع من أنواع السمات ومثال.

data-client_id

هذه السمة هي معرّف العميل لتطبيقك، ويمكن العثور عليها وإنشاؤها في وحدة تحكّم Google Cloud. اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة نعم data-client_id="CLIENT_ID.apps.googleusercontent.com"

data-color_scheme

هذا الحقل هو نظام الألوان الذي يتم تطبيقه على طلب نقرة واحدة. اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة اختياريّ. يتم ضبط هذا الخيار تلقائيًا على نظام الألوان التلقائي لنظام المستخدم. data-color_scheme="dark"

يسرد الجدول التالي أنظمة الألوان المتاحة وأوصافها.

الألوان
default تطبيق ألوان النظام التلقائية، استنادًا إلى ما إذا كان المظهر المفضّل لدى المستخدم فاتحًا أو داكنًا
light طبِّق نظام ألوان فاتحة.
dark استخدِم الألوان الداكنة.

data-auto_prompt

تحدّد هذه السمة ما إذا كان سيتم عرض ميزة "نقرة واحدة" أم لا. القيمة التلقائية هي true. لا يتم عرض ميزة "نقرة واحدة من Google" عندما تكون هذه القيمة false. اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
قيمة منطقية اختياري data-auto_prompt="true"

data-auto_select

تحدّد هذه السمة ما إذا كان سيتم عرض رمز مميّز تلقائيًا للمعرّف بدون أي تفاعل من المستخدم، وذلك في حال وافقت جلسة واحدة فقط على تطبيقك. والقيمة التلقائية هي false. اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
قيمة منطقية اختياري data-auto_select="true"

data-login_uri

هذه السمة هي معرّف الموارد المنتظم (URI) لنقطة نهاية تسجيل الدخول.

يجب أن تتطابق القيمة تمامًا مع أحد معرّفات الموارد المنتظمة (URI) المسموح بها لإعادة التوجيه الخاصة بعميل OAuth 2.0 الذي أعددته في &quot;منصة مصادقة Google&quot;، ويجب أن تتوافق مع قواعد التحقّق من صحة معرّف الموارد المنتظم (URI) الخاص بإعادة التوجيه.

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

يتم نشر رد بيانات اعتماد رمز التعريف إلى نقطة نهاية تسجيل الدخول عندما لا يتم تحديد دالّة رد الاتصال وينقر المستخدم على زر &quot;تسجيل الدخول باستخدام حساب Google&quot; أو زر نقرة واحدة، أو عندما يتم تسجيل الدخول تلقائيًا.

يجب أن يتعامل نقطة نهاية تسجيل الدخول مع طلبات POST التي تحتوي على المَعلمة credential مع قيمة رمز التعريف في نص الطلب.

اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع اختياري مثال
عنوان URL يتم ضبط القيمة تلقائيًا على عنوان URI للصفحة الحالية أو القيمة التي تحدّدها.
يتم تجاهل هذا الحقل عند ضبط data-ux_mode="popup" وdata-callback.
data-login_uri="https://www.example.com/login"

data-callback

هذه السمة هي اسم دالة JavaScript التي تعالج رمز التعريف المميز الذي تم إرجاعه. راجِع الجدول التالي للحصول على مزيد من المعلومات:

النوع مطلوب مثال
سلسلة مطلوبة إذا لم يتم ضبط data-login_uri. data-callback="handleToken"

قد يتم استخدام إحدى سمتَي data-login_uri وdata-callback. ويعتمد ذلك على إعدادات المكوّن ووضع تجربة المستخدم التالية:

  • السمة data-login_uri مطلوبة لوضع تجربة المستخدم redirect لزر &quot;تسجيل الدخول باستخدام حساب Google&quot;، والذي يتجاهل السمة data-callback.

  • يجب ضبط إحدى هاتين السمتَين لوضع تجربة المستخدم في ميزة One Tap من Google وزر popupتسجيل الدخول باستخدام حساب Google. وفي حال ضبط كليهما، تحظى السمة data-callback بالأولوية.

لا تتيح واجهة برمجة التطبيقات HTML استخدام دوال JavaScript ضمن مساحة اسم. بدلاً من ذلك، استخدِم دالة JavaScript عامة بدون مساحة اسم. على سبيل المثال، استخدِم mylibCallback بدلاً من mylib.callback.

data-native_login_uri

هذه السمة هي عنوان URL لنقطة نهاية معالج بيانات اعتماد كلمة المرور. إذا ضبطت السمة data-native_login_uri أو السمة data-native_callback، ستعود مكتبة JavaScript إلى مدير بيانات الاعتماد المضمّن عندما لا تكون هناك جلسة Google. ليس مسموحًا لك ضبط السمتَين data-native_callback وdata-native_login_uri معًا. اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة اختياري data-login_uri="https://www.example.com/password_login"

data-native_callback

هذه السمة هي اسم دالة JavaScript التي تعالج بيانات اعتماد كلمة المرور التي يعرضها مدير بيانات الاعتماد المضمّن في المتصفّح. إذا ضبطت السمة data-native_login_uri أو السمة data-native_callback، ستعود مكتبة JavaScript إلى مدير بيانات الاعتماد المضمّن عندما لا تكون هناك جلسة Google. لا يُسمح لك بضبط كل من data-native_callback وdata-native_login_uri. اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة اختياري data-native_callback="handlePasswordCredential"

لا تتيح واجهة برمجة التطبيقات HTML استخدام دوال JavaScript ضمن مساحة اسم. بدلاً من ذلك، استخدِم دالة JavaScript عامة بدون مساحة اسم. على سبيل المثال، استخدِم mylibCallback بدلاً من mylib.callback.

data-native_id_param

عند إرسال بيانات اعتماد كلمة المرور إلى نقطة نهاية معالج بيانات اعتماد كلمة المرور، يمكنك تحديد اسم المَعلمة للحقل credential.id. الاسم التلقائي هو email. اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
عنوان URL اختياري data-native_id_param="user_id"

data-native_password_param

عند إرسال بيانات اعتماد كلمة المرور إلى نقطة نهاية معالج بيانات اعتماد كلمة المرور، يمكنك تحديد اسم المَعلمة الخاصة بالقيمة credential.password. الاسم التلقائي هو password. اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
عنوان URL اختياري data-native_password_param="pwd"

data-cancel_on_tap_outside

تحدّد هذه السمة ما إذا كان سيتم إلغاء طلب One Tap إذا نقر المستخدم خارج النافذة المنبثقة. تكون القيمة التلقائية true. لإيقافها، اضبط القيمة على false. اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
قيمة منطقية اختياري data-cancel_on_tap_outside="false"

data-prompt_parent_id

تضبط هذه السمة رقم تعريف DOM لعنصر الحاوية. إذا لم يتم ضبطه، سيظهر طلب نقرة واحدة في أعلى يسار النافذة. اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة اختياري data-prompt_parent_id="parent_id"

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

النوع مطلوب مثال
سلسلة اختياري data-skip_prompt_cookie="SID"

data-nonce

هذه السمة هي سلسلة عشوائية يستخدمها رمز التعريف لمنع هجمات إعادة الإرسال. اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة اختياري data-nonce="biaqbm70g23"

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

data-essential_claims

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

اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة اختياري data-essential_claims="auth_time, amr"

data-context

يغيّر هذا الحقل نص العنوان والرسائل المعروضة في طلب نقرة واحدة، ولا يؤثّر في متصفّحات ITP. القيمة التلقائية هي signin.

اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة اختياري data-context="use"

يسرد الجدول التالي جميع السياقات المتاحة وأوصافها:

السياق
signin تسجيل الدخول إلى
signup الاشتراك في
use "الاستخدام"

data-moment_callback

هذه السمة هي اسم الدالة الخاصة بمستمع إشعار حالة واجهة مستخدم الطلب. لمزيد من المعلومات، راجِع نوع البيانات PromptMomentNotification.

اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة اختياري data-moment_callback="logMomentNotification"

لا تتيح واجهة برمجة التطبيقات HTML استخدام دوال JavaScript ضمن مساحة اسم. بدلاً من ذلك، استخدِم دالة JavaScript عامة بدون مساحة اسم. على سبيل المثال، استخدِم mylibCallback بدلاً من mylib.callback.

إذا كنت بحاجة إلى عرض One Tap في نطاق رئيسي ونطاقاته الفرعية، مرِّر النطاق الرئيسي إلى هذه السمة ليتم استخدام ملف تعريف ارتباط واحد للحالة المشترَكة. راجِع الجدول التالي للحصول على مزيد من المعلومات:

النوع مطلوب مثال
سلسلة اختياري data-state_cookie_domain="example.com"

data-ux_mode

تحدّد هذه السمة مسار تجربة المستخدم الذي يستخدمه زر "تسجيل الدخول باستخدام حساب Google". القيمة التلقائية هي popup. ليس لهذه السمة أي تأثير في تجربة المستخدم في "نقرة واحدة". اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة اختياري data-ux_mode="redirect"

يسرد الجدول التالي أوضاع تجربة المستخدم المتاحة وأوصافها.

وضع تجربة المستخدم
popup تنفيذ مسار تجربة المستخدم لتسجيل الدخول في نافذة منبثقة
redirect تنفيذ عملية تسجيل الدخول من خلال إعادة توجيه الصفحة بالكامل

data-allowed_parent_origin

المصادر المسموح لها بتضمين إطار iframe الوسيط يعمل One Tap في وضع iframe الوسيط إذا كانت هذه السمة متوفّرة. اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة أو مصفوفة السلاسل النصية اختياري data-allowed_parent_origin="https://example.com"

يسرد الجدول التالي أنواع القيم المسموح بها وأوصافها.

أنواع القيم
string معرّف موارد منتظم (URI) لنطاق واحد "https://example.com"
string array قائمة بمعرّفات الموارد المنتظمة (URI) للنطاقات مفصولة بفواصل "https://news.example.com,https://local.example.com"

إذا كانت قيمة السمة data-allowed_parent_origin غير صالحة، سيتعذّر إعداد وضع iframe الوسيط في One Tap وسيتوقف.

يمكن أيضًا استخدام بادئات أحرف البدل، مثل "https://*.example.com" التي تطابق example.com ونطاقاتها الفرعية على جميع المستويات (مثل news.example.com وlogin.news.example.com). إليك بعض الملاحظات التي يجب أخذها في الاعتبار عند استخدام أحرف البدل:

  • لا يمكن أن تتكوّن سلاسل الأنماط من حرف بدل ونطاق مستوى أعلى فقط. على سبيل المثال، https://.com وhttps://.co.uk غير صالحَين لأنّ "https://.example.com" يطابق example.com وجميع نطاقاته الفرعية. استخدِم قائمة مفصولة بفواصل لتمثيل نطاقَين مختلفَين. على سبيل المثال، يتطابق النمط "https://example1.com,https://.example2.com" مع النطاقات example1.com وexample2.com والنطاقات الفرعية الخاصة بـ example2.com.
  • يجب أن تبدأ نطاقات أحرف البدل بنظام https:// آمن، لذا يُعدّ "*.example.com" غير صالح.

data-intermediate_iframe_close_callback

تتجاوز هذه السمة السلوك التلقائي لإطار iframe الوسيط عندما يغلق المستخدمون ميزة نقرة واحدة يدويًا من خلال النقر على الزر "X" في واجهة مستخدم نقرة واحدة. السلوك التلقائي هو إزالة إطار iframe الوسيط من نموذج DOM على الفور.

لا يسري الحقل data-intermediate_iframe_close_callback إلا في وضع إطار iframe الوسيط، ولا يؤثّر إلا في إطار iframe الوسيط، وليس في إطار iframe "نقرة واحدة". تتم إزالة واجهة مستخدم "نقرة واحدة" قبل استدعاء معاودة الاتصال.

النوع مطلوب مثال
دالة اختياري data-intermediate_iframe_close_callback="logBeforeClose"

لا تتيح واجهة برمجة التطبيقات HTML استخدام دوال JavaScript ضمن مساحة اسم. بدلاً من ذلك، استخدِم دالة JavaScript عامة بدون مساحة اسم. على سبيل المثال، استخدِم mylibCallback بدلاً من mylib.callback.

data-itp_support

يحدّد هذا الحقل ما إذا كان يجب تفعيل تجربة المستخدم المحسّنة في One Tap على المتصفّحات التي تتوافق مع ميزة "منع التتبّع الذكي" (ITP). القيمة التلقائية هي false. اطّلِع على الجدول التالي للحصول على مزيد من المعلومات:

النوع مطلوب مثال
قيمة منطقية اختياري data-itp_support="true"

data-login_hint

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

لمزيد من المعلومات، يُرجى الاطّلاع على مستندات OpenID Connect الخاصة بـ login_hint.

النوع مطلوب مثال
سلسلة. يمكن أن يكون عنوان بريد إلكتروني أو قيمة الحقل sub من رمز التعريف. اختياري data-login_hint="elisa.beckett@gmail.com"

data-hd

عندما يكون لدى المستخدم حسابات متعددة ويجب تسجيل الدخول باستخدام حساب Workspace فقط، استخدِم هذا الخيار لتقديم تلميح باسم النطاق إلى Google. في حال نجاح هذا الإجراء، سيتم حصر حسابات المستخدمين المعروضة أثناء اختيار الحساب بالنطاق المقدَّم. قيمة حرف البدل: * لا توفّر للمستخدم سوى حسابات Workspace وتستبعد حسابات المستهلكين (user@gmail.com) أثناء اختيار الحساب.

لمزيد من المعلومات، يُرجى الاطّلاع على مستندات OpenID Connect الخاصة بـ hd.

النوع مطلوب مثال
سلسلة. اسم نطاق مؤهَّل بالكامل أو *. اختياري data-hd="*"

data-use_fedcm_for_prompt

يسمح للمتصفّح بالتحكّم في طلبات تسجيل الدخول للمستخدمين والتوسّط في عملية تسجيل الدخول بين موقعك الإلكتروني وGoogle. القيمة التلقائية هي false. لمزيد من المعلومات، يُرجى الاطّلاع على صفحة نقل البيانات إلى FedCM.

النوع مطلوب مثال
قيمة منطقية منهي العمل به data-use_fedcm_for_prompt="true"

data-use_fedcm_for_button

يحدّد هذا الحقل ما إذا كان يجب استخدام تجربة المستخدم لزر FedCM على Chrome (الإصدار 125 والإصدارات الأحدث على أجهزة الكمبيوتر والإصدار 128 والإصدارات الأحدث على Android). القيمة التلقائية هي false. راجِع الجدول التالي للحصول على مزيد من المعلومات:

النوع مطلوب مثال
قيمة منطقية اختياري data-use_fedcm_for_button="true"

data-button_auto_select

يحدّد هذا الحقل ما إذا كان سيتم تفعيل خيار الاختيار التلقائي لتدفّق زر FedCM. وفي حال تفعيله، سيتم تلقائيًا تسجيل دخول المستخدمين المكررين الزيارة الذين لديهم جلسة نشطة على Google، ما يؤدي إلى تفادي طلب "محدد الحساب". القيمة التلقائية هي false. عليك تفعيل ميزة تسجيل الدخول تلقائيًا باستخدام الزر بشكلٍ صريح أثناء إطلاق عملية الموافقة. راجِع الجدول التالي للحصول على مزيد من المعلومات:

النوع مطلوب مثال
قيمة منطقية اختياري data-button_auto_select="true"

العنصر الذي يحمل الفئة "g_id_signin"

إذا أضفت g_id_signin إلى سمة class الخاصة بأحد العناصر، سيتم عرض العنصر كزر &quot;تسجيل الدخول باستخدام حساب Google&quot;.

يمكنك عرض عدّة أزرار &quot;تسجيل الدخول باستخدام حساب Google&quot; على الصفحة نفسها، ويمكن أن يتضمّن كل زر إعدادات مرئية خاصة به، ويتم تحديد الإعدادات من خلال سمات البيانات التالية.

سمات البيانات المرئية

يسرد الجدول التالي سمات البيانات المرئية وأوصافها:

السمة
data-type نوع الزر: رمز أو زر عادي
data-theme مظهر الزر على سبيل المثال، filled_blue أو filled_black.
data-size حجم الزر على سبيل المثال، صغير أو كبير.
data-text نص الزر على سبيل المثال، "تسجيل الدخول باستخدام حساب Google" أو "الاشتراك باستخدام حساب Google".
data-shape شكل الزر على سبيل المثال، مستطيلة أو دائرية.
data-logo_alignment محاذاة شعار Google: إلى اليسار أو الوسط
data-width تمثّل هذه السمة عرض الزر بالبكسل.
data-locale يتم عرض نص الزر باللغة المحدّدة في هذه السمة.
data-click_listener في حال ضبطها، يتم استدعاء هذه الدالة عند النقر على الزر "تسجيل الدخول باستخدام حساب Google".
data-state في حال ضبطها، يتم عرض هذه السلسلة مع رمز التعريف.

أنواع السمات

تحتوي الأقسام التالية على تفاصيل حول نوع كل سمة ومثال عليها.

data-type

نوع الزر تكون القيمة التلقائية standard. اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة نعم data-type="icon"

يسرد الجدول التالي جميع أنواع الأزرار المتاحة وأوصافها:

النوع
standard
زر يتضمّن نصًا أو معلومات مخصّصة
icon
زر أيقونة بدون نص

data-theme

مظهر الزر تكون القيمة التلقائية outline. اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة اختياري data-theme="filled_blue"

يسرد الجدول التالي النُسق المتاحة وأوصافها:

المظهر
outline
زر عادي بخلفية بيضاء زر رمز بخلفية بيضاء زر مخصّص بخلفية بيضاء
مظهر الزر العادي.
filled_blue
زر عادي بخلفية زرقاء زر رمز بخلفية زرقاء زر مخصّص بخلفية زرقاء
مظهر الزر المعبأ باللون الأزرق
filled_black
زر عادي بخلفية سوداء زر رمز بخلفية سوداء زر مخصّص بخلفية سوداء
مظهر الزر المعبأ باللون الأسود

data-size

حجم الزر تكون القيمة التلقائية large. اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة اختياري data-size="small"

يسرد الجدول التالي أحجام الأزرار المتاحة وأوصافها.

الحجم
large
زر عادي كبير زر رمز كبير زر كبير ومخصّص
زر كبير
medium
زر عادي متوسط الحجم زر رمز متوسط
زر متوسط الحجم.
small
زر صغير لتسجيل الدخول زر رمز صغير
زر صغير

data-text

نص الزر تكون القيمة التلقائية signin_with. لا توجد اختلافات مرئية في نص أزرار الرموز التي تتضمّن سمات data-text مختلفة. الاستثناء الوحيد هو عندما تتم قراءة النص لتسهيل الاستخدام على ذوي الاحتياجات الخاصة.

اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة اختياري data-text="signup_with"

يسرد الجدول التالي نصوص الأزرار المتاحة وأوصافها:

نص
signin_with
زر عادي يحمل التصنيف &quot;تسجيل الدخول باستخدام حساب Google&quot; زر رمز بدون نص مرئي
نص الزر هو "تسجيل الدخول باستخدام حساب Google".
signup_with
زر عادي يحمل التصنيف &quot;الاشتراك باستخدام حساب Google&quot; زر رمز بدون نص مرئي
نص الزر هو "الاشتراك باستخدام Google".
continue_with
زر عادي يحمل التصنيف &quot;المتابعة باستخدام Google&quot; زر رمز بدون نص مرئي
نص الزر هو "المتابعة باستخدام Google".
signin
زر عادي يحمل التصنيف &quot;تسجيل الدخول&quot; زر رمز بدون نص مرئي
نص الزر هو "تسجيل الدخول".

data-shape

شكل الزر تكون القيمة التلقائية rectangular. اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة اختياري data-shape="rectangular"

يسرد الجدول التالي أشكال الأزرار المتاحة وأوصافها:

الشكل
rectangular
زر مستطيل عادي زر رمز مستطيل زر مستطيل مخصّص
الزر المستطيل الشكل إذا تم استخدامها لنوع الزر icon، ستكون القيمة هي نفسها square.
pill
زر عادي على شكل حبّة دواء زر على شكل حبّة دواء زرّ مخصّص على شكل حبّة دواء
الزر على شكل حبّة دواء إذا تم استخدامها لنوع الزر icon، ستكون مماثلة للسمة circle.
circle
زر دائري عادي زر دائري الشكل زر دائري مخصّص
الزر الدائري الشكل إذا تم استخدامها لنوع الزر standard، ستكون مماثلة للسمة pill.
square
زر مربّع عادي زر رمز مربّع زر مربّع مخصّص
الزر المربّع الشكل إذا تم استخدامها لنوع الزر standard، ستكون مماثلة للسمة rectangular.

data-logo_alignment

محاذاة شعار Google تكون القيمة التلقائية left. تنطبق هذه السمة على نوع الزر standard فقط. اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة اختياري data-logo_alignment="center"

يسرد الجدول التالي عمليات المحاذاة المتاحة وأوصافها:

logo_alignment
left
زر عادي يتضمّن شعار Google على اليمين
تتم محاذاة شعار Google إلى اليمين.
center
زر عادي يتضمّن شعار G في المنتصف
تتم محاذاة شعار Google في الوسط.

data-width

الحد الأدنى لعرض الزر، بالبكسل. الحد الأقصى للعرض المتاح هو 400 بكسل.

اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة اختياري data-width=400

data-locale

اختياريّ. عرض نص الزر باستخدام اللغة المحدّدة، وإلا سيتم استخدام اللغة التلقائية لحساب Google أو إعدادات المتصفّح. أضِف المَعلمة hl ورمز اللغة إلى توجيه src عند تحميل المكتبة، على سبيل المثال: gsi/client?hl=<iso-639-code>.

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

اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة اختياري data-locale="zh_CN"

data-click_listener

يمكنك تحديد دالة JavaScript يتم استدعاؤها عند النقر على زر data-click_listener باستخدام السمة data-click_listener.

  <script>
    function onClickHandler(){
      console.log("Sign in with Google button clicked...")
    }
  </script>
  .....
  <div class="g_id_signin"
      data-size="large"
      data-theme="outline"
      data-click_listener="onClickHandler">
  </div>

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

data-state

هذه السمة اختيارية، لأنّه يمكن عرض أزرار متعدّدة من &quot;تسجيل الدخول باستخدام حساب Google&quot; على الصفحة نفسها، ويمكنك تخصيص سلسلة فريدة لكل زر، وستعرض السلسلة نفسها مع رمز التعريف، ما يتيح لك تحديد الزر الذي نقر عليه المستخدم لتسجيل الدخول.

اطّلِع على الجدول التالي لمزيد من المعلومات:

النوع مطلوب مثال
سلسلة اختياري data-state="button 1"

الدمج من جهة الخادم

يجب أن تعالج نقاط النهاية من جهة الخادم طلبات HTTP POST التالية.

نقطة نهاية معالج الرمز المميز لتعريف الهوية

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

مثال على طلب إلى نقطة نهاية تسجيل الدخول:

POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Cookie: g_csrf_token=<RANDOM_STRING>
Host: www.example.com

credential=<JWT_ENCODED_ID_TOKEN>&g_csrf_token=<RANDOM_STRING>

يتضمّن طلب HTTP POST المعلومات التالية:

التنسيق الاسم الوصف
ملف تعريف الارتباط g_csrf_token سلسلة عشوائية تتغيّر مع كل طلب إلى نقطة النهاية الخاصة بتسجيل الدخول المحدّدة من خلال data-login_uri، ويجب أن تتطابق مع القيمة في مَعلمة الطلب g_csrf_token.
مَعلمة الطلب g_csrf_token سلسلة عشوائية تتغيّر مع كل طلب إلى نقطة نهاية تسجيل الدخول المحدّدة بواسطة data-login_uri، ويجب أن تتطابق مع قيمة ملف تعريف الارتباط g_csrf_token.
مَعلمة الطلب credential رمز JWT المميّز المشفر الذي تصدره Google.
مَعلمة الطلب select_by كيفية تسجيل المستخدم الدخول
مَعلمة الطلب state لا يتم تحديد هذه المَعلمة إلا عندما ينقر المستخدم على زر "تسجيل الدخول باستخدام حساب Google" لتسجيل الدخول، ويتم تحديد السمة state الخاصة بالزر.

شهادة

عند فك تشفير رمز التعريف، سيبدو على النحو التالي:

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's Google Workspace email address
  "auth_time": 1748875426,
  "amr": ["mfa", "pwd", "tel"],
  "email": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Eliza",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion creation time
  "exp": 1596477600, // Unix timestamp of the assertion expiration time
  "jti": "abc161803398874def"
}

على البرامج تجاهل مطالبات JWT غير المعروفة.

الحقل sub هو معرّف فريد عالميًا لحساب Google. استخدِم الحقل sub فقط كمعرّف للمستخدم لأنّه فريد بين جميع حسابات Google ولا تتم إعادة استخدامه أبدًا.

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

الحالات التي تكون فيها Google هي الجهة الموثوقة:

  • إذا كان عنوان البريد الإلكتروني ينتهي باللاحقة @gmail.com، فهذا يعني أنّه حساب Gmail.email
  • إذا كانت قيمة email_verified صحيحة وتم ضبط hd، يكون هذا حساب Google Workspace.

يمكن للمستخدمين التسجيل للحصول على حسابات Google بدون استخدام Gmail أو Google Workspace. عندما لا يحتوي email على لاحقة @gmail.com ولا يتوفّر hd، لا تكون Google هي الجهة الموثوقة، ويُنصح باستخدام كلمة المرور أو طرق أخرى للتحقّق من هوية المستخدم. يمكن أن تكون القيمة email_verified صحيحة أيضًا لأنّ Google أثبتت في البداية ملكية المستخدم عند إنشاء حساب Google، ولكن قد تكون ملكية حساب البريد الإلكتروني التابع لجهة خارجية قد تغيّرت منذ ذلك الحين.

يعرض الحقل exp وقت انتهاء صلاحية رمز التحقّق على جهة الخادم. تبلغ مدة صلاحية رمز التعريف المميز الذي يتم الحصول عليه من خدمة "تسجيل الدخول باستخدام حساب Google" ساعة واحدة. يجب تأكيد الرمز المميّز قبل انتهاء صلاحيته. لا تستخدِم exp لإدارة الجلسات. لا يعني انتهاء صلاحية رمز تعريف أن المستخدم قد سجّل الخروج. يتحمّل تطبيقك مسؤولية إدارة جلسات المستخدمين.

g_csrf_token

رمز مميّز للحماية من التزوير هذه الرمز المميز لتقليد الطلبات من موقع إلكتروني مختلف (CSRF) تم إنشاؤه بواسطة مكتبة gsi/client. يتم تضمين قيمة عشوائية كملف تعريف ارتباط وكإحدى مَعلمات الطلب في نص حمولة POST. إذا لم تتطابق هاتان القيمتان عند معالجة الطلب على خادمك، يجب اعتبار الطلب غير صالح.

select_by

يسرد الجدول التالي القيم المحتملة للحقل select_by. يتم استخدام نوع الزر مع حالة الجلسة وحالة الموافقة لضبط القيمة.

  • ضغط المستخدم على الزر "نقرة واحدة" أو "تسجيل الدخول باستخدام حساب Google" أو استخدم عملية "تسجيل الدخول تلقائيًا" بدون لمس.

  • تم العثور على جلسة حالية، أو اختار المستخدم حساب Google وسجّل الدخول إليه لإنشاء جلسة جديدة.

  • قبل مشاركة بيانات اعتماد رمز التعريف مع تطبيقك، يجب أن يكون المستخدم قد

    • النقر على زر "تأكيد" للموافقة على مشاركة بيانات الاعتماد، أو
    • سبق له منح الموافقة واستخدام ميزة "اختيار حساب" لاختيار حساب Google.

يتم ضبط قيمة هذا الحقل على أحد الأنواع التالية:

القيمة الوصف
auto تسجيل دخول المستخدم تلقائيًا في جلسة حالية إذا كان قد منح الموافقة سابقًا على مشاركة بيانات الاعتماد، وينطبق ذلك فقط على المتصفحات غير المتوافقة مع FedCM
user نقر مستخدم لديه جلسة حالية وسبق له منح الموافقة على الزر "متابعة باسم" في ميزة "النقرة الواحدة" لمشاركة بيانات الاعتماد. لا ينطبق هذا الإعداد إلا على المتصفّحات التي لا تتوافق مع FedCM.
fedcm ضغط المستخدم على زر "متابعة باسم" في نقرة واحدة لمشاركة بيانات الاعتماد باستخدام FedCM، وينطبق ذلك فقط على المتصفحات المتوافقة مع FedCM.
fedcm_auto تسجيل دخول تلقائي لمستخدم لديه جلسة حالية وسبق له الموافقة على مشاركة بيانات الاعتماد باستخدام FedCM بنقرة واحدة. لا ينطبق هذا الإعداد إلا على المتصفّحات التي تتوافق مع FedCM.
user_1tap نقر مستخدم لديه جلسة حالية على زر &quot;متابعة باسم&quot; في One Tap لمنح الموافقة ومشاركة بيانات الاعتماد. ينطبق ذلك فقط على الإصدار 75 من Chrome والإصدارات الأحدث.
user_2tap ضغط مستخدم ليس لديه جلسة حالية على زر "المتابعة باسم" في ميزة "النقرة الواحدة" لاختيار حساب، ثم ضغط على زر "تأكيد" في نافذة منبثقة لمنح الموافقة ومشاركة بيانات الاعتماد. ينطبق ذلك على المتصفّحات غير المستندة إلى Chromium.
itp المستخدم الذي سبق له منح الموافقة ضغط على "النقرة الواحدة" في متصفّحات ITP.
itp_confirm ضغط مستخدم لم يمنح الموافقة على زر "النقرة الواحدة" في متصفّحات ITP، ثم ضغط على زر "متابعة" لمنح الموافقة ومشاركة بيانات الاعتماد.
btn ضغط مستخدم سبق له منح الموافقة على الزر "تسجيل الدخول باستخدام حساب Google" واختار حسابًا على Google من "اختيار حساب" لمشاركة بيانات الاعتماد.
btn_confirm ضغط مستخدم لم يمنح الموافقة على زر "تسجيل الدخول باستخدام حساب Google"، ثم ضغط على زر "متابعة" لمنح الموافقة ومشاركة بيانات الاعتماد.

الولاية

لا يتم تحديد هذه المَعلمة إلا عندما ينقر المستخدم على زر "تسجيل الدخول باستخدام حساب Google" لتسجيل الدخول، ويتم تحديد سمة data-state للزر الذي تم النقر عليه. قيمة هذا الحقل هي القيمة نفسها التي حدّدتها في سمة data-state للزر.

بما أنّه يمكن عرض عدّة أزرار &quot;تسجيل الدخول باستخدام حساب Google&quot; على الصفحة نفسها، يمكنك تعيين سلسلة فريدة لكل زر. وبالتالي، يمكنك استخدام المَعلمة state هذه لتحديد الزر الذي نقر عليه المستخدم لتسجيل الدخول.

نقطة نهاية معالج بيانات اعتماد كلمة المرور

تعالج نقطة نهاية معالج بيانات اعتماد كلمة المرور بيانات اعتماد كلمات المرور التي يستردّها مدير بيانات الاعتماد المضمّن.

يتضمّن طلب HTTP POST المعلومات التالية:

التنسيق الاسم الوصف
ملف تعريف الارتباط g_csrf_token سلسلة عشوائية تتغيّر مع كل طلب إلى نقطة النهاية الخاصة بتسجيل الدخول المحدّدة من خلال data-native_login_uri، ويجب أن تتطابق مع القيمة في مَعلمة الطلب g_csrf_token.
مَعلمة الطلب g_csrf_token سلسلة عشوائية تتغيّر مع كل طلب إلى نقطة نهاية تسجيل الدخول المحدّدة بواسطة data-native_login_uri، ويجب أن تتطابق مع قيمة ملف تعريف الارتباط g_csrf_token.
مَعلمة الطلب email هذه هي الرمز المميز لمعرّف Google الذي تصدره Google.
مَعلمة الطلب password كيفية اختيار بيانات الاعتماد