دمج "تسجيل الدخول بحساب Google" في تطبيق الويب

تتولّى خدمة "تسجيل الدخول باستخدام حساب Google" إدارة مسار OAuth 2.0 ودورة حياة الرمز المميّز، ما يسهّل عملية الدمج مع Google APIs. يمكن للمستخدم في أي وقت إبطال إذن الوصول إلى أي تطبيق.

يوضّح هذا المستند كيفية إكمال عملية دمج أساسية لميزة "تسجيل الدخول باستخدام Google".

إنشاء بيانات اعتماد التفويض

يجب أن يتضمّن أي تطبيق يستخدم بروتوكول OAuth 2.0 للوصول إلى Google APIs بيانات اعتماد تفويض تحدّد التطبيق لخادم OAuth 2.0 من Google. توضّح الخطوات التالية كيفية إنشاء بيانات اعتماد لمشروعك. يمكن لتطبيقاتك بعد ذلك استخدام بيانات الاعتماد للوصول إلى واجهات برمجة التطبيقات التي فعّلتها لهذا المشروع.

1. Go to the Clients page.
2. انقر على إنشاء عميل.
3. اختَر نوع التطبيق تطبيق الويب.
4. أدخِل اسم عميل OAuth 2.0 وانقر على إنشاء

بعد اكتمال عملية الإعداد، دوِّن معرّف العميل الذي تم إنشاؤه. ستحتاج إلى رقم تعريف العميل لإكمال الخطوات التالية. (يتم أيضًا إنشاء سر عميل، ولكنك تحتاج إليه فقط لإجراء عمليات من جهة الخادم).

تحميل مكتبة Google Platform

يجب تضمين مكتبة Google Platform في صفحات الويب التي تتضمّن ميزة "تسجيل الدخول باستخدام حساب 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>