دمج تسجيل الدخول بحساب جوجل في تطبيق الويب الخاص بك

يدير تسجيل الدخول بحساب 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 Sign-In

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

لإنشاء زر تسجيل الدخول g-signin2 Google الذي يستخدم الإعدادات الافتراضية ، أضف عنصر div مع الفئة g-signin2 إلى صفحة تسجيل الدخول الخاصة بك:

<div class="g-signin2" data-onsuccess="onSignIn"></div>

فيما يلي مثال على زر تسجيل الدخول الافتراضي بحساب Google:

احصل على معلومات الملف الشخصي

بعد أن تقوم بتسجيل دخول مستخدم مع 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>