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

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

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

لضبط رسالة المطالبة بنقرة واحدة في JavaScript، يجب أولاً طلب الطريقة initialize(). بعد ذلك، يمكنك استدعاء طريقة prompt() لعرض رسالة المطالبة. شاهد مقتطف الشفرة التالي:

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

لتلقّي إشعارات حالة واجهة المستخدم الفورية، قدِّم دالة رد الاتصال إلى طريقة prompt(). شاهد مقتطف الشفرة التالي:

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt((notification) => {
        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
            // try next provider if OneTap is not displayed or skipped
        }
    });
  }
</script>

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

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    const parent = document.getElementById('google_btn');
    google.accounts.id.renderButton(parent, {theme: "filled_blue"});
    google.accounts.id.prompt();
  }
</script>