تعمل ميزة "تسجيل الدخول بحساب Google" على إدارة تدفق OAuth 2.0 ومراحل نشاط الرمز المميز، لتسهيل عملية الدمج مع Google APIs. يتوفر للمستخدم دائمًا خيار إبطال الوصول إلى تطبيق في أي وقت.
يوضِّح هذا المستند كيفية إكمال عملية دمج أساسية لتسجيل الدخول بحساب Google.
إنشاء بيانات اعتماد التفويض
يجب أن تتوفر لدى أي تطبيق يستخدم OAuth 2.0 للوصول إلى Google APIs بيانات اعتماد تفويض تحدِّد التطبيق لخادم OAuth 2.0 من Google. توضح الخطوات التالية كيفية إنشاء بيانات اعتماد لمشروعك. يمكن لتطبيقاتك بعد ذلك استخدام بيانات الاعتماد للوصول إلى واجهات برمجة التطبيقات التي قمت بتفعيلها لهذا المشروع.
- Go to the Credentials page.
- انقر على إنشاء بيانات اعتماد > معرِّف عميل OAuth.
- اختَر نوع تطبيق تطبيق الويب.
- أدخِل اسمًا لعميل OAuth 2.0 وانقر على إنشاء.
بعد اكتمال الضبط، دوِّن معرِّف العميل الذي تم إنشاؤه. ستحتاج إلى معرّف العميل لإكمال الخطوات التالية. (يتم أيضًا إنشاء سر العميل، ولكنك ستحتاج إليه فقط للعمليات من جانب الخادم).
تحميل Google Platform Library
يجب تضمين Google Platform Library على صفحات الويب التي تتضمن ميزة "تسجيل الدخول بحساب Google".
<script src="https://apis.google.com/js/platform.js" async defer></script>
تحديد معرِّف العميل لتطبيقك
حدِّد معرّف العميل الذي أنشأته لتطبيقك في Google Developers Console
باستخدام العنصر الوصفي google-signin-client_id.
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
إضافة زر "تسجيل الدخول بحساب Google"
أسهل طريقة لإضافة زر "تسجيل الدخول بحساب Google" إلى موقعك الإلكتروني هي استخدام زر تسجيل الدخول المعروض تلقائيًا. باستخدام بضعة أسطر من الرموز، يمكنك إضافة زر يضبط تلقائيًا نفسه ليتضمن النص والشعار والألوان المناسبة لحالة تسجيل دخول المستخدم والنطاقات التي تطلبها.
لإنشاء زر "تسجيل الدخول بحساب Google" يستخدم الإعدادات التلقائية، أضِف عنصر div
مع الصف g-signin2 إلى صفحة تسجيل الدخول:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
الحصول على معلومات الملف الشخصي
بعد تسجيل دخول مستخدم من خلال Google باستخدام النطاقات التلقائية، يمكنك الوصول إلى معرّف Google للمستخدم والاسم وعنوان URL للملف الشخصي وعنوان البريد الإلكتروني.
لاسترداد معلومات الملف الشخصي لمستخدم، يمكنك استخدام الإجراء
getBasicProfile().
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}
تسجيل خروج المستخدم
يمكنك السماح للمستخدمين بتسجيل الخروج من تطبيقك بدون تسجيل الخروج من Google، وذلك من خلال إضافة زر لتسجيل الخروج أو رابط يؤدي إلى موقعك الإلكتروني. لإنشاء رابط تسجيل الخروج، أرفِق
دالة تستدعي الطريقة
GoogleAuth.signOut()
بحدث onclick للرابط.
<a href="#" onclick="signOut();">Sign out</a>
<script>
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
</script>