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

FirebaseUI عبارة عن مكتبة مبنية على حزمة Firebase Authentication SDK التي توفر تدفقات واجهة المستخدم المنسدلة لاستخدامها في تطبيقك. يوفر 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 على true.

سويفت

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)

ج موضوعية

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

سويفت

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

ج موضوعية

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

تفاحة

  1. اتبع القسم قبل البدء والامتثال لمتطلبات البيانات مجهولة المصدر من Apple في دليل Firebase تسجيل الدخول باستخدام Apple .

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

  3. تهيئة مثيل موفر OAuth الذي تم تكوينه لتسجيل الدخول باستخدام Apple:

    سويفت

    provider = FUIOAuth.appleAuthProvider()
    

    ج موضوعية

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];
    

جوجل

  1. قم بإعداد تسجيل الدخول إلى Google باستخدام هذا البرنامج التعليمي

فيسبوك

  1. قم بإعداد Facebook Login SDK باتباع صفحة البدء في Facebook .

  2. في وحدة تحكم Firebase ، افتح قسم المصادقة وقم بتمكين Facebook. لتمكين تسجيل الدخول عبر Facebook، يجب عليك تقديم معرف تطبيق Facebook وسر التطبيق، اللذين يمكنك الحصول عليهما من وحدة تحكم Facebook Developers.

  3. قم بتمكين مشاركة سلسلة المفاتيح في مشروع Xcode الخاص بك من إعدادات المشروع > شاشة القدرات .

  4. أضف fb FACEBOOK_APP_ID كمخطط URL في مشروع Xcode الخاص بك.

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

    مفتاح قيمة
    معرف تطبيق فيسبوك FACEBOOK_APP_ID (على سبيل المثال، 1234567890 )
    FacebookDisplayName اسم التطبيق الخاص بك
  6. تهيئة مثيل موفر Facebook:

    سويفت

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

    ج موضوعية

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

  7. إذا كنت تريد استخدام Facebook Limited Login ، فقم بتعيين خاصية useLimitedLogin على مثيل FUIFacebookAuth .

    سويفت

    provider.useLimitedLogin = true
    

    ج موضوعية

    provider.useLimitedLogin = YES;
    

تويتر

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

  2. تهيئة مثيل موفر OAuth الذي تم تكوينه لتسجيل الدخول إلى Twitter:

    سويفت

    provider = FUIOAuth.twitterAuthProvider()
    

    ج موضوعية

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
    

رقم التليفون

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

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

    لتمكين إشعارات APNs للاستخدام مع مصادقة Firebase:

    1. في Xcode، قم بتمكين الإشعارات المباشرة لمشروعك.

    2. قم بتحميل مفتاح مصادقة APNs الخاص بك إلى Firebase. إذا لم يكن لديك بالفعل مفتاح مصادقة APNs، فتأكد من إنشاء واحد في مركز أعضاء مطوري Apple .

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

      2. في مفتاح مصادقة APNs ضمن تكوين تطبيق iOS ، انقر فوق الزر تحميل .

      3. استعرض وصولاً إلى الموقع الذي حفظت فيه مفتاحك، وحدده، ثم انقر فوق فتح . أضف معرف المفتاح للمفتاح (المتوفر في مركز أعضاء مطوري Apple ) وانقر فوق تحميل .

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

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

    لتمكين التحقق من reCAPTCHA، قم بما يلي في Xcode:

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

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

      لقطة شاشة لواجهة إعداد مخطط URL المخصص لـ Xcode
  4. اختياري : يستخدم Firebase طريقة swizzling للحصول تلقائيًا على رمز APN الخاص بتطبيقك، وللتعامل مع إشعارات الدفع الصامتة التي يرسلها 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 Auth في الطريقة 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 .