بشكل تفاعلي وإنشاء الرمز المطلوب لإضافته إلى .
المتطلبات الأساسية
يُرجى إكمال ما يلي قبل إضافة الزر إلى صفحة تسجيل الدخول:
لعرض زر "تسجيل الدخول باستخدام حساب Google"، يمكنك اختيار إما HTML أو
JavaScript لعرض الزر في صفحة تسجيل الدخول:
عرض زر تسجيل الدخول باستخدام 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، مع عرض 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.
تحذير: عند استخدام واجهة برمجة تطبيقات JavaScript، تجنَّب استخدام g_id_onload
أو
g_id_signin
في رمز HTML.
يتم تحديد لغة الزر تلقائيًا من خلال الإعدادات التلقائية للمتصفّح
اللغة أو تفضيل مستخدم جلسة Google. يمكنك أيضًا اختيار
اللغة يدويًا عن طريق إضافة معلَمة hl
ورمز اللغة إلى src
المستخدم عند تحميل المكتبة وإضافة لغة البيانات الاختيارية أو
مَعلمة اللغة data-locale في HTML أو locale في JavaScript.
يوضّح المقتطف التالي من الرمز كيفية عرض لغة الزر باللغة الفرنسية
من خلال إضافة المَعلمة 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>
يوضّح المقتطف التالي من الرمز كيفية عرض لغة الزر باللغة الفرنسية
من خلال إضافة المَعلمة 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
"، يتم تنفيذ عملية تسجيل الدخول لتجربة المستخدم في نافذة منبثقة. هذا هو
بشكل عام تجربة أقل تداخلاً للمستخدمين وهو الوضع الافتراضي لتجربة المستخدم.
عند عرض الزر باستخدام:
يمكنك ضبط أيّ مما يلي:
data-callback
لإعادة رمز JWT إلى معالِج طلب إعادة الاتصال
data-login_uri
لتوجيه Google لإرسال JWT مباشرةً إلى نقطة نهاية تسجيل الدخول
باستخدام طلب POST .
في حال ضبط كلتا القيمتَين، تكون data-callback
لها الأولوية على
data-login_uri
. قد يكون ضبط كلتا القيمتين مفيدًا عند استخدام معالج callback
لتصحيح الأخطاء.
يجب تحديد callback
، لأنّ وضع النافذة المنبثقة لا يتيح عمليات إعادة التوجيه.
عند إنشاء الزر في JavaScript في حال ضبطها، يتم تجاهل login_uri
.
اطّلِع على معالجة استجابة بيانات الاعتماد التي تم إرجاعها للحصول على مزيد من المعلومات حول فك ترميز ملف JWT ضمن معالِج طلب الاستدعاء في JavaScript.
وضع إعادة التوجيه
عند استخدام redirect
وضع تجربة المستخدم، يتم تنفيذ مسار تجربة المستخدم لتسجيل الدخول باستخدام إعادة توجيه الصفحات الكاملة
في متصفّح المستخدم، وتُعيد Google رمز JWT مباشرةً إلى نقطة نهاية تسجيل الدخول باستخدام طلب POST .
هذه الطريقة أكثر تدخلاً في خصوصية المستخدمين بشكل عام، ولكنها تُعدّ
الأكثر أمانًا لتسجيل الدخول.
عند عرض الزر باستخدام:
من خلال HTML ، يمكنك اختياريًا ضبط data-login_uri
على معرّف الموارد المنتظم (URI) لنقطة نهاية تسجيل الدخول.
تتيح JavaScript ضبط login_uri
اختياريًا على معرّف الموارد المنتظم (URI) لنقطة نهاية تسجيل الدخول.
في حال عدم تقديم قيمة، سيُرجع محرك بحث Google رمز JWT إلى معرّف الموارد المنتظم (URI) لعنوان URL الحالي.
.
معرّف الموارد المنتظم لنقطة نهاية تسجيل الدخول
استخدِم HTTPS ومعرّف موارد منتظم (URI) مطلق عند ضبط data-login_uri
أو login_uri
.
مثلاً: https://example.com/path
لا يُسمح باستخدام HTTP إلا عند استخدام localhost أثناء التطوير:
http://localhost/path
.
يمكنك الاطّلاع على المقالة استخدام مصادر JavaScript الآمنة ومعرّفات الموارد المنتظمة (URI) لإعادة التوجيه .
للحصول على وصف كامل لمتطلبات Google وقواعد التحقق من الصحة.