Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

FirebaseUI هي مكتبة بنيت على أعلى Firebase مصادقة SDK الذي يوفر انخفاض في تدفقات UI لاستخدامها في التطبيق الخاص بك. يوفر FirebaseUI المزايا التالية:

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

قبل ان تبدأ

  1. إضافة إلى Firebase المشروع الذي يعمل بنظام iOS .

  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. في نفس القسم، تمكن رابط البريد الإلكتروني (passwordless تسجيل الدخول) تسجيل الدخول الأسلوب وانقر فوق حفظ.

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

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

سويفت

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

ج موضوعية

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

تفاح

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

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

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

    سويفت

    provider = FUIOAuth.appleAuthProvider()
    

    ج موضوعية

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];
    

متصفح الجوجل

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

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

موقع التواصل الاجتماعي الفيسبوك

  1. إعداد الفيسبوك الدخول SDK باتباع الصفحة التي تحصل في الفيسبوك .

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

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

  4. إضافة fb FACEBOOK_APP_ID كمشروع URL في مشروع Xcode.

  5. اضافة اسم التطبيق الفيسبوك ID والعرض إلى Info.plist الملف:

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

    سويفت

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

    ج موضوعية

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

  7. إذا كنت ترغب في استخدام الفيسبوك المحدودة الدخول ، تعيين useLimitedLogin الملكية على FUIFacebookAuth المثال.

    سويفت

    provider.useLimitedLogin = true
    

    ج موضوعية

    provider.useLimitedLogin = YES;
    

تويتر

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

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

    سويفت

    provider = FUIOAuth.twitterAuthProvider()
    

    ج موضوعية

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
    

رقم الهاتف

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

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

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

    1. في كسكودي، تمكين إعلامات للمشروع الخاص بك.

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

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

      2. في ابنس استراتيجية الحد مفتاح المصادقة تحت التكوين تطبيقات نظام التشغيل iOS، انقر فوق الزر تحميل.

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

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

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

    لتمكين التحقق من reCAPTCHA ، إذا لم تكن قد أضفت بالفعل معرف العميل المعكوس كمخطط URL (على سبيل المثال ، لتمكين تسجيل الدخول إلى Google) ، فقم بذلك في مشروع Xcode الخاص بك. يمكنك العثور على هذه القيمة في GoogleService-Info.plist الملف.

  4. اختياري: يستخدم Firebase طريقة swizzling للحصول تلقائيا ابنس استراتيجية الحد من التطبيق الخاص بك المنوال، للتعامل مع دفع الإخطارات الصامتة التي 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];

التخصيص

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