إضافة زر "تسجيل الدخول باستخدام حساب 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 في HTML أو locale في JavaScript.
HTML
يوضّح المقتطف التالي من الرمز كيفية عرض لغة الزر باللغة الفرنسية
من خلال إضافة المَعلمة 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>
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. قد يكون ضبط كلتا القيمتين مفيدًا عند استخدام معالج callback
لتصحيح الأخطاء.
JavaScript
يجب تحديد 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 وقواعد التحقق من الصحة.