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