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

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

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

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

הערה: ב-Firebase יש תמיכה ב-CocoaPods וגם ב-Swift Package Manager. אם בוחרים להתקין ב-Firebase בעזרת Swift Package Manager, אפשר מדלגים על שלבים שקשורים ל-CocoaPods, כמו שינוי קובצי Podfiles והרצת הפקודה 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, פותחים את הקטע אימות. ב הכרטיסייה שיטת כניסה, מפעילים את ספק האימייל/סיסמה. הערה צריך להפעיל כניסה באמצעות חשבון אימייל או סיסמה כדי להשתמש בכניסה באמצעות קישור לאימייל.

2. באותו קטע, מפעילים את האפשרות קישור לאימייל (כניסה ללא סיסמה). ולוחצים על Save.

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

Swift

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. בנוסף, צריך להוסיף לרשימת ההיתרים את כתובת ה-URL שאתם מעבירים ל-iniatializer. אפשר לעשות זאת במסוף Firebase, פותחים את האימות . בכרטיסייה Sign in method (שיטת הכניסה), מוסיפים את כתובת ה-URL בקטע Authorized domains (דומיינים מורשים).

2. אחרי שמקבלים את קישור העומק, צריך להעביר אותו לממשק המשתמש של האימות כדי שהוא .

Swift

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

Objective-C

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

1. כניסה עם קישור לאימייל ב-FirebaseUI-iOS תואמת FirebaseUI ל-Android וגם FirebaseUI-אינטרנט שבו משתמש אחד שמתחיל את התהליך מ-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 בעזרת המדריך הזה

פייסבוק

1. כדי להגדיר את Facebook Login SDK, צריך לבצע את הפעולות הבאות הדף 'תחילת העבודה' של Facebook.

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

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

4. צריך להוסיף את fbFACEBOOK_APP_ID כסכימה של כתובת URL ב- פרויקט Xcode.

5. מוסיפים את המזהה והשם המוצג של האפליקציה ב-Facebook לקובץ 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 Limited Login, מגדירים את המאפיין useLimitedLogin במכונה FUIFacebookAuth.

   Swift

   provider.useLimitedLogin = true
   

   Objective-C

   provider.useLimitedLogin = YES;
   

Twitter

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

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

   Swift

   provider = FUIOAuth.twitterAuthProvider()
   

   Objective-C

   FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
   

מספר טלפון

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

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

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

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

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

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

      2. במפתח אימות של APNs בקטע הגדרת אפליקציה ל-iOS, לוחצים על העלאה לחצן.

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

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

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

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

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

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

      

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

   אם אתם מעדיפים לא להשתמש בהחלפה, תוכלו לעיין בנספח: שימוש בכניסה באמצעות מספר טלפון ללא החלפה במסמכי האימות של 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 או ל-Facebook, הטמע handler לתוצאה של תהליכי ההרשמה ל-Google ול-Facebook:

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

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 ונתקלתם בבעיה ואתם רוצים לדווח עליה, תוכלו להשתמש מעקב אחר בעיות ב-GitHub.