FirebaseUI هي مكتبة تم إنشاؤها فوق حزمة SDK لمصادقة Firebase وتوفّر تدفقات واجهة مستخدم منسدلة لاستخدامها في تطبيقك. وتوفّر واجهة FirebaseUI المزايا التالية:
- العديد من مقدِّمي الخدمة: مسارات تسجيل الدخول لعنوان البريد الإلكتروني/كلمة المرور ورابط البريد الإلكتروني ومصادقة الهاتف وتسجيل الدخول بحساب Google وتسجيل الدخول إلى Facebook وتسجيل الدخول إلى Twitter.
- إدارة الحساب: مسارات للتعامل مع مهام إدارة الحساب، مثل إنشاء الحساب وإعادة ضبط كلمة المرور.
- ربط الحسابات المجهولة: مسارات لربط الحسابات المجهولة الهوية تلقائيًا بموفِّري الهوية.
- قابل للتخصيص: يمكنك تخصيص مظهر FirebaseUI ليتوافق مع تطبيقك. بالإضافة إلى ذلك، نظرًا لأن FirebaseUI مفتوحة المصدر، يمكنك استخدام واجهة برمجة التطبيقات للمشروع وتخصيصه وفقًا لاحتياجاتك بالضبط.
قبل البدء
إضافة FirebaseUI إلى Podfile:
pod 'FirebaseUI'
يمكنك، إن أردت، إضافة مكوّن المصادقة وموفِّري الخدمات الذين تريد استخدامهم فقط:
pod 'FirebaseUI/Auth' pod 'FirebaseUI/Google' pod 'FirebaseUI/Facebook' pod 'FirebaseUI/OAuth' # Used for Sign in with Apple, Twitter, etc pod 'FirebaseUI/Phone'
إذا لم تكن قد ربطت تطبيقك بمشروعك في Firebase، يمكنك إجراء ذلك من خلال وحدة تحكُّم Firebase.
إعداد طُرق تسجيل الدخول
قبل أن تتمكّن من استخدام Firebase لتسجيل دخول المستخدمين، عليك تفعيل وضبط طرق تسجيل الدخول التي تريد دعمها.
عنوان البريد الإلكتروني وكلمة المرور
في وحدة تحكُّم Firebase، افتح قسم المصادقة وفعِّل مصادقة البريد الإلكتروني وكلمة المرور.
مصادقة رابط البريد الإلكتروني
في وحدة تحكُّم Firebase، افتح قسم المصادقة. في علامة التبويب طريقة تسجيل الدخول، فعِّل موفّر البريد الإلكتروني/كلمة المرور. تجدر الإشارة إلى أنّه يجب تفعيل البريد الإلكتروني أو كلمة المرور لتسجيل الدخول لاستخدام ميزة تسجيل الدخول باستخدام رابط البريد الإلكتروني.
في القسم نفسه، فعِّل طريقة تسجيل الدخول رابط البريد الإلكتروني (تسجيل الدخول بدون كلمة مرور) وانقر على حفظ.
يمكنك تفعيل ميزة تسجيل الدخول باستخدام رابط البريد الإلكتروني من خلال إعداد مثيل
FUIEmailAuth
معFIREmailLinkAuthSignInMethod
. وعليك أيضًا تقديم كائنFIRActionCodeSettings
صالح مع ضبطhandleCodeInApp
على "صحيح".
Swift
var actionCodeSettings = ActionCodeSettings()
actionCodeSettings.url = URL(string: "https://example.appspot.com")
actionCodeSettings.handleCodeInApp = true
actionCodeSettings.setAndroidPackageName("com.firebase.example", installIfNotAvailable: false, minimumVersion: "12")
let provider = FUIEmailAuth(authUI: FUIAuth.defaultAuthUI()!,
signInMethod: FIREmailLinkAuthSignInMethod,
forceSameDevice: false,
allowNewEmailAccounts: true,
actionCodeSetting: actionCodeSettings)
Objective-C
FIRActionCodeSettings *actionCodeSettings = [[FIRActionCodeSettings alloc] init];
actionCodeSettings.URL = [NSURL URLWithString:@"https://example.appspot.com"];
actionCodeSettings.handleCodeInApp = YES;
[actionCodeSettings setAndroidPackageName:@"com.firebase.example"
installIfNotAvailable:NO
minimumVersion:@"12"];
id<FUIAuthProvider> provider = [[FUIEmailAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]
signInMethod:FIREmailLinkAuthSignInMethod
forceSameDevice:NO
allowNewEmailAccounts:YES
actionCodeSetting:actionCodeSettings];
بالإضافة إلى ذلك، عليك إضافة عنوان URL الذي تنقله إلى أداة بدء المحادثة إلى القائمة البيضاء. يمكنك إجراء ذلك من خلال وحدة تحكُّم Firebase، وفتح قسم المصادقة. في علامة التبويب طريقة تسجيل الدخول، أضِف عنوان URL ضمن النطاقات المسموح بها.
بعد العثور على الرابط المؤدي لصفحة معيّنة، يجب تمريره إلى واجهة مستخدم المصادقة حتى يتم التعامل معه.
Swift
FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)
Objective-C
[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
- تتوافق ميزة تسجيل الدخول باستخدام رابط البريد الإلكتروني في FirebaseUI-iOS مع FirebaseUI-Android وFirebaseUI-web حيث يمكن للمستخدم الذي يبدأ المسار من FirebaseUI-Android فتح الرابط وإكمال عملية تسجيل الدخول باستخدام FirebaseUI-web. وينطبق الشيء نفسه على التدفق العكسي.
Apple
اتّبِع القسمَين قبل البدء والالتزام بمتطلبات البيانات المخفية الهوية من Apple في دليل تسجيل الدخول باستخدام حساب Apple على Firebase.
أضِف ميزة "تسجيل الدخول باستخدام حساب Apple" إلى ملف الأذونات.
إعداد مثيل موفّر OAuth تم ضبطه لميزة "تسجيل الدخول باستخدام حساب Apple":
Swift
provider = FUIOAuth.appleAuthProvider()
Objective-C
FUIOAuth *provider = [FUIOAuth appleAuthProvider];
- إعداد ميزة "تسجيل الدخول بحساب Google" باستخدام هذا البرنامج التعليمي
يمكنك إعداد حزمة تطوير البرامج (SDK) لتسجيل الدخول إلى Facebook من خلال متابعة صفحة البدء على Facebook.
من وحدة تحكُّم Firebase، افتح قسم المصادقة وفعِّل Facebook. لتفعيل تسجيل الدخول إلى Facebook، يجب عليك تقديم معرّف تطبيق Facebook وسر التطبيق، واللذين يمكنك الحصول عليهما من خلال وحدة تحكم مطوّري برامج Facebook.
يمكنك تفعيل مشاركة سلسلة المفاتيح في مشروع Xcode من شاشة Project Settings (إعدادات المشروع) > Capabilities (الإمكانات).
أضِف
fbFACEBOOK_APP_ID
كمخطط عنوان URL في مشروع Xcode.أضِف رقم تعريف تطبيق Facebook والاسم المعروض إلى ملف
Info.plist
:مفتاح الخريطة القيمة رقم تعريف تطبيق Facebook FACEBOOK_APP_ID
(على سبيل المثال،1234567890
)اسم العرض على Facebook اسم تطبيقك إعداد مثيل موفِّر Facebook:
Swift
provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())
Objective-C
FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];
إذا أردت استخدام Facebook Limited Login، اضبط السمة
useLimitedLogin
على مثيلFUIFacebookAuth
.Swift
provider.useLimitedLogin = true
Objective-C
provider.useLimitedLogin = YES;
في وحدة تحكُّم Firebase، افتح قسم المصادقة وفعِّل Twitter. لتفعيل تسجيل الدخول إلى Twitter، يجب تقديم مفتاح وسر العميل لواجهة برمجة تطبيقات Twitter، واللذين يمكنك الحصول عليهما من وحدة تحكم إدارة التطبيقات في Twitter.
إعداد مثيل موفّر OAuth تم ضبطه لتسجيل الدخول إلى Twitter:
Swift
provider = FUIOAuth.twitterAuthProvider()
Objective-C
FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
رقم الهاتف
في وحدة تحكُّم Firebase، افتح قسم المصادقة وفعِّل تسجيل الدخول إلى رقم الهاتف.
يجب أن يتمكّن Firebase من التأكّد من أنّ طلبات تسجيل الدخول إلى رقم الهاتف من تطبيقك. وإحدى الطرق لتنفيذ ذلك هي من خلال إشعارات أسماء نقاط الوصول. راجع تفعيل التحقق من التطبيقات لمعرفة التفاصيل.
لتفعيل إشعارات أسماء نقاط الوصول (APN) للاستخدام مع مصادقة Firebase:
في Xcode، فعِّل الإشعارات الفورية لمشروعك.
حمِّل مفتاح مصادقة أسماء نقاط الوصول إلى Firebase. إذا لم يكن لديك مفتاح مصادقة لأسماء نقاط الوصول (APN)، احرص على إنشاء مفتاح في مركز أعضاء المطوّرين في Apple.
-
من داخل مشروعك في وحدة تحكُّم Firebase، اختَر رمز الترس، ثمّ اختَر إعدادات المشروع (Project Settings)، ثم اختَر علامة التبويب المراسلة عبر السحابة الإلكترونية.
-
في مفتاح مصادقة أسماء نقاط الوصول (APN) ضمن ضبط تطبيق iOS، انقر على الزر تحميل.
-
انتقِل إلى الموقع الجغرافي الذي حفظت فيه المفتاح واختَره وانقر على فتح. أضِف معرّف المفتاح (المتوفّر في Apple Developer Member Center) وانقر على Upload (تحميل).
إذا كانت لديك شهادة أسماء نقاط الوصول (APN) من قبل، يمكنك تحميل الشهادة بدلاً من ذلك.
-
عندما يتعذّر تلقّي إشعارات أسماء نقاط الوصول على أحد الأجهزة، يستخدم Firebase ميزة reCAPTCHA للتحقّق من الطلبات.
لتفعيل reCAPTCHA، يُرجى اتّباع الخطوات التالية في Xcode:
- افتح إعدادات المشروع: انقر مرّتين على اسم المشروع في العرض التدرّجي الأيمن. اختَر تطبيقك من القسم الاستهدافات، ثم اختَر علامة التبويب المعلومات، ووسِّع القسم أنواع عناوين URL.
- انقر على الزر + وأضِف رقم تعريف التطبيق المشفر كمخطط عنوان URL. يمكنك العثور على رقم تعريف التطبيق المرمّز في صفحة الإعدادات العامة ضمن "وحدة تحكُّم Firebase" ضمن قسم تطبيق iOS. واترك الحقول الأخرى فارغة.
عند اكتمال العملية، من المفترض أن تظهر الإعدادات بشكل مشابه لما يلي (ولكن مع القيم الخاصة بالتطبيق):
اختياري: يستخدم Firebase طريقة التبديل للحصول على رمز APNs لتطبيقك تلقائيًا، ومعالجة الإشعارات الفورية الصامتة التي يرسلها Firebase إلى تطبيقك، واعتراض عملية إعادة توجيه المخطّط المخصّص تلقائيًا من صفحة إثبات الملكية في reCAPTCHA أثناء عملية إثبات الملكية.
إذا كنت تفضِّل عدم استخدام الدواء، يُرجى الاطّلاع على الملحق: استخدام تسجيل الدخول عبر الهاتف بدون تحريك في مستندات مصادقة حزمة تطوير البرامج (SDK) لمنصّة Firebase.
تسجيل الدخول
لبدء عملية تسجيل الدخول في FirebaseUI، يجب أولاً تهيئة واجهة FirebaseUI:
Swift
import FirebaseAuthUI
/* ... */
FirebaseApp.configure()
let authUI = FUIAuth.defaultAuthUI()
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self
Objective-C
@import FirebaseAuthUI;
...
[FIRApp configure];
FUIAuth *authUI = [FUIAuth defaultAuthUI];
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self;
بعد ذلك، يمكنك ضبط FirebaseUI لاستخدام طرق تسجيل الدخول التي تريد دعمها:
Swift
import FirebaseAuthUI
import FirebaseFacebookAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
import FirebasePhoneAuthUI
let providers: [FUIAuthProvider] = [
FUIGoogleAuth(),
FUIFacebookAuth(),
FUITwitterAuth(),
FUIPhoneAuth(authUI:FUIAuth.defaultAuthUI()),
]
self.authUI.providers = providers
Objective-C
@import FirebaseAuthUI;
@import FirebaseFacebookAuthUI;
@import FirebaseGoogleAuthUI;
@import FirebaseOAuthUI;
@import FirebasePhoneAuthUI;
...
NSArray<id<FUIAuthProvider>> *providers = @[
[[FUIGoogleAuth alloc] init],
[[FUIFacebookAuth alloc] init],
[[FUITwitterAuth alloc] init],
[[FUIPhoneAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]]
];
_authUI.providers = providers;
إذا مكنت تسجيل الدخول إلى Google أو Facebook، فنفِّذ معالجًا لنتيجة تدفقات الاشتراك في Google وFacebook:
Swift
func application(_ app: UIApplication, open url: URL,
options: [UIApplicationOpenURLOptionsKey : Any]) -> Bool {
let sourceApplication = options[UIApplicationOpenURLOptionsKey.sourceApplication] as! String?
if FUIAuth.defaultAuthUI()?.handleOpen(url, sourceApplication: sourceApplication) ?? false {
return true
}
// other URL handling goes here.
return false
}
Objective-C
- (BOOL)application:(UIApplication *)app
openURL:(NSURL *)url
options:(NSDictionary *)options {
NSString *sourceApplication = options[UIApplicationOpenURLOptionsSourceApplicationKey];
return [[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
}
أخيرًا، احصل على مثيل لـ AuthViewController
من FUIAuth
. ويمكنك بعد ذلك إما عرضه كأول وحدة تحكم في العرض لتطبيقك أو تقديمه من خلال وحدة تحكم في العرض أخرى في التطبيق.
Swift
للحصول على أداة اختيار طريقة تسجيل الدخول:
let authViewController = authUI.authViewController()
إذا كنت تستخدم رقم الهاتف فقط لتسجيل الدخول، يمكنك عرض تسجيل الدخول لرقم الهاتف مباشرةً بدلاً من ذلك:
let phoneProvider = FUIAuth.defaultAuthUI().providers.first as! FUIPhoneAuth
phoneProvider.signIn(withPresenting: currentlyVisibleController, phoneNumber: nil)
Objective-C
للحصول على أداة اختيار طريقة تسجيل الدخول:
UINavigationController *authViewController = [authUI authViewController];
إذا كنت تستخدم رقم الهاتف فقط لتسجيل الدخول، يمكنك عرض تسجيل الدخول لرقم الهاتف مباشرةً بدلاً من ذلك:
FUIPhoneAuth *phoneProvider = [FUIAuth defaultAuthUI].providers.firstObject;
[phoneProvider signInWithPresentingViewController:currentlyVisibleController phoneNumber:nil];
بعد عرض طريقة عرض المصادقة وتسجيل المستخدم للدخول، يتم إرجاع النتيجة إلى تفويض مصادقة FirebaseUI في الطريقة didSignInWithUser:error:
:
Swift
func authUI(_ authUI: FUIAuth, didSignInWith user: FIRUser?, error: Error?) {
// handle user and error as necessary
}
Objective-C
- (void)authUI:(FUIAuth *)authUI
didSignInWithUser:(nullable FIRUser *)user
error:(nullable NSError *)error {
// Implement this method to handle signed in user or error if any.
}
تسجيل الخروج
توفّر واجهة FirebaseUI طرقًا سهلة لتسجيل الخروج من مصادقة Firebase بالإضافة إلى جميع موفِّري الهوية الاجتماعية، وهي:
Swift
authUI.signOut()
Objective-C
[authUI signOut];
التخصيص
يمكنك تخصيص شاشات تسجيل الدخول من خلال تصنيف عناصر التحكّم في العرض في FirebaseUI
وتحديدها بطرق التفويض في FUIAuth
:
Swift
func authPickerViewController(forAuthUI authUI: FUIAuth) -> FUIAuthPickerViewController {
return FUICustomAuthPickerViewController(nibName: "FUICustomAuthPickerViewController",
bundle: Bundle.main,
authUI: authUI)
}
func emailEntryViewController(forAuthUI authUI: FUIAuth) -> FUIEmailEntryViewController {
return FUICustomEmailEntryViewController(nibName: "FUICustomEmailEntryViewController",
bundle: Bundle.main,
authUI: authUI)
}
func passwordRecoveryViewController(forAuthUI authUI: FUIAuth, email: String) -> FUIPasswordRecoveryViewController {
return FUICustomPasswordRecoveryViewController(nibName: "FUICustomPasswordRecoveryViewController",
bundle: Bundle.main,
authUI: authUI,
email: email)
}
func passwordSignInViewController(forAuthUI authUI: FUIAuth, email: String) -> FUIPasswordSignInViewController {
return FUICustomPasswordSignInViewController(nibName: "FUICustomPasswordSignInViewController",
bundle: Bundle.main,
authUI: authUI,
email: email)
}
func passwordSignUpViewController(forAuthUI authUI: FUIAuth, email: String) -> FUIPasswordSignUpViewController {
return FUICustomPasswordSignUpViewController(nibName: "FUICustomPasswordSignUpViewController",
bundle: Bundle.main,
authUI: authUI,
email: email)
}
func passwordVerificationViewController(forAuthUI authUI: FUIAuth, email: String, newCredential: AuthCredential) -> FUIPasswordVerificationViewController {
return FUICustomPasswordVerificationViewController(nibName: "FUICustomPasswordVerificationViewController",
bundle: Bundle.main,
authUI: authUI,
email: email,
newCredential: newCredential)
}
Objective-C
- (FUIAuthPickerViewController *)authPickerViewControllerForAuthUI:(FUIAuth *)authUI {
return [[FUICustomAuthPickerViewController alloc] initWithNibName:@"FUICustomAuthPickerViewController"
bundle:[NSBundle mainBundle]
authUI:authUI];
}
- (FUIEmailEntryViewController *)emailEntryViewControllerForAuthUI:(FUIAuth *)authUI {
return [[FUICustomEmailEntryViewController alloc] initWithNibName:@"FUICustomEmailEntryViewController"
bundle:[NSBundle mainBundle]
authUI:authUI];
}
- (FUIPasswordSignInViewController *)passwordSignInViewControllerForAuthUI:(FUIAuth *)authUI
email:(NSString *)email {
return [[FUICustomPasswordSignInViewController alloc] initWithNibName:@"FUICustomPasswordSignInViewController"
bundle:[NSBundle mainBundle]
authUI:authUI
email:email];
}
- (FUIPasswordSignUpViewController *)passwordSignUpViewControllerForAuthUI:(FUIAuth *)authUI
email:(NSString *)email {
return [[FUICustomPasswordSignUpViewController alloc] initWithNibName:@"FUICustomPasswordSignUpViewController"
bundle:[NSBundle mainBundle]
authUI:authUI
email:email];
}
- (FUIPasswordRecoveryViewController *)passwordRecoveryViewControllerForAuthUI:(FUIAuth *)authUI
email:(NSString *)email {
return [[FUICustomPasswordRecoveryViewController alloc] initWithNibName:@"FUICustomPasswordRecoveryViewController"
bundle:[NSBundle mainBundle]
authUI:authUI
email:email];
}
- (FUIPasswordVerificationViewController *)passwordVerificationViewControllerForAuthUI:(FUIAuth *)authUI
email:(NSString *)email
newCredential:(FIRAuthCredential *)newCredential {
return [[FUICustomPasswordVerificationViewController alloc] initWithNibName:@"FUICustomPasswordVerificationViewController"
bundle:[NSBundle mainBundle]
authUI:authUI
email:email
newCredential:newCredential];
}
يمكنك تخصيص عنوان URL الخاص ببنود الخدمة الخاصة بتطبيقك، والمرتبط في شاشة إنشاء الحساب:
Swift
let kFirebaseTermsOfService = URL(string: "https://example.com/terms")!
authUI.tosurl = kFirebaseTermsOfService
Objective-C
authUI.TOSURL = [NSURL URLWithString:@"https://example.com/terms"];
أخيرًا، يمكنك تخصيص الرسائل والطلبات المعروضة للمستخدمين من خلال تحديد حزمة مخصّصة كما يلي:
Swift
authUI.customStringsBundle = NSBundle.mainBundle() // Or any custom bundle.
Objective-C
authUI.customStringsBundle = [NSBundle mainBundle]; // Or any custom bundle.
الخطوات التالية
- لمزيد من المعلومات عن استخدام واجهة FirebaseUI وتخصيصها، يمكنك الاطّلاع على ملف README في GitHub.
- إذا عثرت على مشكلة في FirebaseUI وأردت الإبلاغ عنها، استخدِم أداة تتبُّع مشاكل GitHub.