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

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

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

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

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

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