تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

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

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

أكمل ما يلي قبل إضافة الزر إلى صفحة تسجيل الدخول:

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

عرض الزر

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

HTML

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

<html>
  <body>
      <script src="https://accounts.google.com/gsi/client" async defer></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

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

<html>
  <body>
      <script src="https://accounts.google.com/gsi/client" async defer></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، بغض النظر عما إذا كنت قد عرضت الزر في جافا سكريبت أيضًا. لتجنب عرض الزر مرتين، من المحتمل ألا تتضمن المعلمات المتعارضة عناصر HTML التي تطابق هذه الأسماء في صفحات HTML.

لغة الزر

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

HTML

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

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

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

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

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

وضع النافذة المنبثقة

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

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

HTML، يمكنك تعيين إما:
- data-callback لعرض JWT إلى معالج معاودة الاتصال، أو
- data-login_uri لكي ترسل Google رمز JWT مباشرةً إلى نقطة نهاية تسجيل الدخول باستخدام طلب POST.
وفي حال ضبط كلتا القيمتَين، تكون الأولوية للسمة data-callback على القيمة data-login_uri. على سبيل المثال، قد يكون هذا مفيدًا عند استخدام معالج معاودة الاتصال أثناء تصحيح الأخطاء.
JavaScript التي يجب تعيينها على callback، لا يدعم وضع النافذة المنبثقة عمليات إعادة التوجيه عند تمرير الزر في جافا سكريبت. وفي حال الضبط، يتم تجاهل login_uri.

اطلع على التعامل مع استجابة بيانات الاعتماد المعروضة. للحصول على مزيد من المعلومات حول فك تشفير JWT داخل معالج رد اتصال JS.

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

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

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

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

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

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

استخدِم HTTPS وعنوان URI مطلقًا عند إعداد data-login_uri أو login_uri. على سبيل المثال، https://example.com/path.

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

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