Firebase

【iOS】Firebaseでログイン機能を実装する手順

自前での実装だと面倒なログイン機能とUIを提供してくれるFirebaseAuthUIを使った例を紹介しています。

前書き

この記事は数年前に書かれたものです。了承ください。今と違う部分もあるかもしれませんが、大枠は同じと思います。

参考にした記事

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

導入

ライブラリをcocoapodsでインストールします。(cocoapodsの使い方については割愛)。基本的にはコンソールの指示に従うとインストールできるはずです。指示が親切なので迷うこともないかと思います。

FireBase installed image

各種SNSログインの実装方法
  • Google
  • Twitter
  • Facebook

上記のSNSを使ったログインの実装方法を解説します。TwitterとFacebookは少し手間がかかります。

共通

どのSNSログインを実装するにおいても共通して必要な作業があるので先に済ませておきます。AppDelegateに追記をしておきます。公式ドキュメントに従ってdidFinishLaunchingWithOptionsに書くとエラーになるので注意します。

import Firebase
import FirebaseAuthUI //ログインUIのテンプレートを使う場合はこちらも追記
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

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

//ログインUIのテンプレートを使う場合はこちらも追記
    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
    }

Googleログイン

FirebaseはGoogleが提供しているサービスだからか、Googleログインの実装は簡単です。Firebase コンソールで [Authentication] セクションを開き、Google ログインを有効にします。 XCodeのURLスキームにGoogleService-Info.plistのREVERSEDCLIENTIDを登録します。ツイッターと同じ要領で追加すればおk。

Twitterログイン

1. apiKeyとTokenを取得する

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

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

3. URLスキームの登録

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

4. 実装

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
    }

Facebookログイン

追記予定

補足: ログイン状態の判定について

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

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

続いてログイン画面を実装していきます。今回は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)

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

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

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

viewDidLoadでdelegateの宣言も忘れずに行っておきましょう。

   authUI.delegate = self

UIのカスタマイズ

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

読んでいただきありがとうございます!!

記事として取り上げたトピックを体系化してまとめた内容を電子書籍として販売しています。購入していただくことで執筆の応援ができます。詳細はこちらから