FirebaseUIでアプリにログイン〜UIkit メールリンク認証・GoogleSignIn~

Last updated at 2023-10-15Posted at 2023-10-15

Firebase UIとは

FirebaseUIを用いることで簡単にメールリンク、Google、Appleアカウント、Facebook等でアプリにログインすることができるFirebase Authentication SDK の上に構築されるライブラリです。
今回は下記のようなメールリンク認証とGoogleSignInの実装方法について説明します。

参考文献

Firebase SPMの追加

●下記の2つのSPMを追加

https://github.com/firebase/firebase-ios-sdk

参考文献

https://github.com/firebase/FirebaseUI-iOS.git

参考文献

● Firebase console上のAuthenticationのメール認証とGoogle認証を有効にする
※Google認証を有効にした後、GoogleService-Info.plistのファイルをダウンロードし、Xcode上のファイルを置き換える。

参考文献

コードでFirebaseUIの実装

AppDelegaye.swift

import UIKit
import FirebaseCore
import FirebaseAuthUI


@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        //🟥 コードを追加
        FirebaseApp.configure()
        return true
    }

//🟥下記のメソッドを追加
    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {

        guard let sourceApplication = options[.sourceApplication] as? String? else { fatalError() }

        if FUIAuth.defaultAuthUI()?.handleOpen(url, sourceApplication: sourceApplication) ?? false {

            return true
        }
        return false
    }
}

ViewController.swift

import UIKit
import FirebaseAuthUI
import FirebaseGoogleAuthUI
import FirebaseEmailAuthUI

//ViewControllerをFUIAuthDelegateプロトコルに対
class ViewController: UIViewController, FUIAuthDelegate {
    //FUIAuthのインスタンスを取得
    let authUI = FUIAuth.defaultAuthUI()

    override func viewDidLoad() {
        super.viewDidLoad()
        setupFirebaseUI()
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        guard let authViewController = authUI?.authViewController() else { return }
        //🟩1. フルスクリーン表示に
        authViewController.modalPresentationStyle = .fullScreen
        self.present(authViewController, animated: true)
    }

    private func setupFirebaseUI() {
        //delegate先をViewControllerに
        authUI?.delegate = self
        let emailAuthProvider = FUIEmailAuth()
        let googleAuthProvider = FUIGoogleAuth(authUI: authUI!)
        let providers: [FUIAuthProvider] = [emailAuthProvider, googleAuthProvider]
        authUI?.providers = providers
        //🟩2.Cancelを非表示に
        authUI?.shouldHideCancelButton = true
    }
    //🟩カスタムしたクラスを割り当てる
    func authPickerViewController(forAuthUI authUI: FUIAuth) -> FUIAuthPickerViewController {
        return CustomAuthPickerViewController(authUI: authUI)
    }

    //認証結果を受け取る際に呼ばれる関数
    func authUI(_ authUI: FUIAuth, didSignInWith user: User?, error: Error?) {

        if let _ = user {
            print("sucess")
            // ログイン成功処理
        }
        else {
            print("error")
            // ログイン失敗処理
        }
    }
}

🟩FirebaseUIをカスタムしたい！

今回は下記のようなカスタムを行いました！

フルスクリーン表示にする
Cancelボタンを非表示にする
Navigationのtitleをようこそからサインインに変更
背景色を変更
FirebaseUIのボタンを英語表示から日本語表示に変更

●FUIAuthPickerViewController を継承したクラスを作成することでカスタム

ViewController.swift

//🟩 カスタムする
class CustomAuthPickerViewController: FUIAuthPickerViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.subviews[0].subviews[0].subviews[0].subviews.forEach { (view: UIView) in
            // 一旦上に乗ってるViewを透明にする
            let scrollView = self.view.subviews[0]
            scrollView.backgroundColor = .clear
            let contentView = scrollView.subviews[0]
            contentView.backgroundColor = .clear
            //🟩4.背景色を変更
            self.view.backgroundColor = .yellow
        }
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        //🟩3.タイトルはサインインに変更
        self.title = "サインイン"
    }
}