عرض ميزة "نقرة واحدة" في 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.

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

للحصول على قائمة كاملة بالسمات المتوافقة، يُرجى الاطّلاع على 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() لعرض واجهة مستخدم الطلب.

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

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

حالة الطلب

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

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

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

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

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

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

HTML

استخدِم السمة data-moment_callback لتحديد دالّة 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" وطلب 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" بأي محتوى آخر في أي وقت. قد يتم بدء عملية تغيير تجربة المستخدم حتى في حال تغطية بكسل واحد فقط في الحدود.

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

يتضمّن الردّ على بيانات الاعتماد رمز 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 إلى إعدادات معرّف الموارد المنتظم المُعتمَد لإعادة التوجيه في عميل الويب OAuth 2.0.

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

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'
});