المصادقة باستخدام Google باستخدام JavaScript

يمكنك السماح للمستخدمين بالمصادقة مع Firebase باستخدام حساباتهم على Google. يمكنك استخدام حزمة تطوير البرامج (SDK) لمنصّة Firebase لتسجيل الدخول إلى حساب Google، أو تسجيل الدخول يدويًا باستخدام مكتبة "تسجيل الدخول باستخدام حساب Google" وتمرير الرمز المميّز لرقم التعريف الناتج إلى Firebase.

قبل البدء

1. أضِف Firebase إلى مشروع JavaScript.
2. فعِّل Google كطريقة تسجيل الدخول في "وحدة تحكُّم Firebase":
   1. في وحدة تحكُّم Firebase، افتح قسم المصادقة.
   2. في علامة التبويب طريقة تسجيل الدخول، فعِّل طريقة تسجيل الدخول باستخدام Google وانقر على حفظ.

معالجة عملية تسجيل الدخول باستخدام حزمة تطوير البرامج (SDK) لمنصّة Firebase

إذا كنت تنشئ تطبيق ويب، فإن أسهل طريقة لمصادقة المستخدمين من خلال Firebase باستخدام حساباتهم على Google هي التعامل مع تدفق تسجيل الدخول باستخدام حزمة SDK لـ Firebase JavaScript. (إذا كنت تريد مصادقة مستخدم في Node.js أو بيئة أخرى لا تستخدم المتصفح، يجب معالجة عملية تسجيل الدخول يدويًا.)

للتعامل مع عملية تسجيل الدخول باستخدام حزمة SDK لـ Firebase JavaScript، اتّبِع الخطوات التالية:

1. إنشاء مثيل لعنصر موفّر الخدمة من Google:

   واجهة برمجة التطبيقات Web modular API

   import { GoogleAuthProvider } from "firebase/auth";
   
   const provider = new GoogleAuthProvider();
   auth_google_provider_create.js

   واجهة برمجة التطبيقات لمساحة الاسم على الويب

   var provider = new firebase.auth.GoogleAuthProvider();
   google-signin.js

2. اختياري: حدِّد نطاقات OAuth 2.0 الإضافية التي تريد أن تطلبها من موفّر المصادقة. لإضافة نطاق، يمكنك طلب addScope. على سبيل المثال:

   واجهة برمجة التطبيقات Web modular API

   provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
   auth_google_provider_scopes.js

   واجهة برمجة التطبيقات لمساحة الاسم على الويب

   provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
   google-signin.js

   راجِع مستندات موفِّر المصادقة.
3. اختياري: لأقلمة مسار OAuth لدى الموفّر إلى لغة المستخدم المفضّلة بدون تمرير معلَمات OAuth المخصصة ذات الصلة بشكل صريح، يمكنك تعديل رمز اللغة في مثيل المصادقة قبل بدء مسار OAuth. على سبيل المثال:

   واجهة برمجة التطبيقات Web modular API

   import { getAuth } from "firebase/auth";
   
   const auth = getAuth();
   auth.languageCode = 'it';
   // To apply the default browser preference instead of explicitly setting it.
   // auth.useDeviceLanguage();
   auth_set_language_code.js

   واجهة برمجة التطبيقات لمساحة الاسم على الويب

   firebase.auth().languageCode = 'it';
   // To apply the default browser preference instead of explicitly setting it.
   // firebase.auth().useDeviceLanguage();
   index.js

4. اختياري: حدِّد المزيد من مَعلمات موفّر OAuth المخصّصة التي تريد إرسالها مع طلب OAuth. لإضافة مَعلمة مخصّصة، يمكنك استدعاء setCustomParameters في موفّر الخدمة الذي تم إعداده باستخدام عنصر يحتوي على المفتاح كما هو محدّد في مستندات موفّر OAuth والقيمة المقابلة. على سبيل المثال:

   واجهة برمجة التطبيقات Web modular API

   provider.setCustomParameters({
     'login_hint': 'user@example.com'
   });
   auth_google_provider_params.js

   واجهة برمجة التطبيقات لمساحة الاسم على الويب

   provider.setCustomParameters({
     'login_hint': 'user@example.com'
   });
   google-signin.js

   غير مسموح بمعلمات OAuth المطلوبة المحجوزة وسيتم تجاهلها. يُرجى الاطّلاع على مرجع موفّر المصادقة لمزيد من التفاصيل.
5. يمكنك المصادقة مع Firebase باستخدام عنصر موفّر Google. يمكنك الطلب من المستخدمين تسجيل الدخول باستخدام حساباتهم على Google من خلال فتح نافذة منبثقة أو إعادة التوجيه إلى صفحة تسجيل الدخول. وننصح باستخدام طريقة إعادة التوجيه على الأجهزة الجوّالة.
   • لتسجيل الدخول عبر نافذة منبثقة، اتصل بالرقم signInWithPopup:

     واجهة برمجة التطبيقات Web modular API

     import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
     
     const auth = getAuth();
     signInWithPopup(auth, provider)
       .then((result) => {
         // This gives you a Google Access Token. You can use it to access the Google API.
         const credential = GoogleAuthProvider.credentialFromResult(result);
         const token = credential.accessToken;
         // The signed-in user info.
         const user = result.user;
         // IdP data available using getAdditionalUserInfo(result)
         // ...
       }).catch((error) => {
         // Handle Errors here.
         const errorCode = error.code;
         const errorMessage = error.message;
         // The email of the user's account used.
         const email = error.customData.email;
         // The AuthCredential type that was used.
         const credential = GoogleAuthProvider.credentialFromError(error);
         // ...
       });
     auth_google_signin_popup.js

     واجهة برمجة التطبيقات لمساحة الاسم على الويب

     firebase.auth()
       .signInWithPopup(provider)
       .then((result) => {
         /** @type {firebase.auth.OAuthCredential} */
         var credential = result.credential;
     
         // This gives you a Google Access Token. You can use it to access the Google API.
         var token = credential.accessToken;
         // The signed-in user info.
         var user = result.user;
         // IdP data available in result.additionalUserInfo.profile.
           // ...
       }).catch((error) => {
         // Handle Errors here.
         var errorCode = error.code;
         var errorMessage = error.message;
         // The email of the user's account used.
         var email = error.email;
         // The firebase.auth.AuthCredential type that was used.
         var credential = error.credential;
         // ...
       });
     google-signin.js

     تجدر الإشارة أيضًا إلى أنّه يمكنك استرداد رمز OAuth المميز لموفِّر Google، والذي يمكن استخدامه لجلب بيانات إضافية باستخدام Google APIs.

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

   • لتسجيل الدخول من خلال إعادة التوجيه إلى صفحة تسجيل الدخول، عليك طلب رقم signInWithRedirect: اتّبِع أفضل الممارسات عند استخدام "signInWithRedirect".

     واجهة برمجة التطبيقات Web modular API

     import { getAuth, signInWithRedirect } from "firebase/auth";
     
     const auth = getAuth();
     signInWithRedirect(auth, provider);
     auth_signin_redirect.js

     واجهة برمجة التطبيقات لمساحة الاسم على الويب

     firebase.auth().signInWithRedirect(provider);
     index.js

     يمكنك بعد ذلك استرداد رمز OAuth المميز لموفِّر Google من خلال طلب الرمز getRedirectResult عند تحميل الصفحة:

     واجهة برمجة التطبيقات Web modular API

     import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth";
     
     const auth = getAuth();
     getRedirectResult(auth)
       .then((result) => {
         // This gives you a Google Access Token. You can use it to access Google APIs.
         const credential = GoogleAuthProvider.credentialFromResult(result);
         const token = credential.accessToken;
     
         // The signed-in user info.
         const user = result.user;
         // IdP data available using getAdditionalUserInfo(result)
         // ...
       }).catch((error) => {
         // Handle Errors here.
         const errorCode = error.code;
         const errorMessage = error.message;
         // The email of the user's account used.
         const email = error.customData.email;
         // The AuthCredential type that was used.
         const credential = GoogleAuthProvider.credentialFromError(error);
         // ...
       });
     auth_google_signin_redirect_result.js

     واجهة برمجة التطبيقات لمساحة الاسم على الويب

     firebase.auth()
       .getRedirectResult()
       .then((result) => {
         if (result.credential) {
           /** @type {firebase.auth.OAuthCredential} */
           var credential = result.credential;
     
           // This gives you a Google Access Token. You can use it to access the Google API.
           var token = credential.accessToken;
           // ...
         }
         // The signed-in user info.
         var user = result.user;
         // IdP data available in result.additionalUserInfo.profile.
           // ...
       }).catch((error) => {
         // Handle Errors here.
         var errorCode = error.code;
         var errorMessage = error.message;
         // The email of the user's account used.
         var email = error.email;
         // The firebase.auth.AuthCredential type that was used.
         var credential = error.credential;
         // ...
       });
     google-signin.js

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

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  GoogleAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Google.
  let result = await signInWithPopup(getAuth(), new GoogleAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Google credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Google credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

المصادقة باستخدام Firebase في إحدى إضافات Chrome

إذا كنت تنشئ تطبيقًا لإضافة Chrome، يمكنك الاطّلاع على دليل المستندات خارج الشاشة.

الخطوات اللاحقة

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

• الطريقة التي ننصح بها في تطبيقاتك لمعرفة حالة المصادقة للمستخدم هي ضبط مراقب على كائن Auth. يمكنك بعد ذلك الحصول على معلومات الملف الشخصي الأساسية للمستخدم من كائن User. يُرجى الاطّلاع على إدارة المستخدمين.

• في قاعدة بيانات Firebase في الوقت الفعلي وقواعد أمان Cloud Storage، يمكنك الحصول على رقم تعريف المستخدم الفريد للمستخدم الذي سجّل الدخول من المتغيّر auth واستخدامه للتحكّم في البيانات التي يمكن للمستخدم الوصول إليها.

يمكنك السماح للمستخدمين بتسجيل الدخول إلى تطبيقك باستخدام عدة موفِّري مصادقة من خلال ربط بيانات اعتماد موفِّر المصادقة بحساب مستخدم حالي.

لتسجيل خروج مستخدم، يمكنك الاتصال بالرقم signOut:

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js