سيتم نقل "خدمات هوية Google" إلى واجهات برمجة تطبيقات FedCM. يُرجى اتّباع
دليل نقل البيانات لمراجعة التغييرات المحتملة وتجنُّب التأثيرات السلبية على تسجيل دخول المستخدمين إلى موقعك الإلكتروني.
إرسال ملاحظات
عرض زر تسجيل الدخول باستخدام حساب Google
bookmark_border bookmark
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
إضافة زر "تسجيل الدخول باستخدام حساب Google" إلى موقعك الإلكتروني لتمكين المستخدمين من الاشتراك أو
سجِّل الدخول إلى تطبيق الويب. استخدم HTML أو JavaScript لعرض الزر
لتخصيص شكل الزر وحجمه ونصه ومظهره.
بعد أن يختار المستخدم حسابًا على Google ويقدّم موافقته، تشارك Google
الملف الشخصي للمستخدم باستخدام رمز JSON المميّز للويب (JWT). للحصول على نظرة عامة على الخطوات
خلال عملية تسجيل الدخول وتجربة المستخدم، راجِع آلية العمل .
تراجع ميزة التعرّف على الزر المخصّص الشروط والأحكام المختلفة
الحالات التي تؤثر في كيفية عرض الزر للمستخدمين.
ملاحظة مهمة: يساعدك أداة إنشاء الرموز في تصميم زرّ تسجيل الدخول باستخدام حساب Google بشكل تفاعلي وإنشاء الرمز المطلوب لإضافته إلى .
المتطلبات الأساسية
يُرجى إكمال ما يلي قبل إضافة الزر إلى صفحة تسجيل الدخول:
لعرض زر "تسجيل الدخول باستخدام حساب 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 ) { . log ( "Encoded JWT ID token: " + response . credential ); } . onload = function () { . accounts . id . initialize ({ : " YOUR_GOOGLE_CLIENT_ID " : handleCredentialResponse }); . accounts . id . renderButton ( . getElementById ( "buttonDiv" ), { theme : "outline" , size : "large" } // customization attributes ); . 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> . accounts . id . renderButton ( . 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 وقواعد التحقق من الصحة.
إرسال ملاحظات
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0 . للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers . إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2024-10-18 (حسب التوقيت العالمي المتفَّق عليه)
هل تريد مشاركة ملاحظاتك معنا؟
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2024-10-18 (حسب التوقيت العالمي المتفَّق عليه)"],[[["Easily add a \"Sign In With Google\" button to your website for user sign-up and sign-in, customizable with HTML or JavaScript."],["Google securely shares user profiles using a JWT (JSON Web Token) after consent."],["Before implementation, set up your OAuth Consent Screen, obtain a Client ID, and load the client library."],["Handle the JWT credential either on the client-side using a callback or server-side with a designated login endpoint."],["Choose between popup or redirect UX modes, considering user experience and security trade-offs for credential handling."]]],[]]
