أضِف زر "تسجيل الدخول باستخدام حساب 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 وقواعد التحقّق من الصحة.