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

‫FirebaseUI היא ספרייה שמבוססת על SDK של אימות ב-Firebase ומספקת תהליכי ממשק משתמש מוכנים לשימוש באפליקציה. היתרונות של FirebaseUI:

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

לפני שמתחילים

הערה: Firebase תומך ב-CocoaPods וב-Swift Package Manager. אם בחרתם להתקין את Firebase באמצעות Swift Package Manager, אתם יכולים לדלג על השלבים שקשורים ל-CocoaPods, כמו שינוי של קובצי Podfile והרצת הפקודה pod.

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, פותחים את הקטע אימות. בכרטיסייה Sign in method, מפעילים את הספק Email/Password. הערה כדי להשתמש בכניסה באמצעות קישור באימייל, צריך להפעיל כניסה באמצעות אימייל או סיסמה.

2. באותו קטע, מפעילים את שיטת הכניסה Email link (passwordless sign-in) (קישור באימייל – כניסה ללא סיסמה) ולוחצים על Save (שמירה).

3. כדי להפעיל כניסה באמצעות קישור באימייל, מאתחלים מופע של FUIEmailAuth עם FIREmailLinkAuthSignInMethod. תצטרכו גם לספק אובייקט FIRActionCodeSettings תקין עם הערך true במאפיין handleCodeInApp.

   Swift

   var actionCodeSettings = ActionCodeSettings()
   actionCodeSettings.url = URL(string: "https://example.firebasestorage.app")
   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.firebasestorage.app"];
   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];
   

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

5. אחרי שתזהו את קישור העומק, תצטרכו להעביר אותו לממשק המשתמש של האימות כדי שיוכל לטפל בו.

   Swift

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

   Objective-C

   [[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
   

6. הכניסה באמצעות קישור באימייל ב-FirebaseUI-iOS תואמת ל-FirebaseUI-Android ול-FirebaseUI-web. כלומר, משתמש שמתחיל את התהליך מ-FirebaseUI-Android יכול לפתוח את הקישור ולהשלים את הכניסה באמצעות FirebaseUI-web. הדבר נכון גם לגבי התהליך ההפוך.

Apple

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

2. מוסיפים את היכולת 'כניסה באמצעות Apple' לקובץ ההרשאות.

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

   Swift

   provider = FUIOAuth.appleAuthProvider()

   Objective-C

   FUIOAuth *provider = [FUIOAuth appleAuthProvider];

Google

1. מגדירים את הכניסה באמצעות חשבון Google בעזרת המדריך הזה.

Facebook

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

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

3. מפעילים את שיתוף מחזיק המפתחות בפרויקט Xcode במסך Project Settings > Capabilities (הגדרות הפרויקט > יכולות).

4. מוסיפים את fbFACEBOOK_APP_ID כסכמת כתובת URL בפרויקט Xcode.

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

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

6. מפעילים מופע של ספק Facebook:

   Swift

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

   Objective-C

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

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

   Swift

   provider.useLimitedLogin = true

   Objective-C

   provider.useLimitedLogin = YES;

Twitter

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

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

   Swift

   provider = FUIOAuth.twitterAuthProvider()

   Objective-C

   FUIOAuth *provider = [FUIOAuth twitterAuthProvider];

מספר טלפון

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

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

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

   1. ב-Xcode, מפעילים התראות פוש לפרויקט.

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

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

      2. בקטע APNs authentication key (מפתח אימות של APNs) בקטע iOS app configuration (הגדרת אפליקציה ל-iOS), לוחצים על הלחצן Upload (העלאה) כדי להעלות את מפתח האימות של סביבת הפיתוח, את מפתח האימות של סביבת הייצור או את שניהם. צריך להוסיף לפחות תמונה אחת.

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

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

3. כשאי אפשר לקבל התראות של APNs במכשיר, Firebase משתמש ב-reCAPTCHA כדי לאמת בקשות.

   כדי להפעיל אימות מסוג reCAPTCHA, מבצעים את הפעולות הבאות ב-Xcode:

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

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

      

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

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

כניסה

כדי להתחיל את תהליך הכניסה של FirebaseUI, קודם צריך להפעיל את FirebaseUI:

Swift

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 כך שישתמש בשיטות הכניסה שרוצים לתמוך בהן:

Swift

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 או פייסבוק, צריך להטמיע handler לתוצאה של תהליכי ההרשמה באמצעות Google ופייסבוק:

Swift

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

Swift

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

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::

Swift

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

Swift

authUI.signOut()

Objective-C

[authUI signOut];

התאמה אישית

אפשר להתאים אישית את מסכי הכניסה על ידי יצירת מחלקת משנה של בקרי התצוגה של FirebaseUI וציון שלהם בשיטות ההקצאה של FUIAuth:

Swift

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

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

Swift

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

Objective-C

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

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

Swift

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

Objective-C

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

השלבים הבאים

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