FirebaseUI คือไลบรารีที่สร้างขึ้น SDK การตรวจสอบสิทธิ์ Firebase ที่มีขั้นตอน UI แบบดรอปอินสำหรับการใช้งาน ในแอปของคุณ Firebase UI มีประโยชน์ดังต่อไปนี้
- ผู้ให้บริการหลายราย: ขั้นตอนการลงชื่อเข้าใช้อีเมล/รหัสผ่าน ลิงก์อีเมล โทรศัพท์ การตรวจสอบสิทธิ์, Google Sign-In, การเข้าสู่ระบบ Facebook และการเข้าสู่ระบบ Twitter
- การจัดการบัญชี: ขั้นตอนในการจัดการงานด้านการจัดการบัญชี เช่น การสร้างบัญชีและการรีเซ็ตรหัสผ่าน
- การลิงก์บัญชีแบบไม่ระบุตัวตน: ขั้นตอนในการลิงก์บัญชีที่ไม่ระบุชื่อโดยอัตโนมัติ กับผู้ให้บริการข้อมูลประจำตัว
- ปรับแต่งได้: ปรับแต่งรูปลักษณ์ของ Firebase UI ให้เหมาะกับแอป และ เนื่องจาก 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 ซึ่งผู้ใช้รายหนึ่งที่เริ่มต้นขั้นตอนจาก 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 ของ Facebook และ App Secret ได้ ใน Facebook Developers Console
เปิดใช้การแชร์คีย์เชนในโปรเจ็กต์ 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 Authentication ให้ทำดังนี้
ใน Xcode ให้เปิดใช้ข้อความ Push สำหรับโปรเจ็กต์ของคุณ
อัปโหลดคีย์การตรวจสอบสิทธิ์ APN ไปยัง Firebase หากคุณยังไม่มีคีย์การตรวจสอบสิทธิ์ APNs โปรดสร้างคีย์ใน Apple Developer Member Center
-
ภายในโปรเจ็กต์ในคอนโซล Firebase ให้เลือก ไอคอนรูปเฟือง, เลือก การตั้งค่าโปรเจ็กต์ แล้วเลือก แท็บการรับส่งข้อความในระบบคลาวด์
-
ในคีย์การตรวจสอบสิทธิ์ AAP ในส่วนการกำหนดค่าแอป iOS ให้คลิกอัปโหลด
-
เรียกดูตำแหน่งที่คุณบันทึกกุญแจไว้ จากนั้นเลือกคีย์แล้วคลิก เปิด เพิ่มรหัสคีย์สำหรับคีย์ (มีอยู่ใน Apple Developer Member Center) แล้วคลิก อัปโหลด
หากมีใบรับรอง APNs อยู่แล้ว คุณสามารถอัปโหลดใบรับรอง แทน
-
เมื่อรับการแจ้งเตือน APN ในอุปกรณ์ไม่ได้ Firebase จะใช้ reCAPTCHA เพื่อยืนยันคำขอ
หากต้องการเปิดใช้การยืนยัน reCAPTCHA ให้ทำดังนี้ใน Xcode
- เปิดการกำหนดค่าโปรเจ็กต์: ดับเบิลคลิกชื่อโปรเจ็กต์ใน มุมมองต้นไม้ด้านซ้าย เลือกแอปจากส่วนเป้าหมาย จากนั้น เลือกแท็บข้อมูล และขยายส่วนประเภท URL
- คลิกปุ่ม + แล้วเพิ่มรหัสแอปที่เข้ารหัสเป็น URL
สคีม คุณดูรหัสแอปที่เข้ารหัสได้ใน
ข้อมูลทั่วไป
การตั้งค่าของคอนโซล Firebase ในส่วนสำหรับ iOS
แอป เว้นฟิลด์อื่นๆ ว่างไว้
เมื่อดำเนินการเสร็จแล้ว ค่ากำหนดของคุณควรมีลักษณะคล้ายกับ ดังต่อไปนี้ (แต่เป็นค่าเฉพาะแอปพลิเคชัน)
ไม่บังคับ: Firebase จะใช้เมธอด Swirl เพื่อรับ โทเค็น APN ของแอปเพื่อจัดการข้อความ Push แบบปิดเสียงที่ Firebase ส่งไปยังแอปของคุณ และสกัดกั้นการเปลี่ยนเส้นทางที่กำหนดเองโดยอัตโนมัติ จากหน้าการยืนยัน reCAPTCHA ในระหว่างการยืนยัน
หากคุณไม่ต้องการใช้ Swizzing โปรดดูภาคผนวก: การใช้การลงชื่อเข้าใช้ด้วยโทรศัพท์โดยไม่มีการผสานรวม ในเอกสารการตรวจสอบสิทธิ์ 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.
ขั้นตอนถัดไป
- สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้และปรับแต่ง Firebase UI โปรดดู README ใน GitHub
- หากคุณพบและพบปัญหาในการ Firebase UI และต้องการรายงาน ให้ใช้ เครื่องมือติดตามปัญหาของ GitHub