يمكنك السماح للمستخدمين بالمصادقة مع Firebase باستخدام حساباتهم في Google. يمكنك إما استخدام Firebase SDK لتنفيذ تدفق تسجيل الدخول إلى Google ، أو تنفيذ تدفق تسجيل الدخول يدويًا باستخدام مكتبة Sign In With Google وتمرير رمز المعرف الناتج إلى Firebase.
قبل ان تبدأ
- أضف Firebase إلى مشروع JavaScript الخاص بك .
- تمكين Google كطريقة تسجيل دخول في وحدة تحكم Firebase:
- في وحدة تحكم Firebase ، افتح قسم المصادقة .
- في علامة التبويب طريقة تسجيل الدخول ، قم بتمكين طريقة تسجيل الدخول إلى Google وانقر فوق حفظ .
تعامل مع تدفق تسجيل الدخول باستخدام Firebase SDK
إذا كنت تنشئ تطبيقًا على الويب ، فإن أسهل طريقة لمصادقة المستخدمين باستخدام Firebase باستخدام حساباتهم في Google هي التعامل مع تدفق تسجيل الدخول باستخدام Firebase JavaScript SDK. (إذا كنت تريد مصادقة مستخدم في Node.js أو بيئة أخرى بخلاف المستعرض ، فيجب عليك معالجة تدفق تسجيل الدخول يدويًا.)
للتعامل مع تدفق تسجيل الدخول باستخدام Firebase JavaScript SDK ، اتبع الخطوات التالية:
- إنشاء مثيل لكائن موفر Google:
Web modular API
import { GoogleAuthProvider } from "firebase/auth"; const provider = new GoogleAuthProvider();
Web namespaced API
var provider = new firebase.auth.GoogleAuthProvider();
- اختياري : حدد نطاقات OAuth 2.0 الإضافية التي تريد طلبها من موفر المصادقة. لإضافة نطاق ، قم باستدعاء
addScope
. على سبيل المثال:انظر وثائق مزود المصادقة .Web modular API
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
Web namespaced API
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
- اختياري : لترجمة تدفق 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. // firebase.auth().useDeviceLanguage();
Web namespaced API
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- اختياري : حدد معلمات موفر OAuth المخصصة الإضافية التي تريد إرسالها مع طلب OAuth. لإضافة معلمة مخصصة ، قم باستدعاء
setCustomParameters
على الموفر الذي تمت تهيئته باستخدام كائن يحتوي على المفتاح كما هو محدد بواسطة وثائق موفر OAuth والقيمة المقابلة. على سبيل المثال:معلمات OAuth المطلوبة المحجوزة غير مسموح بها وسيتم تجاهلها. راجع مرجع موفر المصادقة لمزيد من التفاصيل.Web modular API
provider.setCustomParameters({ 'login_hint': 'user@example.com' });
Web namespaced API
provider.setCustomParameters({ 'login_hint': 'user@example.com' });
- مصادقة مع Firebase باستخدام كائن موفر Google. يمكنك مطالبة المستخدمين بتسجيل الدخول بحساباتهم في Google إما عن طريق فتح نافذة منبثقة أو عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول. طريقة إعادة التوجيه مفضلة على الأجهزة المحمولة.
- لتسجيل الدخول من خلال نافذة منبثقة ، اتصل بـ
signInWithPopup
:لاحظ أيضًا أنه يمكنك استرداد رمز OAuth المميز لموفر Google والذي يمكن استخدامه لجلب بيانات إضافية باستخدام Google APIs.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); // ... });
Web namespaced API
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; // ... });
هذا هو المكان الذي يمكنك فيه اكتشاف الأخطاء ومعالجتها. للحصول على قائمة برموز الخطأ ، ألق نظرة على Auth Reference Docs .
- لتسجيل الدخول عن طريق إعادة التوجيه إلى صفحة تسجيل الدخول ، اتصل بـ
signInWithRedirect
: اتبع أفضل الممارسات عند استخدام `SignInWithRedirect`.بعد ذلك ، يمكنك أيضًا استرداد رمز OAuth المميز لموفر Google عن طريق استدعاءWeb modular API
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web namespaced API
firebase.auth().signInWithRedirect(provider);
getRedirectResult
عند تحميل صفحتك:هذا هو المكان الذي يمكنك فيه اكتشاف الأخطاء ومعالجتها. للحصول على قائمة برموز الخطأ ، ألق نظرة على Auth Reference Docs .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); // ... });
Web namespaced API
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; // ... });
- لتسجيل الدخول من خلال نافذة منبثقة ، اتصل بـ
قم بالمصادقة باستخدام Firebase في أحد إضافات Chrome
إذا كنت بصدد إنشاء تطبيق ملحق Chrome ، فيجب عليك إضافة معرف إضافة Chrome الخاص بك:
- افتح مشروعك في وحدة تحكم Firebase .
- في قسم المصادقة ، افتح صفحة طريقة تسجيل الدخول .
- أضف URI مثل ما يلي إلى قائمة المجالات المصرح بها:
chrome-extension://CHROME_EXTENSION_ID
تتوفر فقط العمليات المنبثقة ( signInWithPopup
و linkWithPopup
و reauthenticateWithPopup
) لإضافات Chrome ، نظرًا لأن ملحقات Chrome لا يمكنها استخدام عمليات إعادة توجيه HTTP. يجب عليك استدعاء هذه الأساليب من برنامج نصي لصفحة الخلفية بدلاً من نافذة منبثقة لإجراء المستعرض ، حيث ستلغي نافذة المصادقة المنبثقة نافذة إجراء المتصفح المنبثقة. لا يجوز استخدام الأساليب المنبثقة إلا في الامتدادات التي تستخدم Manifest V2 . يسمح إصدار Manifest V3 الأحدث فقط بنصوص الخلفية في شكل عمال خدمة ، ولا يمكنهم تنفيذ عمليات النوافذ المنبثقة على الإطلاق.
في ملف البيان الخاص بامتداد Chrome ، تأكد من إضافة https://apis.google.com
URL إلى content_security_policy
allowlist.
الخطوات التالية
بعد أن يقوم المستخدم بتسجيل الدخول لأول مرة ، يتم إنشاء حساب مستخدم جديد وربطه ببيانات الاعتماد - أي اسم المستخدم وكلمة المرور أو رقم الهاتف أو معلومات موفر المصادقة - المستخدم الذي قام بتسجيل الدخول باستخدام. يتم تخزين هذا الحساب الجديد كجزء من مشروع Firebase الخاص بك ، ويمكن استخدامه لتحديد هوية مستخدم عبر كل تطبيق في مشروعك ، بغض النظر عن كيفية تسجيل المستخدم للدخول.
في تطبيقاتك ، الطريقة الموصى بها لمعرفة حالة المصادقة للمستخدم الخاص بك هي تعيين مراقب على كائن
Auth
. يمكنك بعد ذلك الحصول على معلومات ملف التعريف الأساسية للمستخدم من كائنUser
. انظر إدارة المستخدمين .في قاعدة بيانات Firebase Realtime وقواعد أمان التخزين السحابي ، يمكنك الحصول على معرف المستخدم الفريد للمستخدم الذي قام بتسجيل الدخول من متغير
auth
، واستخدامه للتحكم في البيانات التي يمكن للمستخدم الوصول إليها.
يمكنك السماح للمستخدمين بتسجيل الدخول إلى تطبيقك باستخدام موفري مصادقة متعددين عن طريق ربط بيانات اعتماد موفر المصادقة بحساب مستخدم حالي.
لتسجيل خروج مستخدم ، قم signOut
:
Web modular API
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web namespaced API
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });