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

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

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

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

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

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

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

  3. يمكنك تفعيل ميزة تسجيل الدخول باستخدام رابط البريد الإلكتروني من خلال إعداد مثيل 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];
  1. بالإضافة إلى ذلك، عليك إضافة عنوان URL الذي تنقله إلى أداة بدء المحادثة إلى القائمة البيضاء. يمكنك إجراء ذلك من خلال وحدة تحكُّم Firebase، وفتح قسم المصادقة. في علامة التبويب طريقة تسجيل الدخول، أضِف عنوان URL ضمن النطاقات المسموح بها.

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

Swift

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

Objective-C

[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
  1. تتوافق ميزة تسجيل الدخول باستخدام رابط البريد الإلكتروني في FirebaseUI-iOS مع FirebaseUI-Android وFirebaseUI-web حيث يمكن للمستخدم الذي يبدأ المسار من FirebaseUI-Android فتح الرابط وإكمال عملية تسجيل الدخول باستخدام FirebaseUI-web. وينطبق الشيء نفسه على التدفق العكسي.

Apple

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

  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 من شاشة Project Settings (إعدادات المشروع) > Capabilities (الإمكانات).

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

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

    مفتاح الخريطة القيمة
    رقم تعريف تطبيق Facebook FACEBOOK_APP_ID (على سبيل المثال، 1234567890)
    اسم العرض على Facebook اسم تطبيقك
  6. إعداد مثيل موفِّر Facebook:

    Swift

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

    Objective-C

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

  7. إذا أردت استخدام Facebook Limited Login، اضبط السمة useLimitedLogin على مثيل FUIFacebookAuth.

    Swift

    provider.useLimitedLogin = true
    

    Objective-C

    provider.useLimitedLogin = YES;
    

Twitter

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

  2. إعداد مثيل موفّر OAuth تم ضبطه لتسجيل الدخول إلى Twitter:

    Swift

    provider = FUIOAuth.twitterAuthProvider()
    

    Objective-C

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
    

رقم الهاتف

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

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

    لتفعيل إشعارات أسماء نقاط الوصول (APN) للاستخدام مع مصادقة Firebase:

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

    2. حمِّل مفتاح مصادقة أسماء نقاط الوصول إلى Firebase. إذا لم يكن لديك مفتاح مصادقة لأسماء نقاط الوصول (APN)، احرص على إنشاء مفتاح في مركز أعضاء المطوّرين في Apple.

      1. من داخل مشروعك في وحدة تحكُّم Firebase، اختَر رمز الترس، ثمّ اختَر إعدادات المشروع (Project Settings)، ثم اختَر علامة التبويب المراسلة عبر السحابة الإلكترونية.

      2. في مفتاح مصادقة أسماء نقاط الوصول (APN) ضمن ضبط تطبيق iOS، انقر على الزر تحميل.

      3. انتقِل إلى الموقع الجغرافي الذي حفظت فيه المفتاح واختَره وانقر على فتح. أضِف معرّف المفتاح (المتوفّر في Apple Developer Member Center) وانقر على Upload (تحميل).

      إذا كانت لديك شهادة أسماء نقاط الوصول (APN) من قبل، يمكنك تحميل الشهادة بدلاً من ذلك.

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

    لتفعيل reCAPTCHA، يُرجى اتّباع الخطوات التالية في Xcode:

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

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

      لقطة شاشة لواجهة إعداد مخطط عنوان URL المخصّص في Xcode
  4. اختياري: يستخدم 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.