如何在 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 上，他们说：

您可以通过继承 FirebaseUI 的视图控制器并在 FUIAuth 的委托方法中指定它们来自定义登录屏幕。

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

已编辑：

因此，按照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
  }
}

原来子类不是必须的。但是，我似乎无法将我创建的这个视图作为背景，它要么覆盖所有内容，要么根本不覆盖任何内容。我尝试直接更改视图的背景颜色，但没有奏效。有人知道怎么做吗？

Answer 1

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

    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 中通过向视图控制器显示 @ 987654325@，因为电子邮件登录按钮与导航栏一起使用，您可以在使用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