【Swift】初めてのFirebase　FirebaseAuthでログイン機能を実装しよう

# はじめに
[Life is Tech！Members Advent Calendar 2020](https://qiita.com/advent-calendar/2020/life-is-tech-members) の25日目を担当します！わくわくさんです！([@sugijotaro](https://twitter.com/sugijotaro))
普段はiPhoneアプリ作ったり、Unity触ってみたり、映像作ったりしてます。

この記事では、Firebaseプロジェクトの始め方、Xcodeの下準備、Firebaseの認証のやり方について解説します！

# Firebaseとは
Firebaseとは、Googleが提供しているアプリ開発者向けのサービスで、ログイン認証やオンラインでのデータ管理などを簡単に実装することができます。

認証機能やデータベースを必要とするアプリの開発や、チャットアプリの開発などができます！

# Firebase SDKをインストールする
FirebaseをiOS開発で使うには、まずプロジェクトファイルにFirebase SDKをインストールしましょう！

## 1.Firebaseのプロジェクトを作成する
[Firebase](https://console.firebase.google.com/)にアクセスして、**プロジェクトを追加**をクリック
![Firebase](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/7a0f36f0-6877-c7e0-0df6-b7e6e4a46969.png)
任意のプロジェクト名を入力して、**続行**
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/35a4b956-d59e-c5e8-2b7a-6e6ff644770e.png">
Googleアナリティクスを有効にするかどうかを決めて、**続行**
(おすすめは有効)
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/8b3f0f8b-5575-9597-83e3-e57c9878ac64.png">
Googleアナリティクスのアカウントを選択（大抵の場合はDefault Account for Firebase）して、**プロジェクトを作成**
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/ddfe0574-afba-2f66-bcc2-18f69ffe5b20.png">
するとこのようなページにリダイレクトされます。
これでプロジェクト作成完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/e5f9df8c-bb95-fe71-a222-0e069ea4a79b.png)

## 2.アプリをFirebaseに登録する
ここからは、FirebaseとXcodeのプロジェクトファイルを紐付けしていきます。

Firebaseコンソールの、**iOS**のボタンをクリックします。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/0130de05-9760-3486-74fb-b50746668c71.png">
オプション画面が開いたら、iOSバンドルIDの欄にXcodeプロジェクトのBundle Identifierをコピペして、**アプリを追加**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/1f062a53-4936-b88d-1d3c-129114a427b4.png)
GoogleService-Info.plistをダウンロードして、 Xcodeのプロジェクトにドラッグ＆ドロップで追加します。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/bed1d9e9-a351-da6c-3180-c1271874c2f7.png">
ここまでできたらXcodeを閉じましょう。
## 3.アプリにFirebase SDKを追加する
FirebaseのSDKを追加する方法はいくつかあるのですが、今回は一番シンプルで簡単な、CocoaPodsを使用する方法で追加していきます。

FinderでXcodeのプロジェクトフォルダまで移動して、右クリック>サービス>**フォルダに新規ターミナル**を選択してターミナルを開きましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/83b0acdc-3189-5517-89ca-2a56b25c5d0c.png)
ターミナルに`pod init`と打って、Enterを押します。
しばらく待つと、プロジェクトフォルダの中にPodfileというファイルが現れるので、これをエディターなどで開きます。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/6778709e-8285-9f92-71a2-0d5faa473430.png">
開いたら、`# Pods for FirebaseApp`の下に、
`pod 'Firebase/Analytics'`を追加して、保存します。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/6c96ea2e-fcd3-a2de-7bd1-75863c151150.png">
保存したら、ターミナルに戻って`pod install`を実行します。
すると、プロジェクトフォルダの中に**.xcworkspaceファイル**が生成されます。
今後の開発では.xcodeprojファイルは使わずに**.xcworkspaceファイル**を使っていきます。
##4.初期化コード追加
**.xcworkspaceファイル**を開いて、**AppDelegate.swift**を開き、`import Firebase`と`FIRApp.configure()`を追記します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/0dde71ac-fa43-41ea-3f85-81a195cfa72c.png)

これでFirebaseを使った開発の準備が整いました！

# FirebaseUIでログイン機能をつける
FirebaseUIを使えば簡単にログイン機能を実装することができます！
今回は**Sign in with Google**と**Sign in with Apple**を実装していきます。
(アプリをリリースする場合、サードパーティーのログイン連携をしているアプリはSign in with Appleの実装が必須です！ https://qiita.com/akatsuki174/items/77734fb95b74cfa5cdad)

## 1.Podfile更新
Podfileを開いて、`pod 'FirebaseUI'`を書き込み、準備の時と同じようにターミナルで`pod install`を実行してください。
## 2.FirebaseでAuthenticationを有効にする
FirebaseのコンソールからAuthenticationを選択し、**始める**をクリック
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/0dce5f36-4c85-ca75-df85-6e5c25d0d340.png">
### Sign in with Apple
Sign-in methodからAppleを選択して、**有効にする**のチェックを入れ、**保存**をクリックします。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/321d3332-53c1-966b-7191-7cdfd68c349c.png">
### Sign in with Google
Sign-in methodからGoogleを選択して、**有効にする**のチェックを入れ、**プロジェクトの公開名**と**サポートメール**を入力して、**保存**をクリックします。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/137e312c-5bc2-4235-8ca5-2d2f0a262389.png">
次に、`GoogleService-Info.plist`内の`REVERSED_CLIENT_ID`をコピーし、URLスキームにペーストします。
URLスキームは左下の**+ボタン**から追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/11d557fa-6630-005d-a50d-a72f61aa88af.png)

`AppDelegate.swift`を開いて、以下を追記します

```swift:AppDelegate.swift
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
    }
```


これで下準備は完了です！

##3.コーディング
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/e8fb559e-585a-fb8f-9316-89c415ac4f19.png)
SegueのIdentiferはtoNextView

```swift:ViewController.swift
import UIKit
import FirebaseUI

class ViewController: UIViewController, FUIAuthDelegate {

    var authUI: FUIAuth { get { return FUIAuth.defaultAuthUI()!}}
    // ログインの認証をするプロバイダを選択
    let providers: [FUIAuthProvider] = [FUIOAuth.appleAuthProvider(),FUIGoogleAuth()]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.authUI.delegate = self
        self.authUI.providers = providers
    }

    @IBAction func LoginButtonTapped(){
        // FirebaseUIのViewの取得
        let authViewController = self.authUI.authViewController()
        // FirebaseUIのViewの表示
        self.present(authViewController, animated: true, completion: nil)
    }
    
    public func authUI(_ authUI: FUIAuth, didSignInWith user: User?, error: Error?){
        if error == nil {
            //認証成功
            self.performSegue(withIdentifier: "toNextView", sender: nil)
        } else {
            //認証失敗
            print(error!)
        }
    }

}
```
完成！！これで**ログイン機能**をつけることができましたね！
![88035b1020c6307c3fdc85f909988d5b.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/ab36d674-ddf9-9d56-cd67-3371209406c9.gif)

#さいごに

Firebaseを使えば、オンラインのデータ管理や認証などのめんどくさい部分を全てFirebaseに丸投げできるので、早く簡単にアプリを実装することができます！
Firebaseを使いこなして、素晴らしいアプリを作りましょう！