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

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

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

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

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

2. انقر على إنشاء بيانات اعتماد > معرِّف عميل OAuth.
3. اختَر نوع التطبيق تطبيق الويب.
4. أدخِل اسمًا لعميل OAuth 2.0 وانقر على إنشاء.

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

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

يجب تضمين 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>