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

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

قبل البدء

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

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

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

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

1. أنشئ مثيلاً لكائن موفّر Google:

   Web

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

   Web

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

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

   Web

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

   Web

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

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

   Web

   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

   Web

   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

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

   Web

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

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

     Web

     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

     Web

     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.

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

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

     Web

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

     Web

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

     بعد ذلك، يمكنك أيضًا استرداد رمز OAuth الخاص بمقدّم خدمة Google من خلال استدعاء getRedirectResult عند تحميل صفحتك:

     Web

     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

     Web

     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

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

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 Realtime Database و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