FirebaseUI היא ספרייה שנבנתה על גבי Firebase Authentication SDK ומספקת תהליכי ממשק משתמש להטמעה באפליקציה. FirebaseUI מספק את היתרונות הבאים:
- ספקים מרובים: תהליכי כניסה לכתובת אימייל/סיסמה, קישור לאימייל, לטלפון אימות, כניסה באמצעות חשבון Google, התחברות ל-Facebook והתחברות ל-Twitter.
- ניהול חשבון: תהליכי הטיפול במשימות של ניהול החשבון, כגון יצירת חשבון ואיפוס סיסמה.
- קישור חשבונות אנונימיים: תהליכים לקישור אוטומטי של חשבונות אנונימיים לספקי זהויות.
- ניתן להתאמה אישית: עיצוב המראה של FirebaseUI להתאמה אישית באפליקציה. כמו כן, מכיוון ש-FirebaseUI הוא קוד פתוח, אפשר לפצל את הפרויקט ולהתאים אותו אישית. בדיוק לפי הצרכים שלכם.
לפני שמתחילים
מוסיפים את 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'
אם עדיין לא קישרתם את האפליקציה לפרויקט Firebase, צריך לעשות זאת דרך מסוף Firebase.
הגדרה של שיטות כניסה
כדי להשתמש ב-Firebase כדי לאפשר למשתמשים להיכנס לחשבון, צריך להפעיל ולהגדיר את שיטות הכניסה שרוצים לתמוך בהן.
כתובת אימייל וסיסמה
במסוף Firebase, פותחים את הקטע אימות ומפעילים את האימייל ואימות באמצעות סיסמה.
אימות קישור לאימייל
במסוף Firebase, פותחים את הקטע אימות. בכרטיסייה Sign in method, מפעילים את הספק Email/Password. הערה צריך להפעיל כניסה באמצעות חשבון אימייל או סיסמה כדי להשתמש בכניסה באמצעות קישור לאימייל.
באותו קטע, מפעילים את האפשרות קישור לאימייל (כניסה ללא סיסמה). ולוחצים על Save.
כדי להפעיל כניסה באמצעות קישור לאימייל, צריך לאתחל מכונה של
FUIEmailAuth
באמצעותFIREmailLinkAuthSignInMethod
. צריך גם לספק אובייקטFIRActionCodeSettings
חוקי עםhandleCodeInApp
מוגדר כ-True.
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)
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];
בנוסף, צריך להוסיף לרשימת ההיתרים את כתובת ה-URL שאתם מעבירים ל-iniatializer. אפשר לעשות זאת במסוף Firebase, פותחים את האימות . בכרטיסייה Sign in method (שיטת הכניסה), מוסיפים את כתובת ה-URL בקטע Authorized domains (דומיינים מורשים).
אחרי שמזהים את הקישור לעומק, צריך להעביר אותו לממשק המשתמש של האימות כדי לטפל בו.
FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)
[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
- כניסה עם קישור לאימייל ב-FirebaseUI-iOS תואמת FirebaseUI ל-Android וגם FirebaseUI-אינטרנט שבו משתמש אחד שמתחיל את התהליך מ-FirebaseUI-Android יכול לפתוח את הקישור והשלימו את הכניסה באמצעות FirebaseUI-web. אותו הדבר נכון גם לזרימה ההפוכה.
Apple
פועלים לפי ההוראות בקטע לפני שמתחילים ובקטע תאימות לדרישות של Apple לגבי נתונים אנונימיים במדריך של Firebase בנושא כניסה באמצעות Apple.
צריך להוסיף את היכולת להיכנס באמצעות חשבון Apple לקובץ ההרשאות.
מאתחלים מופע של ספק OAuth שהוגדר לכניסה באמצעות Apple:
provider = FUIOAuth.appleAuthProvider()
FUIOAuth *provider = [FUIOAuth appleAuthProvider];
- איך מגדירים כניסה באמצעות חשבון Google בעזרת המדריך הזה
כדי להגדיר את Facebook Login SDK, צריך לפעול לפי השלבים הבאים הדף 'תחילת העבודה' של Facebook.
במסוף Firebase, פותחים את הקטע Authentication ומפעילים את Facebook. כדי להפעיל את הכניסה באמצעות Facebook, צריך לספק את מזהה האפליקציה ואת הסוד של האפליקציה ב-Facebook. אפשר למצוא אותם במסוף הפיתוח של Facebook.
מפעילים שיתוף מפתחות (keychain) בפרויקט Xcode דרך הגדרות הפרויקט > מסך היכולות.
צריך להוסיף את
fbFACEBOOK_APP_ID
כסכימה של כתובת URL ב- פרויקט Xcode.מוסיפים לקובץ
Info.plist
את מזהה האפליקציה ואת שם התצוגה שלכם ב-Facebook:מפתח ערך FacebookAppID FACEBOOK_APP_ID
(לדוגמה,1234567890
)שם תצוגה ב-Facebook שם האפליקציה מפעילים מכונה של ספק Facebook:
provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())
FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];
אם רוצים להשתמש בהתחברות מוגבלת ל-Facebook, צריך להגדיר את המאפיין
useLimitedLogin
במכונהFUIFacebookAuth
.provider.useLimitedLogin = true
provider.useLimitedLogin = YES;
במסוף Firebase, פותחים את הקטע אימות ומפעילים Twitter. כדי להפעיל כניסה ל-Twitter, עליך לספק את ה-API של Twitter מפתח וסוד צרכן, שאותם ניתן לקבל באפליקציית Twitter מסוף הניהול.
אתחול מופע של ספק OAuth שהוגדר להתחברות ל-Twitter:
provider = FUIOAuth.twitterAuthProvider()
FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
מספר טלפון
במסוף Firebase, פותחים את הקטע אימות ומפעילים לכניסה למספר טלפון.
מערכת Firebase צריכה להיות מסוגלת לאמת שבקשות כניסה באמצעות מספר טלפון מגיעות מהאפליקציה שלכם. אחת מהדרכים לעשות זאת היא באמצעות התראות APNs. צפייה הפעלת אימות אפליקציות אפשר לקבל פרטים נוספים.
כדי להפעיל התראות מ-APN לשימוש עם Firebase Authentication:
ב-Xcode, מפעילים את התראות ה-push בפרויקט.
מעלים את מפתח האימות של נקודות ה-APN ל-Firebase. אם עדיין אין לכם מפתח אימות של APNs, עליכם ליצור מפתח כזה במרכז החברים של מפתחי Apple.
-
בתוך הפרויקט במסוף Firebase, בוחרים סמל גלגל השיניים, בחירה Project Settings (הגדרות הפרויקט), ואז בוחרים את הכרטיסייה העברת הודעות בענן.
-
במפתח אימות של APNs בקטע הגדרת אפליקציה ל-iOS, לוחצים על העלאה לחצן.
-
עליך לעבור למיקום שבו שמרת את המפתח, לבחור אותו וללחוץ על פתיחה. מוסיפים את מזהה המפתח (זמין במרכז החברים של Apple Developer) ולוחצים על Upload.
אם כבר יש לכם אישור APNs, תוכלו להעלות את האישור במקום זאת.
-
אם לא ניתן לקבל התראות APN במכשיר, מערכת Firebase משתמשת reCAPTCHA לאימות בקשות.
כדי להפעיל אימות באמצעות reCAPTCHA, צריך לבצע את הפעולות הבאות ב-Xcode:
- פותחים את הגדרות הפרויקט: לוחצים לחיצה כפולה על שם הפרויקט בתצוגת העץ שמימין. בוחרים את האפליקציה בקטע יעדים, ואז בוחרים את הכרטיסייה מידע ומרחיבים את הקטע סוגי כתובות URL.
- לוחצים על הלחצן + ומוסיפים את מזהה האפליקציה המקודד בתור סכימה של כתובת URL. ניתן למצוא את מזהה האפליקציה המקודד
כללי
דף הגדרות במסוף Firebase, בקטע של iOS
אפליקציה. משאירים את שאר השדות ריקים.
בסיום, הקטע של הגדרות ה-config אמור להיראות בערך כך (אבל עם הערכים הספציפיים לאפליקציה שלכם):
אופציונלי: מערכת Firebase משתמשת בשינוי שיטות (method swizzling) כדי לקבל באופן אוטומטי את האסימון של APNs של האפליקציה, כדי לטפל בהתראות ה-push השקטות ש-Firebase שולחת לאפליקציה, וכדי ליירט באופן אוטומטי את ההפניה האוטומטית של הסכימה בהתאמה אישית מדף האימות של reCAPTCHA במהלך האימות.
אם מעדיפים לא להשתמש בתצוגה מקדימה, אפשר לעיין בנספח: שימוש בכניסה בטלפון ללא אפשרות של תצוגה היקפית במסמכי האימות של 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, הטמע handler לתוצאה של תהליכי ההרשמה ל-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
. לאחר מכן תוכלו להציג אותו בתור ה-View Controller הראשון של האפליקציה או להציג אותו מ-View Controller אחר באפליקציה.
כדי להגיע לבורר שיטות הכניסה:
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:
method:
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];
התאמה אישית
אפשר להתאים אישית את מסכי הכניסה באמצעות יצירת מחלקה משנית של התצוגה ב-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 ב-GitHub.
- אם נתקלתם בבעיה ב-FirebaseUI ונתקלתם בבעיה ואתם רוצים לדווח עליה, תוכלו להשתמש מעקב אחר בעיות ב-GitHub.