إضافة تسجيل الدخول بسهولة إلى تطبيق 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 لتسجيل دخول المستخدمين، عليك تفعيل طرق تسجيل الدخول التي تريد إتاحتها وإعدادها.

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

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

المصادقة باستخدام رابط البريد الإلكتروني

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

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

3. يمكنك تفعيل تسجيل الدخول باستخدام رابط البريد الإلكتروني من خلال تهيئة مثيل 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];
   

4. بالإضافة إلى ذلك، عليك إدراج عنوان URL الذي تمرّره إلى أداة التهيئة في القائمة المسموح بها. يمكنك إجراء ذلك في وحدة تحكّم FirebaseFirebase، افتح قسم المصادقة. في علامة التبويب طريقة تسجيل الدخول ، أضِف عنوان URL ضمن النطاقات المسموح بها.

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

   Swift

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

   Objective-C

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

6. يتوافق تسجيل الدخول باستخدام رابط البريد الإلكتروني في 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، افتح قسم المصادقة وفعِّل Facebook. لتفعيل تسجيل الدخول باستخدام حساب Facebook، عليك تقديم رقم تعريف تطبيق Facebook وكلمة سر التطبيق، ويمكنك الحصول عليهما في وحدة تحكّم مطوّري Facebook.

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

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

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

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

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

   Swift

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

   Objective-C

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

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

   Swift

   provider.useLimitedLogin = true

   Objective-C

   provider.useLimitedLogin = YES;

Twitter

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

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

   Swift

   provider = FUIOAuth.twitterAuthProvider()

   Objective-C

   FUIOAuth *provider = [FUIOAuth twitterAuthProvider];

رقم الهاتف

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

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

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

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

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

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

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

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

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

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

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

      

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

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

تسجيل الدخول

لبدء مسار تسجيل الدخول في FirebaseUI، عليك أولاً تهيئة FirebaseUI:

import FirebaseAuthUI

/* ... */

FirebaseApp.configure()
let authUI = FUIAuth.defaultAuthUI()
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self

@import FirebaseAuthUI;

...

[FIRApp configure];
FUIAuth *authUI = [FUIAuth defaultAuthUI];
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self;

بعد ذلك، اضبط FirebaseUI لاستخدام طرق تسجيل الدخول التي تريد إتاحتها:

import FirebaseAuthUI
import FirebaseFacebookAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
import FirebasePhoneAuthUI

let providers: [FUIAuthProvider] = [
  FUIGoogleAuth(),
  FUIFacebookAuth(),
  FUITwitterAuth(),
  FUIPhoneAuth(authUI:FUIAuth.defaultAuthUI()),
]
self.authUI.providers = providers

@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:

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
}

- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary *)options {
  NSString *sourceApplication = options[UIApplicationOpenURLOptionsSourceApplicationKey];
  return [[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
}

أخيرًا، احصل على مثيل AuthViewController من FUIAuth. يمكنك بعد ذلك عرضه كأول وحدة تحكّم في العرض في تطبيقك أو عرضه من وحدة تحكّم أخرى في العرض في تطبيقك.

let authViewController = authUI.authViewController()

let phoneProvider = FUIAuth.defaultAuthUI().providers.first as! FUIPhoneAuth
phoneProvider.signIn(withPresenting: currentlyVisibleController, phoneNumber: nil)

UINavigationController *authViewController = [authUI authViewController];

FUIPhoneAuth *phoneProvider = [FUIAuth defaultAuthUI].providers.firstObject;
[phoneProvider signInWithPresentingViewController:currentlyVisibleController phoneNumber:nil];

بعد عرض شاشة المصادقة وتسجيل دخول المستخدم، يتم عرض النتيجة على مفوّض مصادقة FirebaseUI في الطريقة didSignInWithUser:error::

func authUI(_ authUI: FUIAuth, didSignInWith user: FIRUser?, error: Error?) {
  // handle user and error as necessary
}

   - (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" ومن جميع موفّري الهوية على وسائل التواصل الاجتماعي:

authUI.signOut()

[authUI signOut];

التخصيص

يمكنك تخصيص شاشات تسجيل الدخول من خلال إنشاء فئات فرعية لوحدات تحكّم العرض في FirebaseUI وتحديدها في طرق المفوّض في FUIAuth:

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)
}

- (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 لبنود خدمة تطبيقك، والذي يتم ربطه على شاشة إنشاء الحساب:

let kFirebaseTermsOfService = URL(string: "https://example.com/terms")!
authUI.tosurl = kFirebaseTermsOfService

authUI.TOSURL = [NSURL URLWithString:@"https://example.com/terms"];

أخيرًا، يمكنك تخصيص الرسائل والمطالبات التي تظهر للمستخدمين من خلال تحديد حزمة مخصّصة:

authUI.customStringsBundle = NSBundle.mainBundle() // Or any custom bundle.

authUI.customStringsBundle = [NSBundle mainBundle]; // Or any custom bundle.

الخطوات التالية

• لمزيد من المعلومات عن استخدام FirebaseUI وتخصيصها، يُرجى الاطّلاع على ملف README على GitHub.
• إذا عثرت على مشكلة في FirebaseUI وأردت الإبلاغ عنها، استخدِم أداة تتبُّع المشاكل على GitHub.