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

يدير Google Sign-In تدفق 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>