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

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