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 tạo ở đầu SDK xác thực Firebase cung cấp luồng 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 trong email, số điện thoại xác thực, Đăng nhập bằng Google, Đăng nhập Facebook và Đăng nhập Twitter.
  • Quản lý tài khoản: quy trình để xử lý các công việc 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 các tài khoản ẩn danh cho 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à nguồn mở nên bạn có thể phân nhánh dự án và tuỳ chỉnh nó theo đúng nhu cầu của bạn.

Trước khi bắt đầu

  1. Thêm Firebase vào dự án Apple của bạn.

  2. 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 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 thực hiện 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 phương thức đăng nhập bạn muốn hỗ trợ.

Địa chỉ email và mật khẩu

Trong bảng điều khiển của Firebase, hãy mở phần Xác thực rồi bật email và mật khẩu.

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

  2. Cũng trong phần này, hãy bật tính năng Đăng nhập bằng đường liên kết trong 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 FUIEmailAuth thực thể với FIREmailLinkAuthSignInMethod. Bạn cũng cần cung cấp đố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.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];
  1. Ngoài ra, bạn cần phải đưa URL mà bạn chuyển đến trình khởi tạo vào danh sách trắng. Bạn có thể làm việc này trong bảng điều khiển của 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 Miền được uỷ quyền.

  2. Sau khi nắm được đường liên kết sâu, bạn sẽ 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ý được.

Swift

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

Objective-C

[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
  1. 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 – AndroidFirebaseUI-web nơi 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 này cũng đúng với điều ngược lại luồng.

Apple

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

  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 phiên bản của trì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 Đăng nhập bằng Google theo hướng dẫn này

Facebook

  1. Thiết lập SDK đăng nhập 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 của mình và App Secret (Bí mật ứng dụng) mà bạn có thể tải trong Facebook Developers Console.

  3. Bật tính năng chia sẻ chuỗi khoá trong dự án Xcode của bạn từ phần Cài đặt dự án > Màn hình Chức năng.

  4. Thêm fbFACEBOOK_APP_ID dưới dạng một lược đồ URL trong Dự án Xcode.

  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)
    Tên hiển thị Facebook 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 Đăng nhập Facebook Limited, đặt thuộc tính useLimitedLogin trên thực thể FUIFacebookAuth.

    Swift

    provider.useLimitedLogin = true
    

    Objective-C

    provider.useLimitedLogin = YES;
    

Twitter

  1. Trong bảng điều khiển Firebase, 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 API Twitter khóa và bí mật của người dùng mà bạn có thể tải xuống trong Ứng dụng Twitter Bảng điều khiển quản lý.

  2. Khởi chạy phiên bản nhà cung cấp OAuth được định cấu hình để đăng nhập 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 đăng nhập bằng số điện thoại.

  2. 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 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 APN thông báo. Xem 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 APN để 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 APN của bạn lên Firebase. Nếu chưa có khoá xác thực APN hãy nhớ tạo một khoá trong Trung tâm thành viên dành cho nhà phát triển của Apple.

      1. 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 Project Settings (Cài đặt dự án), sau đó chọn Thẻ Giải pháp gửi thông báo qua đám mây.

      2. Trong khoá xác thực AAPN ở phần Cấu hình ứng dụng iOS, nhấp vào nút Tải lên .

      3. Duyệt tới vị trí bạn đã lưu khoá của mình, chọn khoá đó rồi nhấp vào Mở. Thêm mã khoá cho khoá (có trong Trung tâm thành viên dành cho nhà phát triển của Apple) rồi nhấp vào Tải lên.

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

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

    Để bật tính năng xác minh bằng 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 mục MỤC TIÊU, sau đó chọn thẻ Thông tin rồi mở rộng mục Loại URL.
    2. Nhấp vào nút + rồi thêm Mã ứng dụng được mã hoá dưới dạng URL hệ thống. Bạn có thể tìm thấy Mã ứng dụng được mã hoá trên Chung Trang Cài đặt của bảng điều khiển của Firebase, trong phần dành cho iOS . Để 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 sau đây (nhưng với các giá trị dành riêng cho ứng dụng của bạn):

      Ảnh chụp màn hình giao diện thiết lập lược đồ URL tuỳ chỉnh của Xcode
  4. Không bắt buộc: Firebase sử dụng phương thức xoáy nhanh để tự động lấy mã thông báo APN 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 lệnh chuyển hướng lược đồ tuỳ chỉnh trên 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 chuyển động nhanh, 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 dùng lướt trong các tài liệu xác thực SDK Firebase.

Đăng nhập

Để bắt đầu quy trình đăng nhập FirebaseUI, trước tiên hãy khởi chạy 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;

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

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;

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ý Google và 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];
}

Cuối cùng, hãy lấy một thực thể của AuthViewController từ FUIAuth. Sau đó, bạn có thể hiển thị ứng dụng dưới dạng bộ điều khiển chế độ xem đầu tiên của ứng dụng hoặc hiển thị ứng dụng từ một bộ điều khiển chế độ xem khác trong ứng dụng của bạn.

Swift

Cách tải bộ chọn phương thức đăng nhập:

let authViewController = authUI.authViewController()

Nếu chỉ dùng số điện thoại để đăng nhập, bạn có thể hiển thị số điện thoại để thay thế, hãy làm theo các bước sau:

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

Objective-C

Cách tải bộ chọn phương thức đăng nhập:

UINavigationController *authViewController = [authUI authViewController];

Nếu chỉ dùng số điện thoại để đăng nhập, bạn có thể hiển thị số điện thoại để thay thế, hãy làm theo các bước sau:

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ả là trả về uỷ quyền xác thực FirebaseUI trong didSignInWithUser:error: phương thức:

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

Đăng xuất

FirebaseUI cung cấp các phương thức thuận tiện để đăng xuất khỏi tính năng Xác thực Firebase cũng như mọi nhà cung cấp danh tính xã hội:

Swift

authUI.signOut()

Objective-C

[authUI signOut];

Tùy chỉnh

Bạn có thể tuỳ chỉnh màn hình đăng nhập bằng cách phân lớp con chế độ xem của FirebaseUI và chỉ định bộ điều khiển trong phương thức uỷ quyền của 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];
}

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:

Swift

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

Objective-C

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

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

Swift

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

Objective-C

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 ĐỌC 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.