إضافة تسجيل الدخول بسهولة إلى تطبيق iOS باستخدام FirebaseUI

‫FirebaseUI هي مكتبة تستند إلى حزمة تطوير البرامج (SDK) لمصادقة Firebase وتوفّر مسارات واجهة مستخدم جاهزة للاستخدام في تطبيقك. وتوفّر FirebaseUI المزايا التالية:

  • موفّرون متعدّدون: مسارات تسجيل الدخول باستخدام البريد الإلكتروني/كلمة المرور ورابط البريد الإلكتروني والمصادقة عبر الهاتف وتسجيل الدخول باستخدام حساب Google وتسجيل الدخول باستخدام حساب Facebook وتسجيل الدخول باستخدام حساب Twitter
  • إدارة الحساب: مسارات للتعامل مع مهام إدارة الحساب، مثل إنشاء الحساب وإعادة ضبط كلمة المرور
  • ربط الحساب المجهول: مسارات لربط الحسابات المجهولة تلقائيًا بموفّري الهوية.
  • التخصيص: يمكنك تخصيص مظهر FirebaseUI ليطابق تطبيقك. وبما أنّ FirebaseUI مفتوحة المصدر، يمكنك إنشاء نسخة من المشروع وتخصيصه بما يتناسب مع احتياجاتك.

قبل البدء

  1. كيفية إضافة Firebase إلى مشروع Apple.

  2. كيفية إضافة 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'

  3. إذا لم يسبق لك ربط تطبيقك بمشروعك على Firebase، يمكنك إجراء ذلك من وحدة تحكّم FirebaseFirebase.

إعداد طرق تسجيل الدخول

قبل أن تتمكّن من استخدام Firebase لتسجيل دخول المستخدمين، عليك تفعيل طرق تسجيل الدخول التي تريد إتاحتها وإعدادها.

عنوان البريد الإلكتروني وكلمة المرور

  1. في وحدة تحكّم Firebase، انتقِل إلى الأمان > المصادقة.

  2. في علامة التبويب طريقة تسجيل الدخول ، فعِّل موفّر تسجيل الدخول البريد الإلكتروني/كلمة المرور.

  1. في وحدة تحكّم Firebase، انتقِل إلى الأمان > المصادقة.

  2. في علامة التبويب طريقة تسجيل الدخول ، فعِّل موفّر تسجيل الدخول البريد الإلكتروني/كلمة المرور. يُرجى العِلم أنّه يجب تفعيل تسجيل الدخول باستخدام البريد الإلكتروني أو كلمة المرور لاستخدام تسجيل الدخول باستخدام رابط البريد الإلكتروني.

  3. في القسم نفسه، فعِّل موفّر تسجيل الدخول رابط البريد الإلكتروني (تسجيل الدخول بدون كلمة مرور) ، وانقر على حفظ.

  4. يمكنك تفعيل تسجيل الدخول باستخدام رابط البريد الإلكتروني من خلال تهيئة مثيل FUIEmailAuth باستخدام FIREmailLinkAuthSignInMethod. عليك أيضًا تقديم عنصر FIRActionCodeSettings صالح مع ضبط handleCodeInApp على "صحيح".

    Swift

    var actionCodeSettings = ActionCodeSettings()
actionCodeSettings.url = URL(string: "https://example.firebasestorage.app")
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.firebasestorage.app"];
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];

  5. بالإضافة إلى ذلك، عليك إدراج عنوان URL الذي تمرّره إلى أداة التهيئة في القائمة البيضاء:

    1. في وحدة تحكّم Firebase، انتقِل إلى علامة التبويب الأمان > المصادقة > الإعدادات.

    2. في قسم النطاقات المفوَّضة ، انقر على إضافة نطاق، وأضِف عنوان URL.

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

    Swift

    FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)

    Objective-C

    [[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];

  7. يتوافق تسجيل الدخول باستخدام رابط البريد الإلكتروني في FirebaseUI-iOS مع FirebaseUI-Android و FirebaseUI-web ، حيث يمكن لمستخدم بدأ مسار تسجيل الدخول من FirebaseUI-Android فتح الرابط وإكمال تسجيل الدخول باستخدام FirebaseUI-web. وينطبق الأمر نفسه على المسار المعاكس.

Apple

  1. اتّبِع قسمَي قبل البدء والامتثال لمتطلبات بيانات Apple المجهولة requirements في دليل Firebase تسجيل الدخول باستخدام حساب على Apple.

  2. أضِف إمكانية "تسجيل الدخول باستخدام حساب على Apple" إلى ملف الاستحقاقات.

  3. هيِّئ مثيلاً لموفّر OAuth تم إعداده لتسجيل الدخول باستخدام حساب على Apple:

    Swift

    provider = FUIOAuth.appleAuthProvider()

    Objective-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];

Google

  1. يمكنك إعداد ميزة "تسجيل الدخول باستخدام حساب Google" باستخدام هذا البرنامج التعليمي

Facebook

  1. يمكنك إعداد حزمة تطوير البرامج (SDK) لتسجيل الدخول باستخدام حساب Facebook باتّباع صفحة البدء في Facebook.

  2. في وحدة تحكّم Firebase، انتقِل إلى الأمان > المصادقة.

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

  4. فعِّل ميزة مشاركة سلسلة المفاتيح في مشروع Xcode من شاشة إعدادات المشروع > الإمكانات.

  5. أضِف fbFACEBOOK_APP_ID كمخطّط URL في مشروع Xcode.

  6. أضِف رقم تعريف تطبيق Facebook واسم العرض إلى ملف Info.plist:

    المفتاح القيمة
    FacebookAppID FACEBOOK_APP_ID (على سبيل المثال، 1234567890)
    FacebookDisplayName اسم تطبيقك

  7. هيِّئ مثيلاً لموفّر Facebook:

    Swift

    provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())

    Objective-C

    FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];

  8. إذا أردت استخدام ميزة "تسجيل الدخول المحدود" في Facebook، اضبط السمة useLimitedLogin على مثيل FUIFacebookAuth

    Swift

    provider.useLimitedLogin = true

    Objective-C

    provider.useLimitedLogin = YES;

Twitter

  1. في وحدة تحكّم Firebase، انتقِل إلى الأمان > المصادقة.

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

  3. هيِّئ مثيلاً لموفّر OAuth تم إعداده لتسجيل الدخول باستخدام حساب Twitter:

    Swift

    provider = FUIOAuth.twitterAuthProvider()

    Objective-C

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];

رقم الهاتف

  1. في وحدة تحكّم Firebase، انتقِل إلى الأمان > المصادقة.

  2. في علامة التبويب طريقة تسجيل الدخول ، فعِّل موفّر تسجيل الدخول الهاتف.

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

    لتفعيل إشعارات APNs لاستخدامها مع Firebase Authentication، اتّبِع الخطوات التالية:

    1. في Xcode، فعِّل الإشعارات الفورية لمشروعك.

    2. حمِّل مفتاح مصادقة APNs إلى Firebase. إذا لم يكن لديك مفتاح مصادقة APNs، احرص على إنشاء مفتاح في Apple Developer Member Center.

      1. في Firebase وحدة التحكّم، انتقِل إلى الإعدادات > عام. بعد ذلك، انقر على علامة التبويب خدمة المراسلة عبر السحابة الإلكترونية.
      2. في مفتاح مصادقة APNs ضِمن إعداد تطبيق iOS، انقر على تحميل لتحميل مفتاح مصادقة التطوير أو مفتاح مصادقة الإنتاج أو كليهما. يجب تحميل مفتاح واحد على الأقل.
      3. انتقِل إلى الموقع الذي حفظت فيه المفتاح، واختَره، وانقر على فتح. أضِف رقم تعريف المفتاح (المتاح في Apple Developer Member Center) وانقر على تحميل.

      إذا كانت لديك شهادة APNs، يمكنك تحميل الشهادة بدلاً من ذلك.

  4. عندما يتعذّر تلقّي إشعارات APNs على أحد الأجهزة، تستخدم Firebase اختبار التحقّق reCAPTCHA للتحقّق من الطلبات.

    لتفعيل اختبار التحقّق reCAPTCHA، اتّبِع الخطوات التالية في Xcode:

    1. افتح إعدادات مشروعك: انقر مرّتين على اسم المشروع في الـ طريقة العرض الشجرية على يمين الشاشة. اختَر تطبيقك من قسم الأهداف ، ثم انقر على علامة التبويب معلومات ، ووسِّع قسم أنواع عناوين URL.
    2. انقر على الزر + ، وأضِف رقم تعريف تطبيقك المرمَّز كمخطّط URL. اترك الحقول الأخرى فارغة.

      يمكنك العثور على رقم تعريف تطبيقك المرمَّز في Firebase: انتقِل إلى الإعدادات > علامة التبويب عام، ثم انتقِل للأسفل إلى قسم تطبيقاتك للاطّلاع على تفاصيل تطبيق iOS.

      عند اكتمال الإعداد، يجب أن يبدو مشابهًا لما يلي (ولكن مع القيم الخاصة بتطبيقك):

      لقطة شاشة لواجهة إعداد مخطّط URL مخصّص في Xcode

  5. اختياري: تستخدم Firebase تغيير وظيفة الإجراء للحصول تلقائيًا على رمز APNs المميز الخاص بتطبيقك، وللتعامل مع الإشعارات الفورية الصامتة التي ترسلها Firebase إلى تطبيقك، وللاعتراض تلقائيًا على عملية إعادة التوجيه إلى المخطط المخصّص من صفحة اختبار التحقّق reCAPTCHA أثناء عملية التحقّق.

    إذا كنت تفضّل عدم استخدام swizzling، يُرجى الاطّلاع على الملحق: استخدام تسجيل الدخول باستخدام رقم الهاتف بدون swizzling في مستندات مصادقة Firebase SDK.

تسجيل الدخول

لبدء مسار تسجيل الدخول في 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.