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

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

Switch to English

عرض زر تسجيل الدخول باستخدام حساب 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 أو اللغة

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 اختياريًا على عنوان URL الخاص بنقطة نهاية تسجيل الدخول.

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

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

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

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

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