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