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, פותחים את הקטע אימות. ב הכרטיסייה שיטת כניסה, מפעילים את ספק האימייל/סיסמה. הערה צריך להפעיל כניסה באמצעות חשבון אימייל או סיסמה כדי להשתמש בכניסה באמצעות קישור לאימייל.
באותו קטע, מפעילים את האפשרות קישור לאימייל (כניסה ללא סיסמה). ולוחצים על Save.
כדי להפעיל כניסה באמצעות קישור לאימייל, צריך לאתחל מכונה של
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];
בנוסף, צריך להוסיף לרשימת ההיתרים את כתובת ה-URL שאתם מעבירים ל-iniatializer. אפשר לעשות זאת במסוף Firebase, פותחים את האימות . בכרטיסייה Sign in method (שיטת הכניסה), מוסיפים את כתובת ה-URL בקטע Authorized domains (דומיינים מורשים).
אחרי שמקבלים את קישור העומק, צריך להעביר אותו לממשק המשתמש של האימות כדי שהוא .
Swift
FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)
Objective-C
[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
- כניסה עם קישור לאימייל ב-FirebaseUI-iOS תואמת FirebaseUI ל-Android וגם FirebaseUI-אינטרנט שבו משתמש אחד שמתחיל את התהליך מ-FirebaseUI-Android יכול לפתוח את הקישור והשלימו את הכניסה באמצעות FirebaseUI-web. גם ההפך נכון .
Apple
פועלים לפי ההנחיות לפני שמתחילים וציות לנתונים האנונימיים של Apple הדרישות המדריך של Firebase כניסה באמצעות Apple.
מוסיפים את היכולת 'כניסה באמצעות Apple' לקובץ ההרשאות.
מפעילים מכונה של ספק OAuth שמוגדרת לכניסה באמצעות Apple:
Swift
provider = FUIOAuth.appleAuthProvider()
Objective-C
FUIOAuth *provider = [FUIOAuth appleAuthProvider];
- איך מגדירים כניסה באמצעות חשבון Google בעזרת המדריך הזה
פייסבוק
כדי להגדיר את Facebook Login SDK, צריך לבצע את הפעולות הבאות הדף 'תחילת העבודה' של Facebook.
במסוף Firebase, פותחים את הקטע אימות ומפעילים Facebook. כדי להפעיל כניסה ל-Facebook, עליך לספק את מזהה האפליקציה שלך ב-Facebook ו-App Secret, שניתן לקבל ב-Facebook Developers Console.
מפעילים שיתוף מפתחות (keychain) בפרויקט Xcode דרך הגדרות הפרויקט > מסך היכולות.
צריך להוסיף את
fbFACEBOOK_APP_ID
כסכימה של כתובת URL ב- פרויקט Xcode.מוסיפים את המזהה והשם המוצג של האפליקציה ב-Facebook לקובץ
Info.plist
:מפתח ערך FacebookAppID FACEBOOK_APP_ID
(לדוגמה,1234567890
)FacebookDisplayName השם של האפליקציה מאתחלים מופע של ספק Facebook:
Swift
provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())
Objective-C
FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];
אם רוצים להשתמש Facebook Limited Login, מגדירים את המאפיין
useLimitedLogin
במכונהFUIFacebookAuth
.Swift
provider.useLimitedLogin = true
Objective-C
provider.useLimitedLogin = YES;
במסוף Firebase, פותחים את הקטע Authentication ומפעילים את Twitter. כדי להפעיל כניסה ל-Twitter, עליך לספק את ה-API של Twitter מפתח וסוד צרכן, שאותם ניתן לקבל באפליקציית Twitter מסוף הניהול.
אתחול מופע של ספק OAuth שהוגדר להתחברות ל-Twitter:
Swift
provider = FUIOAuth.twitterAuthProvider()
Objective-C
FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
מספר טלפון
במסוף Firebase, פותחים את הקטע אימות ומפעילים לכניסה למספר טלפון.
ל-Firebase צריכה להיות אפשרות לאמת שבקשות הכניסה למספר הטלפון שמגיע מהאפליקציה. אחת מהדרכים לעשות זאת היא באמצעות נקודות APN. התראות. צפייה הפעלת אימות אפליקציות לקבלת פרטים.
כדי להפעיל התראות APN לשימוש עם Firebase Authentication:
ב-Xcode, מפעילים את ההתראות לפרויקט שלך.
מעלים את מפתח האימות של נקודות ה-APN ל-Firebase. אם עדיין אין לכם מפתח אימות של APN, עליכם ליצור אותו מרכז המנויים למפתחי Apple.
-
בתוך הפרויקט במסוף Firebase, בוחרים סמל גלגל השיניים, בחירה Project Settings (הגדרות הפרויקט), ואז בוחרים את הכרטיסייה העברת הודעות בענן.
-
במפתח אימות של APNs בקטע הגדרת אפליקציה ל-iOS, לוחצים על העלאה לחצן.
-
עליך לעבור למיקום שבו שמרת את המפתח, לבחור אותו וללחוץ על פתיחה. מוסיפים את מזהה המפתח של המפתח (זמין Apple Developer Member Center) ולוחצים על העלאה.
אם כבר יש לך אישור APN, אפשר להעלות אותו במקום זאת.
-
אם לא ניתן לקבל התראות APN במכשיר, מערכת Firebase משתמשת reCAPTCHA לאימות בקשות.
כדי להפעיל אימות באמצעות reCAPTCHA, צריך לבצע את הפעולות הבאות ב-Xcode:
- פותחים את הגדרות הפרויקט: לוחצים לחיצה כפולה על שם הפרויקט תצוגת עץ שמאלית בוחרים את האפליקציה בקטע יעדים, ואז בוחרים את הכרטיסייה מידע ומרחיבים את הקטע סוגי כתובות URL.
- לוחצים על הלחצן + ומוסיפים את מזהה האפליקציה המקודד ככתובת URL.
scheme. ניתן למצוא את מזהה האפליקציה המקודד
כללי
דף הגדרות במסוף Firebase, בקטע של iOS
אפליקציה. משאירים את שאר השדות ריקים.
בסיום התהליך, ההגדרה אמורה להיראות בערך כך הבא (אבל עם הערכים הספציפיים לאפליקציה שלך):
אופציונלי: מערכת 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.