عرض ميزة "نقرة واحدة" في Google

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

المتطلبات الأساسية

اتّبِع الخطوات الموضّحة في الإعداد لضبط شاشة طلب الموافقة المتعلّقة ببروتوكول OAuth والحصول على معرّف عميل وتحميل مكتبة العميل.

أضِف زر "تسجيل الدخول باستخدام حساب Google" إلى صفحة تسجيل الدخول.

عرض الطلب

ضَع مقتطف رمز في أي صفحات تريد عرض ميزة "النقرة الواحدة" فيها.

HTML

عرض طلب One Tap، مع إعادة بيانات اعتماد JWT إلى نقطة نهاية تسجيل الدخول

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-your_own_param_1_to_login="any_value"
   data-your_own_param_2_to_login="any_value">
</div>

سمة data-login_uri هي عنوان URL لنقطة نهاية تسجيل الدخول في تطبيق الويب. يمكنك إضافة سمات بيانات مخصّصة يتم إرسالها إلى نقطة نهاية تسجيل الدخول مع رمز التعريف الصادر عن Google.

للحصول على قائمة كاملة بالسمات المتوافقة، يُرجى الاطّلاع على g_id_onload المرجع.

JavaScript

عرض طلب One Tap، مع إعادة بيانات اعتماد JWT إلى معالج ردّ اتصال JavaScript في المتصفّح

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

لضبط طلب One Tap في JavaScript، عليك أولاً استدعاء initialize(). بعد ذلك، استخدِم طريقة prompt() لعرض واجهة مستخدم الطلب.

للحصول على القائمة الكاملة لخيارات البيانات، راجِع idConfiguration المرجع.

حالة الطلب

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

HTML

يجب توفُّر معالِج ردّ اتصال JavaScript لتلقّي الإشعارات.

JavaScript

هنا، يتم استخدام دالة سهمية للتعامل مع تعديلات الإشعارات.

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

الزر والطلب

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

HTML

اعرض زر "تسجيل الدخول باستخدام حساب Google" وطلب OneTap من خلال تضمين كلا العنصرَينg_id_onload وg_id_signin.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-context="signin"
   data-ux_mode="redirect"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-itp_support="true">
</div>

<div class="g_id_signin"
   data-type="standard"
   data-shape="rectangular"
   data-theme="outline"
   data-text="signin_with"
   data-size="large"
   data-logo_alignment="left">
</div>

JavaScript

يمكنك عرض زر "تسجيل الدخول باستخدام حساب Google" وطلب One Tap من خلال استدعاءدالتَي renderButton() وprompt() في الوقت نفسه.

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

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

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

لضمان ظهور كل المعلومات المعروضة للمستخدمين النهائيين، يجب عدم تغطية علامة Google One Tap بأي محتوى آخر. بخلاف ذلك، قد يتم تشغيل النوافذ المنبثقة في بعض الحالات.

تحقّق جيدًا من تنسيق الصفحة وخصائص z-index للعناصر، للتأكّد من أنّه لا يتم حجب ميزة "Google One Tap" بأي محتوى آخر في أي وقت. قد يتم بدء عملية تغيير تجربة المستخدم حتى في حال تغطية بكسل واحد فقط في الحدود.