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

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

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

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

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

عرض الإشعار

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

HTML

اعرضوا إشعار "تسجيل الدخول بنقرة واحدة"، مع إعادة بيانات اعتماد 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 هي عنوان URI لنقطة نهاية تسجيل الدخول في تطبيق الويب. يمكنكم إضافة سمات بيانات مخصّصة يتم إرسالها إلى نقطة نهاية تسجيل الدخول مع رمز التعريف الذي أصدرته Google.

يمكنكم اختياريًا استخدام السمة data-skip_prompt_cookie وملف تعريف ارتباط للتحكّم في ما إذا كان سيتم عرض إشعار "تسجيل الدخول بنقرة واحدة" في صفحات HTML الثابتة التي لا يمكنكم تغيير محتواها. إذا تم ضبط ملف تعريف الارتباط المحدّد، لن يتم عرض الإشعار.

استخدِموا السمة الاختيارية data-context لتغيير النص المستخدَم في عنوان الإشعار. على سبيل المثال، يؤدي data-context: "signup" إلى تغيير "تسجيل الدخول إلى" إلى "الاشتراك في".

يتم إغلاق إشعار "تسجيل الدخول بنقرة واحدة" تلقائيًا إذا نقر المستخدم خارج الإشعار. يمكنكم إيقاف هذه السمة إذا ضبطتم السمة data-cancel_on_tap_outside على "خطأ".

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

JavaScript

اعرضوا إشعار "تسجيل الدخول بنقرة واحدة"، مع إعادة بيانات اعتماد 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>

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

استخدِموا الحقل الاختياري context لتغيير النص المستخدَم في عنوان الإشعار. على سبيل المثال، يؤدي context: 'signup' إلى تغيير "تسجيل الدخول إلى" إلى "الاشتراك في".

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

للاطّلاع على القائمة الكاملة بخيارات البيانات، يُرجى الرجوع إلى مرجع idConfiguration.

حالة الإشعار

استخدِموا دالة رد اتصال JavaScript للاستماع إلى إشعارات حالة واجهة مستخدم الإشعار.

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

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

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

    في هذه الحالة، ننصحكم بمتابعة موفّري الهوية التاليين، إن وُجد.

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

HTML

استخدِموا السمة data-moment_callback لتحديد دالة رد اتصال JavaScript. يجب توفّر معالج رد اتصال لتلقّي الإشعارات.

<html>
  <head>
    <script>
      function continueWithNextIdp(notification) {
        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
          // try Next provider if One Tap is not displayed or skipped
        }
      }
    </script>
  </head>
  <body>
    ...
    <div id="g_id_onload"
      data-client_id="YOUR_GOOGLE_CLIENT_ID"
      data-login_uri="https://your.domain/your_login_endpoint"
      data-moment_callback="continueWithNextIdp"
    </div>
    ...
  </body>
</html>

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

JavaScript

مرِّروا معالج رد الاتصال كمعلَمة إلى google.accounts.id.prompt. في هذه الحالة، يتم استخدام دالة سهم لمعالجة تعديلات الإشعارات.

<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" وإشعار "تسجيل الدخول بنقرة واحدة" من خلال تضمين العنصرَين 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" وإشعار "تسجيل الدخول بنقرة واحدة" من خلال استدعاء الدالتَين 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. وإلا، قد يتم عرض نوافذ منبثقة في بعض الحالات.

تحقّقوا جيدًا من تنسيق الصفحة وخصائص z-index للعناصر للتأكّد من عدم حجب إشعار "تسجيل الدخول بنقرة واحدة" من Google بأي محتوى آخر في أي وقت. قد يتم تفعيل تغيير تجربة المستخدم حتى إذا تم حجب بكسل واحد فقط في الحدود.

استجابة بيانات الاعتماد

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

رد اتصال JavaScript

استخدِموا HTML أو JavaScript لضبط رد الاتصال.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-callback="YOUR_CALLBACK_HANDLER"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  callback: 'YOUR_CALLBACK_HANDLER'
});

على سبيل المثال، تفكّ شفرة handleCredentialResponse رمز JWT وتطبع بعض حقول رمز التعريف في وحدة التحكّم.

<script>
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: handleCredentialResponse
  });

  function handleCredentialResponse(response) {
    const responsePayload = decodeJwtResponse(response.credential);

    console.log("ID: " + responsePayload.sub);
    console.log('Full Name: ' + responsePayload.name);
    console.log('Given Name: ' + responsePayload.given_name);
    console.log('Family Name: ' + responsePayload.family_name);
    console.log("Image URL: " + responsePayload.picture);
    console.log("Email: " + responsePayload.email);
  }

  function decodeJwtResponse(token) {
    let base64Url = token.split('.')[1];
    let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
  }
</script>

إعادة توجيه

لإعادة بيانات اعتماد إلى نقطة نهاية تسجيل الدخول في منصّتكم، أضيفوا عنوان URL إلى إعدادات عناوين URI المصرّح بها لإعادة التوجيه في عميل الويب OAuth 2.0.

استخدِموا HTML أو JavaScript لضبط عنوان URI لإعادة التوجيه.

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-ux_mode="redirect"
  data-login-uri="YOUR_LOGIN_URI"
</div>

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  ux_mode: 'redirect',
  login_uri: 'YOUR_LOGIN_URI'
});