سيتم إيقاف "مكتبة منصّة JavaScript لتسجيل الدخول إلى Google" على الويب. لن تكون المكتبة متاحة للتنزيل بعد 31 آذار (مارس) 2023. وبدلاً من ذلك، استخدم خدمات Google Identity الجديدة على الويب.
حسب الإعدادات التلقائية، يتم الآن حظر استخدام معرّفات Client ID الجديدة في مكتبة النظام الأساسي، ولن تتأثر معرّفات Client ID الحالية. يمكن لمعرّفات العملاء الجديدة التي تم إنشاؤها قبل 29 تموز (يوليو) 2022 ضبط `plugin_name` لتفعيل استخدام "منصة 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 Sign-In

أسهل طريقة لإضافة زر تسجيل الدخول بحساب 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>