عرض زر تسجيل الدخول باستخدام حساب 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 One في الصفحة نفسها، أزِل 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() لعرض One Tap كخيار ثانٍ لاستخدام الزرّ لتسجيل الاشتراك أو تسجيل الدخول.

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

لغة الأزرار

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

HTML

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

<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. قد يكون ضبط كلتا القيمتين مفيدًا عند استخدام معالج callback لتصحيح الأخطاء.

JavaScript

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

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

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

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

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

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

في حال عدم تقديم قيمة، ستُعيد Google رمز JWT إلى عنوان URL للصفحة الحالية.

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

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

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

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