عرض زر تسجيل الدخول باستخدام حساب Google

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

زر تسجيل الدخول المخصّص

بعد أن يختار المستخدم حساب Google ويقدّم موافقته، تشارك Google ملف المستخدم الشخصي باستخدام رمز JSON المميّز للويب (JWT). للحصول على نظرة عامة على الخطوات المتّبعة أثناء تسجيل الدخول وتجربة المستخدم، اطّلِعوا على مقالة كيف يعمل؟. تعرَّفوا على مراجعات الزر المخصّص التي تتناول الشروط والحالات المختلفة التي تؤثر في طريقة عرض الزر للمستخدمين.

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

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

عرض الزر

لعرض زر "تسجيل الدخول باستخدام حساب Google"، يمكنكم اختيار HTML أو JavaScript لعرض الزر على صفحة تسجيل الدخول:

HTML

اعرضوا زر تسجيل الدخول باستخدام HTML، مع إعادة رمز JWT إلى نقطة نهاية تسجيل الدخول في منصّتكم.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <div id="g_id_onload"
        data-client_id="YOUR_GOOGLE_CLIENT_ID"
        data-login_uri="https://your.domain/your_login_endpoint"
        data-auto_prompt="false">
    </div>
    <div class="g_id_signin"
        data-type="standard"
        data-size="large"
        data-theme="outline"
        data-text="sign_in_with"
        data-shape="rectangular"
        data-logo_alignment="left">
    </div>
  <body>
</html>

يتم عرض عنصر بفئة g_id_signin كزر "تسجيل الدخول باستخدام حساب Google". يتم تخصيص الزر من خلال المَعلمات المقدَّمة في سمات البيانات.

لعرض زر "تسجيل الدخول باستخدام حساب Google" وميزة "تسجيل الدخول بنقرة واحدة" من Google على الصفحة نفسها، أزيلوا data-auto_prompt="false". يُنصح بذلك لتقليل الصعوبات وتحسين معدّلات تسجيل الدخول.

للاطّلاع على القائمة الكاملة بسمات البيانات، يُرجى الانتقال إلى صفحة مرجع g_id_signin

JavaScript

اعرضوا زر تسجيل الدخول باستخدام JavaScript، مع إعادة رمز JWT إلى معالج رد الاتصال في JavaScript الخاص بالمتصفح.

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <script>
      function handleCredentialResponse(response) {
        console.log("Encoded JWT ID token: " + response.credential);
      }
      window.onload = function () {
        google.accounts.id.initialize({
          client_id: "YOUR_GOOGLE_CLIENT_ID"
          callback: handleCredentialResponse
        });
        google.accounts.id.renderButton(
          document.getElementById("buttonDiv"),
          { theme: "outline", size: "large" }  // customization attributes
        );
        google.accounts.id.prompt(); // also display the One Tap dialog
      }
    </script>
    <div id="buttonDiv"></div>
  </body>
</html>

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

للحدّ من الصعوبات التي يواجهها المستخدمون، يتم استدعاء google.accounts.id.prompt() لعرض ميزة "تسجيل الدخول بنقرة واحدة" كبديل ثانٍ لاستخدام الزر للاشتراك أو تسجيل الدخول.

تحلّل مكتبة GIS مستند HTML بحثًا عن عناصر بسمة رقم تعريف تم ضبطها على g_id_onload أو سمات فئة تحتوي على g_id_signin. إذا تم العثور على عنصر مطابق، يتم عرض الزر باستخدام HTML، بغض النظر عمّا إذا كنتم قد عرضتم الزر أيضًا في JavaScript. لتجنُّب عرض الزر مرّتين، ربما باستخدام مَعلمات متعارضة، لا تُدرِجوا عناصر HTML تطابق هذه الأسماء في صفحات HTML.

لغة الزر

يتم تحديد لغة الزر تلقائيًا حسب اللغة التلقائية للمتصفح أو حسب إعدادات المستخدم المفضّلة في جلسة Google. يمكنكم أيضًا اختيار الـ لغة يدويًا من خلال إضافة المَعلمة hl ورمز اللغة إلى توجيه src عند تحميل المكتبة، ومن خلال إضافة المَعلمة الاختيارية data-locale أو locale data-locale في HTML أو locale في JavaScript.

HTML

يوضّح مقتطف الرمز البرمجي التالي كيفية عرض لغة الزر بالفرنسية من خلال إضافة المَعلمة hl إلى عنوان URL لمكتبة العميل ومن خلال ضبط السمة data-locale على الفرنسية:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>

JavaScript

يوضّح مقتطف الرمز البرمجي التالي كيفية عرض لغة الزر بالفرنسية من خلال إضافة المَعلمة hl إلى عنوان URL لمكتبة العميل واستدعاء طريقة google.accounts.id.renderButton مع ضبط المَعلمة locale على الفرنسية:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
  google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    { locale: "fr" }
  );
</script>

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

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

يعتمد المكان الذي تختارون تلقّي رمز JWT فيه على ما إذا كنتم تعرضون الزر باستخدام HTML أو JavaScript وما إذا كنتم تستخدمون وضع تجربة المستخدم المنبثقة أو وضع إعادة التوجيه.

يؤدي استخدام وضع تجربة المستخدم popup إلى تنفيذ عملية تسجيل الدخول في نافذة منبثقة. تكون هذه التجربة أقل إزعاجًا للمستخدمين بشكل عام، وهي وضع تجربة المستخدم التلقائي.

عند عرض الزر باستخدام:

HTML

يمكنكم ضبط أي مما يلي:

  • data-callback لإعادة رمز JWT إلى معالج رد الاتصال، أو
  • data-login_uri لكي ترسل Google رمز JWT مباشرةً إلى نقطة نهاية تسجيل الدخول باستخدام طلب POST.

إذا تم ضبط كلتا القيمتَين، تكون الأولوية لـ data-callback على data-login_uri. قد يكون ضبط كلتا القيمتَين مفيدًا عند استخدام معالج معاودة الاتصال لتحديد الأخطاء وحلّها.

JavaScript

يجب تحديد callback، لأنّ وضع النافذة المنبثقة لا يتيح عمليات إعادة التوجيه عند عرض الزر في JavaScript. إذا تم ضبط login_uri، يتم تجاهلها.

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

وضع إعادة التوجيه

يؤدي استخدام وضع تجربة المستخدم redirect إلى تنفيذ عملية تسجيل الدخول باستخدام إعادة توجيه الصفحة بالكامل في متصفح المستخدم، وتعيد Google رمز JWT مباشرةً إلى نقطة نهاية تسجيل الدخول باستخدام طلب POST. تكون هذه التجربة أكثر إزعاجًا للمستخدمين بشكل عام، ولكن تُعتبر طريقة تسجيل الدخول الأكثر أمانًا.

عند عرض الزر باستخدام:

  • يمكنكم اختياريًا ضبط data-login_uri على معرّف الموارد المنتظم (URI) لنقطة نهاية تسجيل الدخول في HTML.
  • يمكنكم اختياريًا ضبط login_uri على معرّف الموارد المنتظم (URI) لنقطة نهاية تسجيل الدخول في JavaScript.

إذا لم تقدّموا قيمة، تعيد Google رمز JWT إلى معرّف الموارد المنتظم (URI) للصفحة الحالية.

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

استخدِموا HTTPS ومعرّف موارد منتظم (URI) مطلق عند ضبط data-login_uri أو login_uri. على سبيل المثال، https://example.com/path.

لا يُسمح باستخدام HTTP إلا عند استخدام localhost أثناء التطوير: http://localhost/path.

يُرجى الرجوع إلى مقالة استخدام مصادر JavaScript الآمنة ومعرّفات الموارد المنتظمة (URI) الخاصة بإعادة التوجيه للحصول على وصف كامل لمتطلبات Google وقواعد التحقّق من الصحة.