أضف تسجيل الدخول بسهولة إلى تطبيق 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 على "صحيح".

سويفت

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

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

سويفت

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

ج موضوعية

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

تفاحة

  1. اتبع قبل أن تبدأ والامتثال لأقسام متطلبات البيانات المجهولة من Apple في دليل Firebase Sign in with Apple .

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

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

    سويفت

    provider = FUIOAuth.appleAuthProvider()
    

    ج موضوعية

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];
    

جوجل

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

  2. قم بتنزيل نسخة جديدة من ملف GoogleService-Info.plist الخاص بمشروعك وانسخها إلى مشروع Xcode الخاص بك. استبدل أي إصدارات موجودة بالإصدار الجديد. (راجع إضافة Firebase إلى مشروع iOS الخاص بك .)

  3. أضف معرف العميل المعكوس الخاص بك كمخطط URL في مشروع Xcode الخاص بك. يمكنك العثور على هذه القيمة في ملف GoogleService-Info.plist .

    فيسبوك

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

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

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

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

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

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

    سويفت

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

    ج موضوعية

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

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

    سويفت

    provider.useLimitedLogin = true
    

    ج موضوعية

    provider.useLimitedLogin = YES;
    

تويتر

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

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

    سويفت

    provider = FUIOAuth.twitterAuthProvider()
    

    ج موضوعية

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
    

رقم التليفون

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    إذا كنت تفضل عدم استخدام 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: method:

سويفت

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 .