FirebaseUI เป็นไลบรารีที่สร้างขึ้น บน SDK การตรวจสอบสิทธิ์ Firebase ซึ่งมีโฟลว์ UI แบบดรอปอินสําหรับใช้ ในแอปของคุณ 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 ให้เปิดส่วนการตรวจสอบสิทธิ์ ในแท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้ผู้ให้บริการอีเมล/รหัสผ่าน โปรดทราบ ว่าต้องเปิดใช้การลงชื่อเข้าใช้ด้วยอีเมลหรือรหัสผ่านก่อนจึงจะใช้การลงชื่อเข้าใช้ด้วยลิงก์อีเมลได้
ในส่วนเดียวกัน ให้เปิดใช้การลงชื่อเข้าใช้ด้วยลิงก์อีเมล (ลงชื่อเข้าใช้แบบไม่ต้องใช้รหัสผ่าน) แล้วคลิกบันทึก
คุณเปิดใช้การลงชื่อเข้าใช้ด้วยลิงก์ในอีเมลได้โดยเริ่มต้นอินสแตนซ์
FUIEmailAuth
ด้วยFIREmailLinkAuthSignInMethod
คุณยังต้องระบุออบเจ็กต์FIRActionCodeSettings
ที่ถูกต้องโดยตั้งค่า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];
นอกจากนี้ คุณต้องเพิ่ม URL ที่ส่งไปยังตัวเริ่มต้นลงในรายการที่อนุญาตพิเศษด้วย คุณทำได้ในคอนโซล Firebase โดยเปิดส่วนการตรวจสอบสิทธิ์ ในแท็บวิธีการลงชื่อเข้าใช้ ให้เพิ่ม URL ในส่วน โดเมนที่ได้รับอนุญาต
เมื่อจับ Deep Link ได้แล้ว คุณจะต้องส่งไปยัง UI การตรวจสอบสิทธิ์เพื่อให้ระบบจัดการได้
Swift
FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)
Objective-C
[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
- การลงชื่อเข้าใช้ด้วยลิงก์อีเมลใน FirebaseUI-iOS ใช้ได้กับ FirebaseUI-Android และ FirebaseUI-web ซึ่งผู้ใช้ที่เริ่มโฟลว์จาก FirebaseUI-Android จะเปิดลิงก์ และลงชื่อเข้าใช้ให้เสร็จสมบูรณ์ด้วย FirebaseUI-web ได้ เช่นเดียวกับโฟลว์ตรงกันข้าม
Apple
ทําตามส่วนก่อนเริ่มต้นและปฏิบัติตามข้อกําหนดของ Apple เกี่ยวกับข้อมูลที่ไม่ระบุตัวบุคคล ในคู่มือลงชื่อเข้าใช้ด้วย Apple ของ Firebase
เพิ่มความสามารถในการลงชื่อเข้าใช้ด้วย Apple ลงในไฟล์สิทธิ์
เริ่มต้นอินสแตนซ์ของผู้ให้บริการ OAuth ที่กำหนดค่าสำหรับการลงชื่อเข้าใช้ด้วย Apple โดยทำดังนี้
Swift
provider = FUIOAuth.appleAuthProvider()
Objective-C
FUIOAuth *provider = [FUIOAuth appleAuthProvider];
- ตั้งค่าการลงชื่อเข้าใช้ด้วย Google โดยใช้บทแนะนำนี้
ตั้งค่า SDK การเข้าสู่ระบบด้วย Facebook โดยทำตาม หน้าเริ่มต้นใช้งานของ Facebook
ในคอนโซล Firebase ให้เปิดส่วนการตรวจสอบสิทธิ์และเปิดใช้ Facebook หากต้องการเปิดใช้การลงชื่อเข้าใช้ด้วย Facebook คุณต้องระบุรหัสแอป Facebook และข้อมูลลับของแอป ซึ่งคุณดูได้ในคอนโซลนักพัฒนา Facebook
เปิดใช้การแชร์พวงกุญแจในโปรเจ็กต์ 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 ให้ตั้งค่าพร็อพเพอร์ตี้
useLimitedLogin
ในอินสแตนซ์FUIFacebookAuth
Swift
provider.useLimitedLogin = true
Objective-C
provider.useLimitedLogin = YES;
ในคอนโซล Firebase ให้เปิดส่วนการตรวจสอบสิทธิ์และเปิดใช้ Twitter หากต้องการเปิดใช้การลงชื่อเข้าใช้ Twitter คุณต้องระบุคีย์และข้อมูลลับสำหรับผู้บริโภคของ Twitter API ซึ่งคุณจะรับได้ในคอนโซลการจัดการแอปพลิเคชัน Twitter
เริ่มต้นอินสแตนซ์ของผู้ให้บริการ OAuth ที่กำหนดค่าสำหรับการเข้าสู่ระบบ Twitter
Swift
provider = FUIOAuth.twitterAuthProvider()
Objective-C
FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
หมายเลขโทรศัพท์
ในFirebase คอนโซล ให้เปิดส่วนการตรวจสอบสิทธิ์และเปิดใช้ การลงชื่อเข้าใช้ด้วยหมายเลขโทรศัพท์
Firebase ต้องยืนยันได้ว่าคำขอลงชื่อเข้าใช้ด้วยหมายเลขโทรศัพท์มาจากแอปของคุณ วิธีหนึ่งที่ใช้ในการยืนยันคือการใช้การแจ้งเตือน APNs โปรดดูรายละเอียดที่หัวข้อเปิดใช้การตรวจสอบแอป
วิธีเปิดใช้การแจ้งเตือน APNs เพื่อใช้กับ Firebase Authentication
ใน Xcode ให้เปิดใช้ข้อความ Push สำหรับโปรเจ็กต์
อัปโหลดคีย์การตรวจสอบสิทธิ์ APNs ไปยัง Firebase หากยังไม่มีคีย์การตรวจสอบสิทธิ์ APNs โปรดสร้างคีย์ใน Apple Developer Member Center
-
ภายในโปรเจ็กต์ในFirebaseคอนโซล ให้เลือกไอคอน รูปเฟือง เลือก การตั้งค่าโปรเจ็กต์ แล้วเลือกแท็บ Cloud Messaging
-
ในคีย์การตรวจสอบสิทธิ์ APNs ภายในการกำหนดค่าแอป iOS คลิกปุ่มอัปโหลดเพื่ออัปโหลดคีย์การตรวจสอบสิทธิ์สำหรับการพัฒนา หรือ คีย์การตรวจสอบสิทธิ์สำหรับการใช้งานจริง หรือทั้ง 2 อย่าง ต้องระบุอย่างน้อย 1 รายการ
-
เรียกดูตำแหน่งที่คุณบันทึกคีย์ เลือกคีย์ แล้วคลิกเปิด เพิ่มรหัสคีย์สำหรับคีย์ (มีอยู่ใน ศูนย์สมาชิกนักพัฒนาซอฟต์แวร์ของ Apple) แล้วคลิก อัปโหลด
หากมีใบรับรอง APNs อยู่แล้ว คุณสามารถอัปโหลดใบรับรองแทนได้
-
เมื่อรับการแจ้งเตือน APNs ในอุปกรณ์ไม่ได้ Firebase จะใช้ reCAPTCHA เพื่อยืนยันคำขอ
หากต้องการเปิดใช้การยืนยัน reCAPTCHA ให้ทำดังนี้ใน Xcode
- เปิดการกำหนดค่าโปรเจ็กต์โดยดับเบิลคลิกชื่อโปรเจ็กต์ในมุมมองแบบต้นไม้ทางด้านซ้าย เลือกแอปจากส่วนเป้าหมาย จากนั้น เลือกแท็บข้อมูล แล้วขยายส่วนประเภท URL
- คลิกปุ่ม + แล้วเพิ่มรหัสแอปที่เข้ารหัสเป็นรูปแบบ URL
คุณดูรหัสแอปที่เข้ารหัสได้ในหน้าการตั้งค่า
ทั่วไปของคอนโซล Firebase ในส่วนสำหรับแอป iOS
ของคุณ เว้นช่องอื่นๆ ว่างไว้
เมื่อเสร็จแล้ว การกำหนดค่าควรมีลักษณะคล้ายกับ ต่อไปนี้ (แต่มีค่าเฉพาะแอปพลิเคชันของคุณ)
ไม่บังคับ: Firebase ใช้การสลับเมธอดเพื่อรับโทเค็น APNs ของแอปโดยอัตโนมัติ เพื่อจัดการข้อความ Push แบบเงียบที่ 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 หรือ Facebook ให้ใช้ตัวแฮนเดิลสำหรับผลลัพธ์ของ ขั้นตอนการลงชื่อสมัครใช้ 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:
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