دمج ميزة تسجيل الدخول بحساب 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 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>