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

  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 API. مفتاح وسر العميل، اللذين يمكنك الحصول عليهما في تطبيق Twitter وحدة تحكُّم الإدارة.

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

    Swift

    provider = FUIOAuth.twitterAuthProvider()

    Objective-C

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];

رقم الهاتف

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

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

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

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

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

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

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

      3. تصفح المكان الذي حفظت فيه مفتاحك، وحدده، ثم انقر انقر على فتح. أضِف معرّف المفتاح للمفتاح (المتوفّر في Apple Developer Member Center) وانقر على تحميل:

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

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

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

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

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

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

  4. اختياري: يستخدم Firebase طريقة التبديل للحصول على الرمز المميز لأسماء نقاط الوصول (APN) للتطبيق، لمعالجة الإشعارات الفورية الصامتة التي يستخدمها 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.

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

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