يبدأ إيقاف ملفات تعريف الارتباط التابعة لجهات خارجية في Chrome في الربع الأول من عام 2024. اتّبِع دليل نقل البيانات لمراجعة التغييرات المحتمَلة وتجنُّب التأثيرات السلبية على تسجيل دخول المستخدمين إلى موقعك الإلكتروني.

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

عرض زر تسجيل الدخول باستخدام حساب 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() إلى عرض "نقرة واحدة" كبديل ثانٍ لاستخدام الزر من أجل الاشتراك أو تسجيل الدخول.

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

لغة الزر

يتم تحديد لغة الزر تلقائيًا من خلال اللغة التلقائية للمتصفّح أو حسب تفضيل مستخدم جلسة Google. يمكنك أيضًا اختيار اللغة يدويًا عن طريق إضافة المَعلمة hl ورمز اللغة إلى أمر src عند تحميل المكتبة وإضافة المَعلمة الاختيارية data-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. تمثّل هذه الطريقة بشكل عام تجربة أكثر تداخلاً للمستخدمين، ولكنها تُعتبر طريقة تسجيل الدخول الأكثر أمانًا.

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

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

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

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

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

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

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