تسجيل الدخول باستخدام مرجع واجهة برمجة تطبيقات JavaScript في Google

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

الطريقة: google.accounts.id.Initialize

تؤدي الطريقة google.accounts.id.initialize إلى إعداد ميزة "تسجيل الدخول باستخدام حساب Google". العميل استنادًا إلى كائن التهيئة. انظر مثال التعليمة البرمجية التالي :

google.accounts.id.initialize(IdConfiguration)

يستخدم مثال الرمز التالي الطريقة google.accounts.id.initialize مع الدالة onload:

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  };
</script>

تنشئ الطريقة google.accounts.id.initialize برنامج "تسجيل الدخول باستخدام حساب Google". يمكن استخدامه ضمنيًا في جميع الوحدات الموجودة في صفحة الويب نفسها.

  • ما عليك سوى استدعاء طريقة google.accounts.id.initialize مرة واحدة فقط. إذا كنت تستخدم وحدات متعددة (مثل "نقرة واحدة" و"زر مخصّص" و"الإبطال" و وما إلى ذلك) في صفحة الويب نفسها.
  • إذا استدعيت الطريقة google.accounts.id.initialize عدة مرات، يتم فقط تذكر واستخدام الإعدادات في الاستدعاء الأخير.

فإنك في الواقع تعيد تعيين التهيئات عند طلب google.accounts.id.initialize، وجميع الطرق اللاحقة بنفس الطريقة صفحة الويب تلقائيًا بالإعدادات الجديدة.

نوع البيانات: IdConfiguration

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

الحقل
client_id معرِّف عميل التطبيق
auto_select تُفعِّل هذه السياسة الاختيار التلقائي.
callback دالة JavaScript التي تعالج الرموز المميّزة للمعرّفات. Google One زر "تسجيل الدخول باستخدام حساب Google" popup يستخدم وضع تجربة المستخدم هذا .
login_uri عنوان URL لنقطة نهاية تسجيل الدخول. زر "تسجيل الدخول باستخدام حساب Google" يستخدم وضع تجربة المستخدم (redirect) هذه السمة.
native_callback دالة JavaScript التي تعالج بيانات اعتماد كلمة المرور.
cancel_on_tap_outside يؤدي هذا الخيار إلى إلغاء الطلب إذا نقر المستخدم خارج الطلب.
prompt_parent_id رقم تعريف DOM لعنصر حاوية الطلب "نقرة واحدة"
nonce سلسلة عشوائية للرموز المميزة للأرقام التعريفية
context العنوان والكلمات في طلب "نقرة واحدة"
state_cookie_domain إذا أردت استدعاء ميزة "نقرة واحدة" في النطاق الرئيسي ونطاقاته الفرعية، تمرير النطاق الرئيسي إلى هذا الحقل بحيث يتم استخدام البيانات المختلفة.
ux_mode مسار تجربة المستخدم لزر "تسجيل الدخول باستخدام حساب Google"
allowed_parent_origin المصادر المسموح لها بتضمين إطار iframe المتوسط ميزة "نقرة واحدة" يتم تشغيله في وضع إطار iframe المتوسط في حالة وجود هذا الحقل.
intermediate_iframe_close_callback لإلغاء سلوك إطار iframe المتوسط التلقائي عند المستخدمين يدويًا إغلاق "نقرة واحدة"
itp_support تُفعِّل هذه السياسة تجربة المستخدم بنقرة واحدة التي تمت ترقيتها على متصفِّحات ITP.
login_hint يمكنك تخطّي اختيار الحساب من خلال تقديم تلميح للمستخدمين.
hd تقييد اختيار الحساب حسب النطاق
use_fedcm_for_prompt السماح للمتصفح بالتحكم في طلبات تسجيل دخول المستخدم والتوسط عملية تسجيل الدخول بين موقعك الإلكتروني وGoogle

client_id

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

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

auto_select

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

النوع مطلوب مثال
منطقي اختياري auto_select: true

رد الاتصال

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

النوع مطلوب مثال
دالة مطلوب لميزة "نقرة واحدة" ووضع "تجربة المستخدم" في popup callback: handleResponse

login_uri

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

يجب أن تتطابق القيمة تمامًا مع أحد معرّفات الموارد المنتظِمة (URI) المعتمَدة لإعادة التوجيه لبروتوكول OAuth الإصدار 2.0 الذي ضبطته في Google Cloud Console ويجب أن تتوافق مع التحقّق من صحة عنوان URI لإعادة التوجيه. القواعد.

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

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

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

النوع اختياري مثال
عنوان URL يتم ضبطها تلقائيًا على معرّف الموارد المنتظم (URI) للصفحة الحالية أو القيمة التي تحدّدها.
لا تُستخدَم إلا عند ضبط ux_mode: "redirect".		 login_uri: "https://www.example.com/login"

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

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

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

native_callback

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

النوع مطلوب مثال
دالة اختياري native_callback: handleResponse

cancel_on_tap_outside

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

النوع مطلوب مثال
منطقي اختياري cancel_on_tap_outside: false

prompt_parent_id

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

النوع مطلوب مثال
سلسلة اختياري prompt_parent_id: 'parent_id'

رقم خاص

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

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

يقتصر الطول على الحد الأقصى لحجم JWT الذي تسمح به بيئتك. وقيود حجم HTTP لكل من المتصفح والخادم.

سياق

يغيّر هذا الحقل نص العنوان والرسائل في الطلب "نقرة واحدة". عرض الجدول التالي لمزيد من المعلومات:

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

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

السياق
signin "تسجيل الدخول باستخدام حساب Google"
signup "الاشتراك من خلال Google"
use "الاستخدام مع Google"

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

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

ux_mode

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

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

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

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

allowed_parent_origin

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

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

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

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

يمكن أيضًا استخدام بادئات أحرف البدل. على سبيل المثال: "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" غير صالح.

إذا كانت قيمة الحقل allowed_parent_origin غير صالحة، يتم استخدام ميزة "نقرة واحدة" سيفشل بدء وضع iframe المتوسط ويتوقف.

intermediate_iframe_close_callback

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

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

النوع مطلوب مثال
دالة اختياري intermediate_iframe_close_callback: logBeforeClose

itp_support

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

النوع مطلوب مثال
منطقي اختياري itp_support: true

login_hint

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

للمزيد من المعلومات، يمكنك الاطِّلاع على الحقل login_hint في OpenID Connect. التوثيق.

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

فائقة الدقة

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

للمزيد من المعلومات، راجِع حقل hd في وثائق OpenID Connect.

النوع مطلوب مثال
سلسلة. اسم مجال مؤهل بالكامل أو *. اختياري hd: '*'

use_fedcm_for_prompt

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

النوع مطلوب مثال
منطقي اختياري use_fedcm_for_prompt: true

الطريقة: google.accounts.id.prompt

تعرض طريقة google.accounts.id.prompt الطلب بنقرة واحدة أو مدير بيانات الاعتماد الأصلي للمتصفِّح بعد استدعاء طريقة initialize(). اطّلِع على مثال الرمز التالي للطريقة:

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

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

يتم تنشيط الإشعارات في اللحظات التالية:

  • لقطة الشاشة: تحدث بعد استدعاء طريقة prompt(). تشير رسالة الأشكال البيانية يحتوي الإشعار على قيمة منطقية للإشارة إلى ما إذا كانت واجهة المستخدم عرضه أم لا.

  • اللحظة التي تم تخطّيها: تحدث عندما يتم إغلاق طلب "نقرة واحدة" بواسطة جهاز أو الإلغاء أو الإلغاء اليدوي أو في حالة فشل Google في إصدار بيانات اعتماد، مثل عند تسجيل الخروج من Google للجلسة المحدّدة.

    في هذه الحالات، ننصحك بالمتابعة إلى الهوية التالية. ومزودي الخدمة، إن وجدوا.

  • اللحظات التي تم تجاهلها: تحدث عندما يسترد Google بنجاح بيانات اعتماد أو رغبة المستخدم في إيقاف تدفق استرجاع بيانات الاعتماد. بالنسبة على سبيل المثال، عندما يبدأ المستخدم في إدخال اسم المستخدم وكلمة المرور في تسجيل الدخول، يمكنك استدعاء طريقة google.accounts.id.cancel() لإغلاق يتم عرض طلب "نقرة واحدة" ويتم إغلاقها.

ينفذ مثال الرمز التالي اللحظة التي تم تخطّيها:

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

نوع البيانات: PromptMomentNotification

يسرد الجدول التالي طرق وأوصاف دالة نوع بيانات PromptMomentNotification:

الطريقة
isDisplayMoment() هل هذا الإشعار مخصّص للحظة المعروضة؟

ملاحظة: عندما يكون FedCM هو مفعَّلة، لا يتم تنشيط هذا الإشعار. عرض نقل البيانات إلى FedCM للحصول على مزيد من المعلومات.
isDisplayed() هل هذا الإشعار مخصص للحظة العرض، وواجهة المستخدم المعروضة؟

ملاحظة: عندما يكون FedCM هو مفعَّلة، لا يتم تنشيط هذا الإشعار. عرض نقل البيانات إلى FedCM للحصول على مزيد من المعلومات.
isNotDisplayed() هل هذا الإشعار مخصّص للحظة العرض، وواجهة المستخدم غير مخصّصة؟ المعروضة؟

ملاحظة: عندما يكون FedCM هو مفعَّلة، لا يتم تنشيط هذا الإشعار. عرض نقل البيانات إلى FedCM للحصول على مزيد من المعلومات.
getNotDisplayedReason()

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

  • browser_not_supported
  • invalid_client
  • missing_client_id
  • opt_out_or_no_session
  • secure_http_required
  • suppressed_by_user
  • unregistered_origin
  • unknown_reason
ملاحظة: عندما يكون FedCM هو مفعَّلة، تكون هذه الطريقة غير متاحة. عرض نقل البيانات إلى FedCM للحصول على مزيد من المعلومات.
isSkippedMoment() هل هذا الإشعار مخصّص للحظة التي تم تخطّيها؟
getSkippedReason()

السبب التفصيلي للحظة التي تم تخطّيها. فيما يلي القيم المحتملة:

  • auto_cancel
  • user_cancel
  • tap_outside
  • issuing_failed
ملاحظة: عندما يكون FedCM هو مفعَّلة، تكون هذه الطريقة غير متاحة. عرض نقل البيانات إلى FedCM للحصول على مزيد من المعلومات.
isDismissedMoment() هل هذا الإشعار موجّه للحظة مرفوضة؟
getDismissedReason()

السبب التفصيلي للرفض ما يلي ممكنًا القيم التالية:

  • credential_returned
  • cancel_called
  • flow_restarted
getMomentType()

عرض سلسلة لنوع اللحظة ما يلي ممكنًا القيم التالية:

  • display
  • skipped
  • dismissed

نوع البيانات: CredentialResponse

عند استدعاء الدالة callback، يصبح كائن CredentialResponse يتم تمريره كمعلمة. يسرد الجدول التالي الحقول التي تتضمّنها في كائن استجابة بيانات الاعتماد:

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

شهادة

هذا الحقل هو الرمز المميّز للمعرّف كسلسلة JSON Web Token (JWT) بترميز base64.

فعندما decoded، يبدو JWT على النحو التالي: 

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 GSuite email address
  "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": "Elisa",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

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

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

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

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

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

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

select_by

يسرد الجدول التالي القيم المحتملة للحقل select_by. تشير رسالة الأشكال البيانية ونوع الزر المستخدم إلى جانب الجلسة وحالة الموافقة لتحديد والقيمة،

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

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

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

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

ويتم تعيين قيمة هذا الحقل على أحد هذه الأنواع،

القيمة الوصف
auto تسجيل الدخول التلقائي لمستخدم لديه جلسة حالية كان له التي تم منحها سابقًا الموافقة على مشاركة بيانات الاعتماد. تنطبق فقط على المتصفحات غير المتوافقة مع FedCM
user مستخدِم لديه جلسة حالية منح الموافقة في السابق الضغط على "متابعة باسم" بنقرة واحدة لمشاركة بيانات الاعتماد. تنطبق إلى المتصفحات غير المتوافقة مع FedCM فقط
fedcm ضغط أحد المستخدمين على "نقرة واحدة" على "متابعة باسم" زر للمشاركة بيانات الاعتماد باستخدام برنامج FedCM. لا تنطبق إلا على FedCM متوافق المتصفحات.
fedcm_auto تسجيل الدخول التلقائي لمستخدم لديه جلسة حالية كان له سبق أن تم منحها الموافقة لمشاركة بيانات الاعتماد باستخدام ميزة "نقرة واحدة" من خلال برنامج "المراسلة عبر السحابة الإلكترونية من Firebase". لا تنطبق إلا على FedCM متوافق المتصفحات.
user_1tap ضغط أحد المستخدمين الذين لديهم جلسة حالية على الزر "متابعة باسم" بنقرة واحدة. لمنح الموافقة ومشاركة بيانات الاعتماد. لا تنطبق إلا على Chrome الإصدار 75 والإصدارات الأحدث
user_2tap ضغط أحد المستخدمين الذين ليس لديهم جلسة حالية على الزر "متابعة باسم" بنقرة واحدة. زر "لاختيار حساب" ثم ضغطت على الزر "تأكيد" في نافذة منبثقة لمنح الموافقة ومشاركة بيانات الاعتماد. ينطبق على المتصفحات غير المستندة إلى Chromium.
btn مستخدِم لديه جلسة حالية منح الموافقة في السابق ضغطت على الزر "تسجيل الدخول باستخدام حساب Google" وحددت حساب Google من "اختيار حساب" مشاركة بيانات الاعتماد.
btn_confirm ضغط أحد المستخدمين الذين لديهم جلسة حالية على زر "تسجيل الدخول باستخدام حساب Google". وضغطنا على زر "تأكيد" لمنح الموافقة ومشاركة بيانات الاعتماد.
btn_add_session يشير هذا المصطلح إلى المستخدِم الذي لا يملك جلسة حالية وتم منحه في السابق. نقرت على زر "تسجيل الدخول باستخدام حساب Google" لاختيار حساب Google. بيانات الاعتماد ومشاركتها.
btn_confirm_add_session ضغطَ أولاً أحد المستخدمين الذين ليس لديهم جلسة حالية على "تسجيل الدخول باستخدام حساب Google". لاختيار حساب Google ثم ضغطت على زر "تأكيد" للموافقة ومشاركة بيانات الاعتماد.

الولاية

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

ونظرًا لأنه يمكن عرض أزرار "تسجيل الدخول باستخدام حساب Google" متعددة في الصفحة نفسها، يمكننا تعيين كل زر بسلسلة فريدة. وبالتالي، يمكنك استخدام حقل state هذا لتحديد الزر الذي نقر عليه المستخدم لتسجيل الدخول.

الطريقة: google.accounts.id.renderButton

تعرض الطريقة google.accounts.id.renderButton رسالة "تسجيل الدخول باستخدام حساب Google". في صفحات الويب الخاصة بك.

اطّلِع على مثال الرمز التالي للطريقة:

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

نوع البيانات: GsiButtonConfiguration

يسرد الجدول التالي الحقول والأوصاف الخاصة بدالة نوع بيانات GsiButtonConfiguration:

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

أنواع السمات

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

كتابة

نوع الزر. تكون القيمة التلقائية standard.

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

النوع مطلوب مثال
سلسلة نعم type: "icon"

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

النوع
standard
زر يحتوي على نص أو معلومات مخصصة
icon
زر رمز بدون نص

مظهر

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

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

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

المظهر
outline
مظهر زر عادي
filled_blue
مظهر زر مملوء باللون الأزرق
filled_black
مظهر زر معبأ باللون الأسود.

الحجم

حجم الزر. تكون القيمة التلقائية large. انظر الجدول التالي لـ مزيد من المعلومات:

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

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

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

text

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

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

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

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

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

الشكل

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

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

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

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

logo_alignment

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

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

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

logo_alignment
left
محاذاة شعار Google إلى اليسار
center
محاذاة شعار Google إلى الوسط

العرض

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

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

النوع مطلوب مثال
سلسلة اختياري width: "400"

locale

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

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

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

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

click_listener

يمكنك تحديد وظيفة JavaScript ليتم استدعاؤها عند استخدام ميزة "تسجيل الدخول باستخدام حساب Google" تم النقر عليه باستخدام السمة click_listener.

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }

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

الولاية

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

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

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

نوع البيانات: بيانات الاعتماد

عندما يكون native_callback ، يتم استدعاء الدالة Credential، يتم تمرير كائن Credential كمعلمة. تشير رسالة الأشكال البيانية يسرد الجدول التالي الحقول المضمَّنة في العنصر:

الحقل
id يحدد المستخدم.
password كلمة المرور

الطريقة: google.accounts.id.disableAutoSelect

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

google.accounts.id.disableAutoSelect()

ينفذ مثال الرمز التالي google.accounts.id.disableAutoSelect مع الدالة onSignout():

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

الطريقة: google.accounts.id.storeCredential

هذه الطريقة هي برنامج تضمين للطريقة store() من واجهة المتصفح الأصلية واجهة برمجة تطبيقات مدير بيانات الاعتماد. لذلك، يمكن استخدامها فقط لتخزين كلمة المرور بيانات اعتمادك. اطّلِع على مثال الرمز التالي للطريقة:

google.accounts.id.storeCredential(Credential, callback)

ينفذ مثال الرمز التالي google.accounts.id.storeCredential مع الدالة onSignIn():

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

الطريقة: google.accounts.id.cancel

يمكنك إلغاء عملية "نقرة واحدة" في حال إزالة الطلب من الجهة المعتمدة. DOM. يتم تجاهل عملية الإلغاء في حال اختيار بيانات اعتماد من قبل. عرض مثال الرمز التالي للطريقة:

google.accounts.id.cancel()

يستخدم مثال الرمز التالي الطريقة google.accounts.id.cancel() مع الدالة onNextButtonClicked():

<script>
  function onNextButtonClicked() {
    google.accounts.id.cancel();
    showPasswordPage();
  }
</script>

استدعاء تحميل المكتبة: onGoogleLibraryLoad

يمكنك تسجيل معاودة الاتصال "onGoogleLibraryLoad". يتم إرسال إشعار بعد وضع علامة في مكتبة JavaScript باستخدام Google، يتم تحميل:

window.onGoogleLibraryLoad = () => {
    ...
};

إنّ معاودة الاتصال هذه ما هي إلا اختصار لمعاودة الاتصال على "window.onload". لا يوجد الاختلافات في السلوك.

ينفذ مثال الرمز التالي استدعاء onGoogleLibraryLoad:

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

الطريقة: google.accounts.id.revoke

تعمل طريقة google.accounts.id.revoke على إبطال منح OAuth المستخدم في مشاركة الرمز المميّز للمعرّف للمستخدم المحدّد. اطّلِع على مقتطف الرمز التالي للطريقة: javascript google.accounts.id.revoke(login_hint, callback)

المعلمة النوع الوصف
login_hint سلسلة عنوان البريد الإلكتروني أو المعرّف الفريد لحساب المستخدِم على Google. المعرّف هو السمة sub حمولة بيانات الاعتماد.
callback دالة معالِج RevocationResponse الاختياري.

يعرض نموذج الرمز البرمجي التالي كيفية استخدام إجراء revoke مع رقم تعريف. 

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

نوع البيانات: RevocationResponse

عند استدعاء الدالة callback، يصبح كائن RevocationResponse يتم تمريره كمعلمة. يسرد الجدول التالي الحقول التي تتضمّنها في كائن استجابة الإبطال:

الحقل
successful هذا الحقل هو القيمة التي تعرضها لاستدعاء الطريقة.
error يحتوي هذا الحقل اختياريًا على رسالة رد مفصلة عن الخطأ.

ناجح

يمثّل هذا الحقل قيمة منطقية تم ضبطها على "صحيح" إذا تم استدعاء طريقة الإلغاء بنجاح أو خطأ عند التعذُّر.

خطأ

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