如何在 Swift 中自定义 Firebase 身份验证 UI

Question

我正在使用预建的 Firebase UI 构建身份验证系统，我想自定义 UI 以适应该程序。假设我想将背景颜色设置为黑色并更改按钮的角半径，有什么办法可以做到这一点吗？我试过对 authPickerViewController 进行子类化，但不知何故它不起作用。我做了一些搜索，但也找不到与此相关的任何教程或最近的问题。

这是我的 MainViewController

class LoginViewController: UIViewController, FUIAuthDelegate{

  override func viewDidLoad() {
    super.viewDidLoad()

    let authUI = FUIAuth.defaultAuthUI()
    authUI?.delegate = self
    let providers: [FUIAuthProvider] = [
      FUIEmailAuth(),
      FUIGoogleAuth(),
      FUIPhoneAuth(authUI:FUIAuth.defaultAuthUI()!)]
    authUI?.providers = providers

    let authViewController = authUI?.authViewController()
    authViewController!.modalPresentationStyle = .fullScreen
    authViewController!.setNavigationBarHidden(true, animated: false)

    self.present(authViewController!, animated: false, completion: nil)
  }

  func application(_ app: UIApplication, open url: URL,
    options: [UIApplicationOpenURLOptionsKey : Any]) -> Bool {
    let sourceApplication = options[UIApplicationOpenURLOptionsKey.sourceApplication]
    if FUIAuth.defaultAuthUI()?.handleOpen(url, sourceApplication: sourceApplication as? String) ?? false {
      return true
    }
    return false
  }
}

这是我创建的子类：

class FUICustomAuthPickerViewController: FUIAuthPickerViewController,FUIAuthDelegate {

  override func viewDidLoad() {
    super.viewDidLoad()

    self.view.backgroundColor = .black
  }

  func authPickerViewController(forAuthUI authUI: FUIAuth) -> FUIAuthPickerViewController {
    return FUICustomAuthPickerViewController(nibName: "FUICustomAuthPickerViewController",
      bundle: Bundle.main,
      authUI: authUI)
  }
}

在 Firebase documentation for customization 上，他们说：

You can customize the sign-in screens by subclassing FirebaseUI's view controllers and specifying them in FUIAuth's delegate methods.

我是初学者，我该怎么做？

已编辑：

因此，按照 this link 上的说明，我设法通过创建 FUIAuthDelegate.

的扩展来向预建 UI 添加内容

extension LoginViewController:FUIAuthDelegate {
  func application(_ app: UIApplication, open url: URL,
    options: [UIApplicationOpenURLOptionsKey : Any]) -> Bool {
    let sourceApplication = options[UIApplicationOpenURLOptionsKey.sourceApplication]
    if FUIAuth.defaultAuthUI()?.handleOpen(url, sourceApplication: sourceApplication as? String) ?? false {
      return true
    }
    return false
  }

  func authPickerViewController(forAuthUI authUI: FUIAuth) -> FUIAuthPickerViewController {
    let vc = FUIAuthPickerViewController(authUI: authUI)

    let view = UIView(frame: .zero)
    view.backgroundColor = .black
    view.translatesAutoresizingMaskIntoConstraints = false
    vc.view.addSubview(view)

    NSLayoutConstraint.activate([
      view.heightAnchor.constraint(equalTo: vc.view.heightAnchor, multiplier: 1),
      view.widthAnchor.constraint(equalTo: vc.view.widthAnchor, multiplier: 1)])

    return vc
  }
}

原来子类不是必须的。但是，我似乎无法将我创建的这个视图作为背景，它要么覆盖所有内容，要么在 all.I 处什么都没有尝试直接更改视图的背景颜色，但没有用。有人知道怎么做吗？

Answer 1

使用此中提供的方法和评论之一解决了问题。事实证明，除了子类化之外，您还必须将以下两个方法添加到您的子类中才能使其工作。

    override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?, authUI: FUIAuth?) {
        super.init(nibName: nil, bundle: Bundle.main, authUI: authUI!)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

但是，我使用的方法（不确定其他方法是否会引发同样的问题）也导致了另一个问题 - 电子邮件登录按钮停止响应 - 此 link 通过呈现视图解决了这个问题带有 navigationViewController 的控制器，因为电子邮件登录按钮与导航栏一起工作，一旦您用 navigationViewController.

呈现视图，您就可以摆脱它

现在完整的子类如下所示：

import UIKit
import FirebaseUI

class FUICustomAuthPickerViewController: FUIAuthPickerViewController {

    override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?, authUI: FUIAuth?) {
        super.init(nibName: nil, bundle: Bundle.main, authUI: authUI!)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        let width = UIScreen.main.bounds.size.width
        let height = UIScreen.main.bounds.size.height

        let imageViewBackground = UIImageView(frame: CGRect(x: 0, y: 0, width: width, height: height))
        imageViewBackground.backgroundColor = .eatstrOrange

        view.insertSubview(imageViewBackground, at: 0)
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        navigationController?.setNavigationBarHidden(true, animated: animated)
    }

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        navigationController?.setNavigationBarHidden(false, animated: animated)
    }
}

这是主视图控制器：

import UIKit
import FirebaseUI

class LoginViewController: UIViewController{

    override func viewDidLoad() {
        super.viewDidLoad()

        let authUI = FUIAuth.defaultAuthUI()
        let delegate = authUI?.delegate
        authUI?.delegate = delegate
        let providers: [FUIAuthProvider] = [
          FUIGoogleAuth(),
          FUIEmailAuth(),
          FUIPhoneAuth(authUI:FUIAuth.defaultAuthUI()!)]
        authUI?.providers = providers

        let authViewController = FUICustomAuthPickerViewController(authUI: authUI!)
        authViewController.modalPresentationStyle = .fullScreen
        navigationController?.pushViewController(authViewController, animated: false)
    }
}

Final outcome

如何在 Swift 中自定义 Firebase 身份验证 UI

How to customize Firebase Authentication UI in Swift

swift

firebase-authentication

firebaseui