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