参考URL

基本的には公式ドキュメントを参考にしましたが端折られている部分もあったので、こちらのQiitaの記事も合わせて参考にしました。

導入

cocoapodsでインストールします。cocoapodsの使い方については割愛します。そのあとは下の画像のような感じでかなり親切にやってくれます、簡単に導入できました。 FireBase installed image

共通部分

AppDelegateに追記。公式ドキュメントに従ってdidFinishLaunchingWithOptionsに書くとエラーになるので注意。尚、このことは公式ドキュメントでは言及されていない。

import Firebase
import FirebaseAuthUI
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    //以下追記
    override init() {
        super.init()
        FirebaseApp.configure()
    }

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

        // other URL handling goes here.
        return false
    }

ツイッターログイン

1. Twitterログインの有効化

developer.twitter.comからapiKeyとTokenを取得する必要があります。使用用途などについて300文字くらい書かされてクッソめんどかったです。まぁ無料で使わせてもらってるので大人しく感謝します。先ほどのリンクからアプリを登録したあと、FirebaseAuthのコンソールからそれぞれのキーを登録・有効化しましょう。 TwitterLoginConfig

2. TwitterのコールバックURLを設定

  • twitterkit-CONSUMERKEY(CONSUMERKEYの部分はdeveloper.twitter.comから各自参照)
  • 上の画像のURL 以上二つをdeveloper.twitter.comのアプリのコールバックURLに設定します。 Image from Gyazo

    3. URLスキームの登録

    Xcodeのworkspace→target→Infoの「URL Types」からURLスキームを登録します。 Image from Gyazo twitterkit-CONSUMERKEYという形で入力します。ConsumerKeyもdeveloper.twitter.comから参照できます。

3. 実装

AppDelegateのdidFinishLaunchingWithOptionsに以下のように記述。引数は各自入力しましょう。

import TwitterKit
~~~~~~~~~~~~~~~
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        //Twitterログイン
        TWTRTwitter.sharedInstance().start(withConsumerKey: "CONSUMERKEY", consumerSecret: "SECRET")
        return true
    }

続いてAppDelegateのapplicationに記述。ここも公式に書いてなくてわからんかったです。

    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any]) -> Bool {
        let sourceApplication = options[UIApplication.OpenURLOptionsKey.sourceApplication] as! String?
        if FUIAuth.defaultAuthUI()?.handleOpen(url, sourceApplication: sourceApplication) ?? false {
            return true
        }
    //ツイッターログイン
        if TWTRTwitter.sharedInstance().application(app, open: url, options: options) {
            return true
        }

        // other URL handling goes here.
        return false
    }

Googleログイン

こちらは簡単Firebase コンソールで [Authentication] セクションを開き、Google ログインを有効にします。 XCodeのURLスキームにGoogleService-Info.plistのREVERSED_CLIENT_IDを登録します。ツイッターと同じ要領で追加すればおk。

ログイン画面の実装

FirebaseAuthUIというライブラリがUIのテンプレを用意してくれているのでこれを使う。 Image from Gyazo

1. FirebaseUIの導入

FirebaseUIを導入する。Podfileに以下を記述。

pod 'Firebase/Auth'
//以下追記部分
pod 'FirebaseUI/Auth'
pod 'FirebaseUI/Google'
pod 'FirebaseUI/Twitter'

2. ログイン画面の実装と遷移

import FirebaseAuthUI
import FirebaseTwitterAuthUI
import FirebaseGoogleAuthUI
~~~~~
class ViewController: UIViewController {
  private var authUI = FUIAuth.defaultAuthUI() //authUIの初期化
  private let providers: [FUIAuthProvider] = [
        //ここでプロバイダの追加を行う
        FUITwitterAuth(),
        FUIGoogleAuth()
    ]
    override func viewDidLoad() {
        super.viewDidLoad()
        authUI.providers = providers //プロバイダをセット
    }

といった感じでログインできるプロバイダを追加してあげて、後はお決まりのやつで遷移できます。

let authVC = authUI.authViewController() //ログイン画面のインスタンス化
present(vc, animated: true, completion: nil)

ログイン状態か否かの判定について

viewWillAppearでaddStateChangeListenerを呼ぶことで判定します。ログイン状態でないときはuserがnilになります。

    override func viewWillAppear(_ animated: Bool) {
        Auth.auth().addStateDidChangeListener { (auth, user) in
            if let user = user {
                print(user)
            } else {
                self.login() //nilなのでログインさせる
            }
        }
    }

ログイン後の処理について

FUIAuthのDelegateメソッドが用意されています。こんな感じで実装できます。

extension ViewController: FUIAuthDelegate {
    func authUI(_ authUI: FUIAuth, didSignInWith authDataResult: AuthDataResult?, error: Error?) {
        if let error = error {
            //エラー処理
            print(error)
        }
        //ログイン後の処理
    }
}

viewDidLoadとかでdelegateの宣言も忘れずに。

   authUI.delegate = self

カスタマイズ

FUIAuthDelegateメソッドでUIのカスタマイズが可能です。詳しく書く。