הוסף כניסה בקלות לאפליקציית iOS שלך באמצעות FirebaseUI

FirebaseUI היא ספריה בנויה על גבי ה- SDK אימות Firebase המספק הנפתח ב UI זורם לשימוש באפליקציה. FirebaseUI מספק את היתרונות הבאים:

  • ספקי מרובים: כניסת תזרים עבור הדוא"ל / סיסמה, קישור בדוא"ל, אימות לטלפון, כניסה ל- Google, Facebook כניסה, וטוויטר כניסה.
  • ניהול חשבון: זורם להתמודד עם משימות ניהול חשבון, כגון יצירת חשבון ואיפוס סיסמה.
  • חשבון אנונימי מקשרים: זורם אוטומטית לקשר חשבונות אנונימיים לספקי זהות.
  • להתאמה אישית: להתאים אישית את המראה של FirebaseUI להתאים את האפליקציה שלך. כמו כן, מכיוון ש- FirebaseUI הוא קוד פתוח, אתה יכול לסייג את הפרויקט ולהתאים אותו בדיוק לצרכים שלך.

לפני שאתה מתחיל

  1. להוסיף Firebase לפרויקט iOS שלך .

  2. הוסף את FirebaseUI ל- Podfile שלך:

    pod 'FirebaseUI'
    

    אם אתה מעדיף, תוכל להוסיף רק את רכיב ה- Auth ואת הספקים שבהם ברצונך להשתמש:

    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)

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. בנוסף, עליך לרשום את כתובת האתר שאתה מעביר לאינתיאליזר. אתה יכול לעשות זאת קונסולת Firebase , פתח את קטע האימות. 'כניסה דרך הכרטיסייה שיטה, להוסיף את כתובת האתר תחת הדומיינים שמורשים.

  2. לאחר שתתפוס את הקישור העמוק, יהיה עליך להעביר אותו לממשק המשתמש של ה- authentication כך שניתן יהיה לטפל בו.

מָהִיר

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

Objective-C

[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
  1. כניסת קישור דוא"ל ב FirebaseUI-iOS תואמת FirebaseUI-אנדרואיד ו FirebaseUI-אינטרנט שבו משתמש אחד מתחיל את הזרימה מן FirebaseUI-אנדרואיד יכול לפתוח את הקישור ומלא כניסה עם FirebaseUI-אינטרנט. אותו דבר לגבי הזרימה ההפוכה.

תפוח עץ

  1. עקוב לפני שתתחיל ולציית אפל לאנונימיים סעיפים דרישות הנתונים Firebase כניסה עם אפל מדריך.

  2. הוסף את היכולת להיכנס עם Apple לקובץ הזכויות שלך.

  3. אתחל מופע של ספק OAuth שהוגדר עבור כניסה עם Apple:

    מָהִיר

    provider = FUIOAuth.appleAuthProvider()
    

    Objective-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];
    

גוגל

  1. בשנות ה קונסולת Firebase , פתח את קטע האימות ולאפשר כניסה של Google.

  2. הוסף את מזהה הלקוח ההפוך שלך כערכת כתובות אתרים בפרויקט Xcode שלך. אתה יכול למצוא ערך זה GoogleService-Info.plist קובץ.

פייסבוק

  1. הגדרת SDK כניסה לפייסבוק על ידי ביצוע הדף התחיל של פייסבוק .

  2. בשנות ה קונסולת Firebase , פתח את קטע האימות ולאפשר פייסבוק. כדי לאפשר כניסה לפייסבוק, עליך לספק את מזהה אפליקציית פייסבוק ואת סוד האפליקציה שלך, אותו תוכל לקבל במסוף מפתחי פייסבוק.

  3. מתן אפשרות לשיתוף במחזיק מפתחות בפרויקט Xcode שלך מן גדרות פרויקט> מסך יכולות.

  4. להוסיף fb FACEBOOK_APP_ID כמו ערכת URL בפרויקט Xcode שלך.

  5. הוספת שם מזהה ולהציג App פייסבוק שלך Info.plist הקובץ:

    מַפְתֵחַ ערך
    FacebookAppID FACEBOOK_APP_ID (למשל, 1234567890 )
    FacebookDisplayName שם האפליקציה שלך

טוויטר

  1. בשנות ה קונסולת Firebase , פתח את הקטע אימות ולאפשר טוויטר. כדי לאפשר כניסה לטוויטר, עליך לספק את מפתח הצרכנים והסוד של טוויטר API, אותו תוכל לקבל במסוף ניהול היישומים של טוויטר.

  2. אתחל מופע של ספק OAuth שהוגדר לכניסה לטוויטר:

    מָהִיר

    provider = FUIOAuth.twitterAuthProvider()
    

    Objective-C

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
    

מספר טלפון

  1. בשנות ה קונסולת Firebase , פתח את הקטע אימות ולאפשר נכנס באמצעות מספר הטלפון.

  2. Firebase חייב להיות מסוגל לאמת שבקשות כניסה למספר טלפון מגיעות מהאפליקציה שלך. אחת הדרכים להשיג זאת היא באמצעות הודעות APN. ראה הפעל את אפליקצית אימות לפרטים.

    כדי לאפשר התראות APN לשימוש עם אימות Firebase:

    1. בשנת Xcode, אפשר לדחוף הודעות עבור הפרויקט שלך.

    2. העלה את מפתח האימות של APN שלך ל- Firebase. אם עדיין אין לך מפתח אימות APNs, הקפד ליצור אחד המפתחים של אפל חבר המרכז .

      1. בתוך הפרויקט שלך במסוף Firebase, בחר את סמל גלגל השיניים, בחר הגדרות פרויקט, ולאחר מכן בחר את כרטיסיית הודעות בענן.

      2. במפתח אימות APNs תחת תצורת אפליקציה ל- iOS, לחץ על כפתור Upload.

      3. דפדף אל המיקום שבו שמרת המפתח שלך, בחר בו ולאחר מכן לחץ על פתח. מוסיפים את מזהה מפתח עבור המפתח (זמין למפתחים אפל מרכז חבר ) ולחץ על העלאה.

      אם כבר יש לך אישור APNs, תוכל להעלות את האישור במקום זאת.

  3. כאשר לא ניתן לקבל התראות APN במכשיר, Firebase משתמש ב- reCAPTCHA כדי לאמת בקשות.

    כדי לאפשר אימות reCAPTCHA, אם עדיין לא הוספת את מזהה הלקוח ההפוך שלך כתוכנית כתובת אתר (לדוגמה, כדי לאפשר כניסה ל- Google), בצע זאת בפרויקט Xcode שלך. אתה יכול למצוא ערך זה GoogleService-Info.plist קובץ.

  4. אופציונלי: Firebase משתמשת בשיטה swizzling כדי לקבל באופן אוטומטי APNs באפליקציה מידה, כדי להתמודד עם הודעות לדחוף שותק כי Firebase שולחת האפליקציה שלך, וכדי אוטומטי ליירט את הפניה ערכת אישית מהדף אימות reCAPTCHA במהלך אימות.

    אם אתם מעדיפים שלא להשתמש swizzling, לראות נספח: שימוש בטלפון הכניסה ללא swizzling ב docs אימות Firebase SDK.

להתחבר

כדי להפעיל את זרימת הכניסה של FirebaseUI, אתחל תחילה את FirebaseUI:

מָהִיר

import FirebaseUI

/* ... */

FirebaseApp.configure()
let authUI = FUIAuth.defaultAuthUI()
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self

Objective-C

@import FirebaseUI;

...

[FIRApp configure];
FUIAuth *authUI = [FUIAuth defaultAuthUI];
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self;

לאחר מכן, הגדר את FirebaseUI לשימוש בשיטות הכניסה שאתה רוצה לתמוך בהן:

מָהִיר

import FirebaseUI

let providers: [FUIAuthProvider] = [
  FUIGoogleAuth(),
  FUIFacebookAuth(),
  FUITwitterAuth(),
  FUIPhoneAuth(authUI:FUIAuth.defaultAuthUI()),
]
self.authUI.providers = providers

Objective-C

@import FirebaseUI;

...

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
}

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 . לאחר מכן תוכל להציג אותו כבקר הצפייה הראשון של האפליקציה שלך או להציג אותו מבקר תצוגה אחר באפליקציה שלך.

מָהִיר

כדי לקבל את בורר שיטות הכניסה:

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: שיטה:

מָהִיר

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 וכן לכל ספקי הזהות החברתית:

מָהִיר

authUI.signOut()

Objective-C

[authUI signOut];

התאמה אישית

אתה יכול להתאים אישית את מסכי הכניסה ידי subclassing בקרי הנוף של FirebaseUI וציון אותם FUIAuth שיטות נציג s":

מָהִיר

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];
}

תוכל להתאים את כתובת האתר לתנאי השימוש של האפליקציה שלך, המקושרת במסך יצירת החשבון:

מָהִיר

let kFirebaseTermsOfService = URL(string: "https://example.com/terms")!
authUI.tosurl = kFirebaseTermsOfService

Objective-C

authUI.TOSURL = [NSURL URLWithString:@"https://example.com/terms"];

לבסוף, תוכל להתאים אישית את ההודעות וההנחיות המוצגות למשתמשים שלך על ידי ציון חבילה מותאמת אישית:

מָהִיר

authUI.customStringsBundle = NSBundle.mainBundle() // Or any custom bundle.

Objective-C

authUI.customStringsBundle = [NSBundle mainBundle]; // Or any custom bundle.

הצעדים הבאים

  • לקבלת מידע נוסף על השימוש והתאמה אישית FirebaseUI, לראות את README קובץ על GitHub.
  • אם אתה מוצא וקשיי FirebaseUI וברצוני לדווח על כך, להשתמש מעקב בעיות GitHub .