Google is committed to advancing racial equity for Black communities. See how.
Trang này được dịch bởi Cloud Translation API.
Switch to English

Dễ dàng thêm đăng nhập vào ứng dụng iOS của bạn với 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 luồng giao diện người dùng thả vào để 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 : quy trình đă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 : 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ể 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à mã nguồn mở, bạn có thể phân nhánh dự án và tùy 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 iOS 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 Auth và các nhà cung cấp 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 từ bảng điều khiển Firebase .

Thiết lập các 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.

  1. 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 , hãy bật nhà cung cấp Email / Mật khẩu . Lưu ý rằng đăng nhập email / mật khẩu phải được bật để sử dụng đăng nhập liên kết email.

  2. Trong cùng phần này, hãy bật phương pháp đă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 .

  3. Bạn có thể bật đăng nhập liên kết email bằng cách khởi tạo phiên bản FUIEmailAuth với FIREmailLinkAuthSignInMethod . Bạn cũng sẽ cần cung cấp đối tượng FIRActionCodeSettings hợp lệ với handleCodeInApp đượ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)

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 cho trình iniatializer 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 pháp đăng nhập , hãy thêm URL trong Miền được ủy quyền .

  2. Sau khi nắm 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ý nó.

Nhanh

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

Objective-C

[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
  1. Đăng nhập liên kết email trong FirebaseUI-iOS tương thích với FirebaseUI-AndroidFirebaseUI-web trong đó một người dùng bắt đầu quy trình từ FirebaseUI-Android có thể mở liên kết và hoàn tất đăng nhập bằng FirebaseUI-web. Điều này cũng đúng với luồng ngược lại.

táo

  1. Làm theo các phần Trước khi bạn bắt đầuTuâ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 bằng Firebase với Apple .

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

  3. Khởi tạo phiên bản nhà cung cấp OAuth được định cấu hình để Đăng nhập với Apple:

    Nhanh

    provider = FUIOAuth.appleAuthProvider()
    

    Objective-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];
    

Google

  1. Trong bảng điều khiển Firebase , mở phần Xác thực và bật Đăng nhập bằng Google.

  2. Thêm ID khách hàng đã đảo ngược của bạn dưới dạng lược đồ URL trong dự án Xcode của bạn. Bạn có thể tìm thấy giá trị này trong tệp GoogleService-Info.plist .

Facebook

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

  2. Trong bảng điều khiển Firebase , mở phần Xác thực và bật Facebook. Để kích hoạt đăng nhập Facebook, bạn phải cung cấp ID ứng dụng Facebook và Bí mật ứng dụng, bạn có thể nhận được trong bảng điều khiển Facebook Developers.

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

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

  5. 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ị
    FacebookAppID FACEBOOK_APP_ID (ví dụ: 1234567890 )
    FacebookDisplayName Tên ứng dụng của bạn

Twitter

  1. Trong bảng điều khiển Firebase , mở phần Xác thực và bật Twitter. Để kích hoạt đăng nhập Twitter, bạn phải cung cấp khóa và bí mật dành cho người tiêu dùng API Twitter của mình, bạn có thể nhận được khóa này trong bảng điều khiển Quản lý ứng dụng Twitter.

  2. 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()
    

    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 và bật đă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 được thực hiện là thông qua các 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:

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

    2. 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 xem Định cấu hình APN bằng FCM .

      1. Bên trong dự án của bạn trong bảng điều khiển Firebase, chọn biểu tượng bánh răng, chọn Cài đặt dự án , sau đó chọn tab Nhắn tin qua đám mây .

      2. Trong khóa xác thực APN dưới cấu hình ứng dụng iOS , hãy nhấp vào nút Tải lên .

      3. Duyệt đến vị trí bạn đã lưu khóa của mình, chọn nó và nhấp vào Mở . Thêm ID khóa cho khóa (có sẵn trong Chứng chỉ, Số nhận dạng & Hồ sơ trong Trung tâm thành viên dành cho nhà phát triển Apple ) và nhấp vào Tải lên .

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

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

    Để bật xác minh reCAPTCHA, nếu bạn chưa thêm ID khách hàng đã đảo ngược của mình dưới dạng lược đồ URL (ví dụ: để bật Đăng nhập bằng Google), hãy làm như vậy trong dự án Xcode của bạn. Bạn có thể tìm thấy giá trị này trong tệp GoogleService-Info.plist .

  4. Tùy chọn : Firebase sử dụng phương pháp swizzling để 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 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 swizzling trong 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:

Nhanh

import FirebaseUI

/* ... */

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

Objective-C

@import FirebaseUI;

...

[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 pháp đăng nhập mà bạn muốn hỗ trợ:

Nhanh

import FirebaseUI

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

Objective-C

@import FirebaseUI;

...

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 đăng nhập Google hoặc Facebook, hãy triển khai một trình xử lý cho kết quả của luồng đăng ký 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
}

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, lấy một phiên bản của AuthViewController từ FUIAuth . Sau đó, bạn có thể trình bày nó dưới dạng bộ điều khiển chế độ xem đầu tiên của ứng dụng hoặc trình bày nó từ bộ điều khiển chế độ xem khác trong ứng dụng của bạn.

Nhanh

Để nhận 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, bạn có thể hiển thị trực tiếp chế độ xem đăng nhập bằng số điện thoại thay thế:

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

Objective-C

Để nhận 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, bạn có thể hiển thị trực tiếp chế độ xem đăng nhập bằng số điện thoại thay thế:

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

Sau khi bạn trình bày chế độ xem xác thực và người dùng đăng nhập, kết quả đượ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
}

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 pháp 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()

Objective-C

[authUI signOut];

Tùy biến

Bạn có thể tùy chỉnh các 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 quyền 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)
}

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ể 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

Objective-C

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

Cuối cùng, bạn có thể tùy chỉnh các 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 một gói tùy chỉnh:

Nhanh

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

Objective-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à sự cố trong FirebaseUI và muốn báo cáo, hãy sử dụng trình theo dõi sự cố GitHub .