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

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

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

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

  1. הוסף את Firebase לפרויקט Apple שלך .

  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. באותו קטע, הפעל את שיטת הכניסה של קישור דוא"ל (כניסה ללא סיסמה) ולחץ על שמור .

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

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

מָהִיר

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

Objective-C

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

תפוח עץ

  1. עקוב אחר הסעיפים לפני שתתחיל וציות לדרישות הנתונים האנונימיים של Apple במדריך ה-Firebase Sign in with Apple .

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

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

    מָהִיר

    provider = FUIOAuth.appleAuthProvider()

    Objective-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];

גוגל

  1. הגדר את Google Sign-in באמצעות מדריך זה

פייסבוק

  1. הגדר את ערכת פיתוח התחברות של פייסבוק על ידי מעקב אחר דף ההתחלה של פייסבוק .

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

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

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

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

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

  6. אתחול מופע של ספק פייסבוק:

    מָהִיר

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

    Objective-C

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

  7. אם ברצונך להשתמש בכניסה מוגבלת לפייסבוק , הגדר את המאפיין useLimitedLogin במופע FUIFacebookAuth .

    מָהִיר

    provider.useLimitedLogin = true

    Objective-C

    provider.useLimitedLogin = YES;

טוויטר

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

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

    מָהִיר

    provider = FUIOAuth.twitterAuthProvider()

    Objective-C

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];

מספר טלפון

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

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

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

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

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

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

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

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

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

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

    כדי לאפשר אימות reCAPTCHA, בצע את הפעולות הבאות ב-Xcode:

    1. פתח את תצורת הפרויקט שלך: לחץ פעמיים על שם הפרויקט בתצוגת העץ השמאלית. בחר את האפליקציה שלך מהקטע 'יעדים' ולאחר מכן בחר בכרטיסייה 'מידע ' והרחב את הקטע 'סוגי כתובות אתרים' .
    2. לחץ על הלחצן + , והוסף את מזהה האפליקציה המקודדת שלך כסכימת כתובת URL. אתה יכול למצוא את מזהה האפליקציה המקודדת שלך בדף ההגדרות הכלליות של מסוף Firebase, בקטע של אפליקציית iOS שלך. השאר את השדות האחרים ריקים.

      לאחר השלמתו, התצורה שלך אמורה להיראות משהו דומה להלן (אבל עם הערכים הספציפיים ליישום שלך):

      צילום מסך של ממשק הגדרת סכימת ה-URL המותאמת אישית של Xcode

  4. אופציונלי : Firebase משתמש בשיטת swizzling כדי להשיג אוטומטית את אסימון ה-APN של האפליקציה שלך, לטפל בהתראות הדחיפה השקטות ש-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

Objective-C

@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

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:

מָהִיר

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

מָהִיר

authUI.signOut()

Objective-C

[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)
}

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

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

מָהִיר

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 .