FirebaseUI là thư viện được xây dựng dựa trên SDK xác thực Firebase cung cấp các luồng giao diện người dùng tùy chọn để sử dụng trong ứng dụng của bạn. FirebaseUI cung cấp các lợi ích sau:
- Nhiều nhà cung cấp : luồng đăng nhập cho email/mật khẩu, liên kết email, xác thực điện thoại, Đăng nhập bằng Google, Đăng nhập Facebook và Đăng nhập Twitter.
- Quản lý tài khoản : các luồng xử lý các tác vụ quản lý tài khoản, chẳng hạn như tạo tài khoản và đặt lại mật khẩu.
- Liên kết tài khoản ẩn danh : tiến tới tự động liên kết các tài khoản ẩn danh với nhà cung cấp danh tính.
- Có thể tùy chỉnh : tùy chỉnh giao diện của FirebaseUI để phù hợp với ứng dụng của bạn. Ngoài ra, vì FirebaseUI là nguồn mở nên bạn có thể phân nhánh dự án và tùy chỉnh dự án một cách chính xác theo nhu cầu của mình.
Trước khi bắt đầu
Thêm FirebaseUI vào Podfile của bạn:
pod 'FirebaseUI'Nếu muốn, bạn chỉ có thể thêm thành phần Auth và nhà cung cấp mà bạn muốn sử dụng:
pod 'FirebaseUI/Auth' pod 'FirebaseUI/Google' pod 'FirebaseUI/Facebook' pod 'FirebaseUI/OAuth' # Used for Sign in with Apple, Twitter, etc pod 'FirebaseUI/Phone'Nếu bạn chưa kết nối ứng dụng của mình với dự án Firebase, hãy thực hiện việc này từ bảng điều khiển Firebase .
Thiết lập phương thức đăng nhập
Trước khi có thể sử dụng Firebase để đăng nhập người dùng, bạn phải bật và định cấu hình các phương thức đăng nhập mà bạn muốn hỗ trợ.
Địa chỉ email và mật khẩu
Trong bảng điều khiển Firebase , hãy mở phần Xác thực và bật xác thực email và mật khẩu.
Xác thực liên kết email
Trong bảng điều khiển Firebase , hãy mở phần Xác thực . Trên tab Phương thức đăng nhập , bật nhà cung cấp Email/Mật khẩu . Lưu ý rằng tính năng đăng nhập bằng email hoặc mật khẩu phải được bật để sử dụng tính năng đăng nhập bằng liên kết email.
Trong cùng phần này, bật phương thức đăng nhập liên kết Email (đăng nhập không cần mật khẩu) và nhấp vào Lưu .
Bạn có thể kích hoạt đăng nhập liên kết email bằng cách khởi tạo phiên bản
FUIEmailAuthbằngFIREmailLinkAuthSignInMethod. Bạn cũng sẽ cần cung cấp đối tượngFIRActionCodeSettingshợp lệ vớihandleCodeInAppđược đặt thành true.
Nhanh
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)
Mục tiêu-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];
Ngoài ra, bạn cần đưa URL bạn chuyển tới trình khởi tạo vào danh sách trắng. Bạn có thể làm như vậy trong bảng điều khiển Firebase , mở phần Xác thực . Trên tab Phương thức đăng nhập , thêm URL trong Miền được ủy quyền .
Sau khi bắt được liên kết sâu, bạn sẽ cần chuyển nó đến giao diện người dùng xác thực để có thể xử lý.
Nhanh
FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)
Mục tiêu-C
[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
- Đăng nhập bằng liên kết email trong FirebaseUI-iOS tương thích với FirebaseUI-Android và FirebaseUI-web trong đó một người dùng bắt đầu luồng từ FirebaseUI-Android có thể mở liên kết và hoàn tất đăng nhập bằng FirebaseUI-web. Điều tương tự cũng đúng với dòng chảy ngược lại.
Quả táo
Làm theo phần Trước khi bạn bắt đầu và Tuân thủ các yêu cầu về dữ liệu ẩn danh của Apple trong hướng dẫn Đăng nhập Firebase bằng Apple .
Thêm khả năng Đăng nhập bằng Apple vào tệp quyền lợi của bạn.
Khởi tạo phiên bản nhà cung cấp OAuth được định cấu hình để Đăng nhập bằng Apple:
Nhanh
provider = FUIOAuth.appleAuthProvider()
Mục tiêu-C
FUIOAuth *provider = [FUIOAuth appleAuthProvider];
- Thiết lập Đăng nhập bằng Google bằng hướng dẫn này
Thiết lập SDK đăng nhập Facebook bằng cách theo dõi trang bắt đầu của Facebook .
Trong bảng điều khiển Firebase , hãy mở phần Xác thực và bật Facebook. Để bật đăng nhập Facebook, bạn phải cung cấp ID ứng dụng Facebook và Bí mật ứng dụng mà bạn có thể lấy trong bảng điều khiển dành cho nhà phát triển Facebook.
Bật chia sẻ chuỗi khóa trong dự án Xcode của bạn từ màn hình Cài đặt dự án > Khả năng .
Thêm
fb FACEBOOK_APP_IDlàm lược đồ URL trong dự án Xcode của bạn.Thêm ID ứng dụng Facebook và tên hiển thị của bạn vào tệp
Info.plist:Chìa khóa Giá trị ID ứng dụng Facebook FACEBOOK_APP_ID(ví dụ:1234567890)FacebookTên hiển thị Tên ứng dụng của bạn Khởi tạo phiên bản nhà cung cấp Facebook:
Nhanh
provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())
Mục tiêu-C
FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];
Nếu bạn muốn sử dụng tính năng Đăng nhập có giới hạn của Facebook , hãy đặt thuộc tính
useLimitedLogintrên phiên bảnFUIFacebookAuth.Nhanh
provider.useLimitedLogin = true
Mục tiêu-C
provider.useLimitedLogin = YES;
Trong bảng điều khiển Firebase , hãy mở phần Xác thực và bật Twitter. Để cho phép đăng nhập Twitter, bạn phải cung cấp khóa và bí mật dành cho người dùng API Twitter mà bạn có thể lấy trong bảng điều khiển Quản lý ứng dụng Twitter.
Khởi tạo phiên bản nhà cung cấp OAuth được định cấu hình để đăng nhập Twitter:
Nhanh
provider = FUIOAuth.twitterAuthProvider()
Mục tiêu-C
FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
Số điện thoại
Trong bảng điều khiển Firebase , hãy mở phần Xác thực và bật đăng nhập bằng số điện thoại.
Firebase phải có khả năng xác minh rằng yêu cầu đăng nhập bằng số điện thoại đến từ ứng dụng của bạn. Một trong những cách thực hiện điều này là thông qua thông báo APN. Xem Bật xác minh ứng dụng để biết chi tiết.
Để bật thông báo APN để sử dụng với Xác thực Firebase:
Trong Xcode, bật thông báo đẩy cho dự án của bạn.
Tải khóa xác thực APN của bạn lên Firebase. Nếu bạn chưa có khóa xác thực APN, hãy đảm bảo tạo một khóa trong Trung tâm thành viên nhà phát triển của Apple .
Bên trong dự án của bạn trong bảng điều khiển Firebase, hãy chọn biểu tượng bánh răng, chọn Cài đặt dự án rồi chọn tab Nhắn tin qua đám mây .
Trong khóa xác thực APN trong cấu hình ứng dụng iOS , hãy nhấp vào nút Tải lên .
Duyệt đến vị trí bạn đã lưu khóa, chọn nó và nhấp vào Mở . Thêm ID khóa cho khóa (có sẵn trong Apple Developer Member Center ) và nhấp vào Tải lên .
Nếu đã có chứng chỉ APN, bạn có thể tải chứng chỉ lên.
Khi không thể nhận được thông báo APN trên thiết bị, Firebase sẽ sử dụng reCAPTCHA để xác minh yêu cầu.
Để bật xác minh reCAPTCHA, hãy làm như sau trong Xcode:
- Mở cấu hình dự án của bạn: bấm đúp vào tên dự án trong chế độ xem dạng cây bên trái. Chọn ứng dụng của bạn từ phần MỤC TIÊU , sau đó chọn tab Thông tin và mở rộng phần Loại URL .
- Nhấp vào nút + và thêm ID ứng dụng được mã hóa của bạn làm lược đồ URL. Bạn có thể tìm thấy ID ứng dụng được mã hóa của mình trên trang Cài đặt chung của bảng điều khiển Firebase, trong phần dành cho ứng dụng iOS của bạn. Để trống các trường khác.
Khi hoàn tất, cấu hình của bạn sẽ trông giống như sau (nhưng với các giá trị dành riêng cho ứng dụng của bạn):
Tùy chọn : Firebase sử dụng phương pháp chuyển đổi để tự động lấy mã thông báo APN của ứng dụng của bạn, để xử lý các thông báo đẩy im lặng mà Firebase gửi đến ứng dụng của bạn và để tự động chặn chuyển hướng lược đồ tùy chỉnh từ trang xác minh reCAPTCHA trong quá trình xác minh.
Nếu bạn không muốn sử dụng tính năng swizzling, hãy xem Phụ lục: Sử dụng đăng nhập bằng điện thoại mà không sử dụng tính năng swizzling trong tài liệu xác thực SDK Firebase.
Đăng nhập
Để bắt đầu luồng đăng nhập FirebaseUI, trước tiên hãy khởi chạy FirebaseUI:
Nhanh
import FirebaseAuthUI
/* ... */
FirebaseApp.configure()
let authUI = FUIAuth.defaultAuthUI()
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self
Mục tiêu-C
@import FirebaseAuthUI;
...
[FIRApp configure];
FUIAuth *authUI = [FUIAuth defaultAuthUI];
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self;
Sau đó, định cấu hình FirebaseUI để sử dụng các phương thức đăng nhập mà bạn muốn hỗ trợ:
Nhanh
import FirebaseAuthUI
import FirebaseFacebookAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
import FirebasePhoneAuthUI
let providers: [FUIAuthProvider] = [
FUIGoogleAuth(),
FUIFacebookAuth(),
FUITwitterAuth(),
FUIPhoneAuth(authUI:FUIAuth.defaultAuthUI()),
]
self.authUI.providers = providers
Mục tiêu-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;
Nếu bạn đã bật tính năng đăng nhập bằng Google hoặc Facebook, hãy triển khai trình xử lý cho kết quả của quy trình đăng ký bằng Google và Facebook:
Nhanh
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
}
Mục tiêu-C
- (BOOL)application:(UIApplication *)app
openURL:(NSURL *)url
options:(NSDictionary *)options {
NSString *sourceApplication = options[UIApplicationOpenURLOptionsSourceApplicationKey];
return [[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
}
Cuối cùng, lấy một phiên bản AuthViewController từ FUIAuth . Sau đó, bạn có thể hiển thị nó dưới dạng bộ điều khiển chế độ xem đầu tiên của ứng dụng hoặc hiển thị nó từ một bộ điều khiển chế độ xem khác trong ứng dụng của bạn.
Nhanh
Để có được bộ chọn phương thức đăng nhập:
let authViewController = authUI.authViewController()
Nếu bạn chỉ sử dụng đăng nhập bằng số điện thoại, thay vào đó, bạn có thể hiển thị trực tiếp chế độ xem đăng nhập bằng số điện thoại:
let phoneProvider = FUIAuth.defaultAuthUI().providers.first as! FUIPhoneAuth
phoneProvider.signIn(withPresenting: currentlyVisibleController, phoneNumber: nil)
Mục tiêu-C
Để có được bộ chọn phương thức đăng nhập:
UINavigationController *authViewController = [authUI authViewController];
Nếu bạn chỉ sử dụng đăng nhập bằng số điện thoại, thay vào đó, bạn có thể hiển thị trực tiếp chế độ xem đăng nhập bằng số điện thoại:
FUIPhoneAuth *phoneProvider = [FUIAuth defaultAuthUI].providers.firstObject;
[phoneProvider signInWithPresentingViewController:currentlyVisibleController phoneNumber:nil];
Sau khi bạn hiển thị chế độ xem xác thực và người dùng đăng nhập, kết quả sẽ được trả về cho đại biểu FirebaseUI Auth trong phương thức didSignInWithUser:error: ::
Nhanh
func authUI(_ authUI: FUIAuth, didSignInWith user: FIRUser?, error: Error?) {
// handle user and error as necessary
}
Mục tiêu-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.
}
Đăng xuất
FirebaseUI cung cấp các phương thức tiện lợi để đăng xuất khỏi Xác thực Firebase cũng như tất cả các nhà cung cấp danh tính xã hội:
Nhanh
authUI.signOut()
Mục tiêu-C
[authUI signOut];
Tùy chỉnh
Bạn có thể tùy chỉnh màn hình đăng nhập bằng cách phân lớp bộ điều khiển chế độ xem của FirebaseUI và chỉ định chúng trong các phương thức ủy nhiệm của FUIAuth :
Nhanh
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)
}
Mục tiêu-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];
}
Bạn có thể tùy chỉnh URL theo điều khoản dịch vụ của ứng dụng, được liên kết trên màn hình tạo tài khoản:
Nhanh
let kFirebaseTermsOfService = URL(string: "https://example.com/terms")!
authUI.tosurl = kFirebaseTermsOfService
Mục tiêu-C
authUI.TOSURL = [NSURL URLWithString:@"https://example.com/terms"];
Cuối cùng, bạn có thể tùy chỉnh thông báo và lời nhắc hiển thị cho người dùng của mình bằng cách chỉ định gói tùy chỉnh:
Nhanh
authUI.customStringsBundle = NSBundle.mainBundle() // Or any custom bundle.
Mục tiêu-C
authUI.customStringsBundle = [NSBundle mainBundle]; // Or any custom bundle.
Bước tiếp theo
- Để biết thêm thông tin về cách sử dụng và tùy chỉnh FirebaseUI, hãy xem tệp README trên GitHub.
- Nếu bạn tìm thấy và phát sinh sự cố trong FirebaseUI và muốn báo cáo sự cố đó, hãy sử dụng trình theo dõi sự cố GitHub .