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

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

يتناول هذا المستند كيفية إكمال عملية دمج تسجيل الدخول الأساسية في Google.

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

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

  1. Go to the Credentials page.
  2. انقر على إنشاء بيانات اعتماد &gt؛ معرّف عميل OAuth.
  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>