Dễ dàng thêm tính năng đăng nhập vào ứng dụng iOS bằng FirebaseUI

FirebaseUI là một thư viện được xây dựng dựa trên SDK Xác thực Firebase, cung cấp các quy trình giao diện người dùng thả xuống để sử dụng trong ứng dụng của bạn. FirebaseUI mang lại những lợi ích sau:

• Nhiều nhà cung cấp: quy trình đăng nhập cho email/mật khẩu, đường liên kết email, xác thực bằng điện thoại , Đăng nhập bằng Google, Đăng nhập bằng Facebook và Đăng nhập bằng Twitter.
• Quản lý tài khoản: quy trình 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: quy trình tự động liên kết tài khoản ẩn danh với nhà cung cấp danh tính.
• Có thể tuỳ chỉnh: tuỳ chỉnh giao diện của FirebaseUI cho phù hợp với ứng dụng của bạn. Ngoài ra, vì FirebaseUI là mã nguồn mở, nên bạn có thể phát triển nhánh dự án và tuỳ chỉnh chính xác theo nhu cầu của mình.

Trước khi bắt đầu

1. Thêm Firebase vào dự án Apple.

2. Thêm FirebaseUI vào Podfile:

   pod 'FirebaseUI'
   

   Nếu muốn, bạn chỉ có thể thêm thành phần Xác thực và các 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'
   

3. Nếu bạn chưa kết nối ứng dụng của mình với dự án Firebase, hãy làm như vậy trong 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 rồi bật tính năng xác thực bằng email và mật khẩu.

Xác thực bằng đường liên kết email

1. Trong Firebase bảng điều khiển, hãy mở phần Xác thực. Trên thẻ Phương thức đăng nhập, hãy bật nhà cung cấp Email/Mật khẩu. Xin lưu ý rằng bạn phải bật tính năng đăng nhập bằng email hoặc mật khẩu để sử dụng tính năng đăng nhập bằng đường liên kết email.

2. Trong cùng một phần, hãy bật phương thức đăng nhập Đường liên kết email (đăng nhập không cần mật khẩu) rồi nhấp vào Lưu.

3. Bạn có thể bật tính năng đăng nhập bằng đường liên kết email bằng cách khởi chạy một thực thể FUIEmailAuth bằng FIREmailLinkAuthSignInMethod. Bạn cũng cần cung cấp một đối tượng FIRActionCodeSettings hợp lệ với handleCodeInApp được đặt thành true.

   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];
   

4. Ngoài ra, bạn cần đưa URL mà bạn chuyển đến trình khởi chạy vào danh sách cho phép. Bạn có thể thực hiện việc này trong bảng điều khiển Firebase, hãy mở phần Xác thực. Trên thẻ Phương thức đăng nhập, hãy thêm URL trong phần Miền được cho phép.

5. Sau khi nắm bắt được đường liên kết sâu, bạn cần chuyển đường liên kết đó đến giao diện người dùng xác thực để có thể xử lý.

   Swift

   FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)
   

   Objective-C

   [[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
   

6. Tính năng đăng nhập bằng đườ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 quy trình từ FirebaseUI-Android có thể mở đường liên kết và hoàn tất quy trình đăng nhập bằng FirebaseUI-web. Điều tương tự cũng áp dụng cho quy trình ngược lại.

Apple

1. Làm theo các phần Trước khi bắt đầu và Tuân thủ các yêu cầu về dữ liệu ẩn danh của Apple requirements trong hướng dẫn Firebase Đăng nhập bằng Apple.

2. Thêm tính năng Đăng nhập bằng Apple vào tệp quyền của bạn.

3. Khởi chạy một thực thể nhà cung cấp OAuth được định cấu hình cho tính năng Đăng nhập bằng Apple:

   Swift

   provider = FUIOAuth.appleAuthProvider()

   Objective-C

   FUIOAuth *provider = [FUIOAuth appleAuthProvider];

Google

1. Thiết lập tính năng Đăng nhập bằng Google bằng hướng dẫn này

Facebook

1. Thiết lập SDK Đăng nhập bằng Facebook bằng cách làm theo trang bắt đầu của Facebook.

2. Trong bảng điều khiển Firebase, hãy mở phần Xác thực rồi bật Facebook. Để bật tính năng đăng nhập bằng Facebook, bạn phải cung cấp Mã ứng dụng Facebook và Khoá bí mật của ứng dụng, bạn có thể lấy các thông tin này trong bảng điều khiển Nhà phát triển Facebook.

3. Bật tính năng chia sẻ chuỗi khoá trong dự án Xcode của bạn trên màn hình Cài đặt dự án > Khả năng.

4. Thêm fbFACEBOOK_APP_ID làm lược đồ URL trong dự án Xcode của bạn.

5. Thêm Mã ứng dụng Facebook và tên hiển thị vào tệp Info.plist:

   Khóa	Giá trị
   FacebookAppID	FACEBOOK_APP_ID (ví dụ: 1234567890)
   FacebookDisplayName	Tên ứng dụng của bạn

6. Khởi chạy một thực thể nhà cung cấp Facebook:

   Swift

   provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())

   Objective-C

   FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];

7. Nếu bạn muốn sử dụng tính năng Đăng nhập bằng Facebook có giới hạn, hãy đặt thuộc tính useLimitedLogin trên thực thể FUIFacebookAuth.

   Swift

   provider.useLimitedLogin = true

   Objective-C

   provider.useLimitedLogin = YES;

Twitter

1. Trong Firebase bảng điều khiển, hãy mở phần Xác thực rồi bật Twitter. Để bật tính năng đăng nhập bằng Twitter, bạn phải cung cấp khoá người dùng và khoá bí mật của API Twitter, bạn có thể lấy các thông tin này trong bảng điều khiển Quản lý ứng dụng Twitter.

2. Khởi chạy một thực thể nhà cung cấp OAuth được định cấu hình cho tính năng đăng nhập bằng Twitter:

   Swift

   provider = FUIOAuth.twitterAuthProvider()

   Objective-C

   FUIOAuth *provider = [FUIOAuth twitterAuthProvider];

Số điện thoại

1. Trong bảng điều khiển Firebase, hãy mở phần Xác thực rồi bật tính năng đăng nhập bằng số điện thoại.

2. Firebase phải có thể xác minh rằng các 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 việc này là thông qua thông báo APNs. Hãy xem phần Bật tính năng xác minh ứng dụng để biết thông tin chi tiết.

   Cách bật thông báo APNs để sử dụng với Firebase Authentication:

   1. Trong Xcode, hãy bật thông báo đẩy cho dự án của bạn.

   2. Tải khoá xác thực APNs lên Firebase. Nếu bạn chưa có khoá xác thực APNs, hãy nhớ tạo một khoá trong Trung tâm thành viên nhà phát triển Apple.

      1. Trong bảng điều khiển Firebase, hãy chuyển đến settings Cài đặt > Chung. Sau đó, hãy nhấp vào thẻ Gửi thông báo qua đám mây.
      2. Trong phần APNs authentication key (Khoá xác thực APNs) trong phần iOS app configuration (Cấu hình ứng dụng iOS), hãy nhấp vào Upload (Tải lên) để tải khoá xác thực phát triển, khoá xác thực sản xuất hoặc cả hai khoá lên. Bạn phải có ít nhất một khoá.
      3. Duyệt đến vị trí mà bạn đã lưu khoá, chọn khoá đó rồi nhấp vào Open. Thêm mã khoá cho khoá (có trong Trung tâm thành viên nhà phát triển Apple) rồi nhấp vào Upload.

      Nếu đã có chứng chỉ APNs, bạn có thể tải chứng chỉ đó lên.

3. Khi không nhận được thông báo APNs trên thiết bị, Firebase sẽ sử dụng reCAPTCHA để xác minh các yêu cầu.

   Để bật tính năng xác minh bằng dịch vụ reCAPTCHA, hãy làm như sau trong Xcode:

   1. Mở cấu hình dự án: nhấp đú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 trong phần TARGETS, sau đó chọn thẻ Info rồi mở rộng phần URL Types.
   2. Nhấp vào nút + rồi thêm Mã ứng dụng được mã hoá làm lược đồ URL. Bạn có thể tìm thấy Mã ứng dụng được mã hoá 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. Hãy để trống các trường khác.

      Sau khi hoàn tất, cấu hình của bạn sẽ có dạng như sau (nhưng có các giá trị dành riêng cho ứng dụng của bạn):

      

4. Không bắt buộc: Firebase sử dụng phương thức swizzling để tự động lấy mã thông báo APNs của ứng dụng , xử lý 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 đồ tuỳ 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 swizzling, hãy xem Phụ lục: Sử dụng tính năng đăng nhập bằng điện thoại mà không cần swizzling trong tài liệu xác thực Firebase SDK.

Đăng nhập

Để bắt đầu quy trình đăng nhập FirebaseUI, trước tiên, hãy khởi chạy FirebaseUI:

import FirebaseAuthUI

/* ... */

FirebaseApp.configure()
let authUI = FUIAuth.defaultAuthUI()
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self

@import FirebaseAuthUI;

...

[FIRApp configure];
FUIAuth *authUI = [FUIAuth defaultAuthUI];
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self;

Sau đó, hãy đị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ợ:

import FirebaseAuthUI
import FirebaseFacebookAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
import FirebasePhoneAuthUI

let providers: [FUIAuthProvider] = [
  FUIGoogleAuth(),
  FUIFacebookAuth(),
  FUITwitterAuth(),
  FUIPhoneAuth(authUI:FUIAuth.defaultAuthUI()),
]
self.authUI.providers = providers

@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:

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
}

- (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, hãy lấy một thực thể của AuthViewController từ FUIAuth. Sau đó, bạn có thể trình bày thực thể đó làm bộ điều khiển khung hiển thị đầu tiên của ứng dụng hoặc trình bày thực thể đó từ một bộ điều khiển khung hiển thị khác trong ứng dụng của bạn.

let authViewController = authUI.authViewController()

let phoneProvider = FUIAuth.defaultAuthUI().providers.first as! FUIPhoneAuth
phoneProvider.signIn(withPresenting: currentlyVisibleController, phoneNumber: nil)

UINavigationController *authViewController = [authUI authViewController];

FUIPhoneAuth *phoneProvider = [FUIAuth defaultAuthUI].providers.firstObject;
[phoneProvider signInWithPresentingViewController:currentlyVisibleController phoneNumber:nil];

Sau khi bạn trình bày khung hiển thị xác thực và người dùng đăng nhập, kết quả sẽ được trả về cho uỷ quyền Xác thực FirebaseUI trong phương thức didSignInWithUser:error::

func authUI(_ authUI: FUIAuth, didSignInWith user: FIRUser?, error: Error?) {
  // handle user and error as necessary
}

   - (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 tính năng Xác thực Firebase cũng như tất cả nhà cung cấp danh tính trên mạng xã hội:

authUI.signOut()

[authUI signOut];

Tuỳ chỉnh

Bạn có thể tuỳ chỉnh màn hình đăng nhập bằng cách tạo lớp con cho bộ điều khiển khung hiển thị của FirebaseUI và chỉ định các bộ điều khiển đó trong phương thức uỷ quyền của FUIAuth:

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)
}

- (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ể tuỳ 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:

let kFirebaseTermsOfService = URL(string: "https://example.com/terms")!
authUI.tosurl = kFirebaseTermsOfService

authUI.TOSURL = [NSURL URLWithString:@"https://example.com/terms"];

Cuối cùng, bạn có thể tuỳ chỉnh các thông báo và lời nhắc hiển thị cho người dùng bằng cách chỉ định một gói tuỳ chỉnh:

authUI.customStringsBundle = NSBundle.mainBundle() // Or any custom bundle.

authUI.customStringsBundle = [NSBundle mainBundle]; // Or any custom bundle.

Các bước tiếp theo

• Để biết thêm thông tin về cách sử dụng và tuỳ chỉnh FirebaseUI, hãy xem tệp README trên GitHub.
• Nếu bạn phát hiện vấn đề trong FirebaseUI và muốn báo cáo vấn đề đó, hãy sử dụng công cụ theo dõi lỗi GitHub.