【Swift】FirebaseUIを使ったTwitterログイン機能の実装方法②

本記事は、
[【Swift】FirebaseUIを使ったTwitterログイン機能の実装方法①](https://qiita.com/Kai_82/items/629050db71731aeffef5)の続きになります。
①では、完成形やコードの全容について記載しております。

実装手順については、本記事をご覧ください。

#実装方法

実装方法について一から説明していきます。
バージョンの違いにより多少画面が異なる可能性がありますのでご了承ください。

また、Firebaseとアプリの連携は別記事でまとめていますのでそちらをご覧ください。
-> [Firebaseとアプリの連携手順](https://qiita.com/Kai_82/items/744cd9ecf5f6e2626137)

本記事は、そちらの記事を終了している前提で記載しています。

##Firebaseのプロジェクト作成
Firebaseコンソールを開きます。
`構築 > Authentication`を選択し、`始める`をクリックします。
![スクリーンショット 2021-01-13 7.17.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/84a9ced4-fa13-7cb0-5e4e-c0379e2eefff.png)
クリックすると次のような画面になります。
![スクリーンショット 2021-01-13 7.17.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/81387fdb-4d6e-085d-1603-8db6331d870f.png)
Twitterをクリックすると、次の画面が出てきますので、
`有効にする`にチェックを入れてTwitterログインを有効にします。
（APIキーとAPIシークレットは後ほど入力します。）
![スクリーンショット 2021-01-13 7.20.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/5dca80e6-d663-d044-3494-d68353c8ca13.png)

##Twitter Developersでアプリの作成
Twitter Developerにログインし`Overview`をクリックし下にスクロールします。
すると`+ Create App`ボタンがあると思うのでそちらをクリックします。
![スクリーンショット 2021-01-13 6.49.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/fae1abfe-7f71-bd36-adfe-e289b6ace3f9.png)
適当な名前を指定し作成します。
（名前が被っていると作成できません。）
![スクリーンショット 2021-01-13 7.27.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/81bdb5de-81a1-7975-eeb0-2040803ebaea.png)


##FirebaseとTwitter Developersの連携
作成出来ると次の画面に移動すると思います。
コチラの`API key`と`API secret key`を先ほどのFirebaseにコピペします。
![スクリーンショット 2021-01-13 7.28.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/b5d4bb22-3905-c668-1438-5d09f244361f.png)
それぞれ該当する箇所にコピペしてください。
![スクリーンショット 2021-01-13 7.30.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/22155b31-dadc-113b-f3ef-d8af91639d42.png)
Twitter Developersの方に戻り、`App settings`をクリックします。
![スクリーンショット 2021-01-13 7.31.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/a81d756f-c511-cf4c-dcb5-7b6c2d883deb.png)
`Authentication setting`の`Edit`をクリックします。
![スクリーンショット 2021-01-13 7.32.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/38567c5a-30e4-efc2-c875-02a4237f6a86.png)
`Enable 3-legged OAuth`を有効にします。
![スクリーンショット 2021-01-13 7.42.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/0d2755dd-8e4d-af55-d384-97ff7af1a1bf.png)
`Callback URLs`と`Website URL`を入力します。

Callback URLsには、先ほどのFirebaseのAPI keyやAPI secret keyを入力した箇所の下に
https://から始まるURLが記載されているのでそちらをコピペします。

Website URLには、自分のWebサイトのURLを入力します。
私は、はてなブログのURLを入力しましたが、そんなものない！という方は、
[ペライチ](https://ja.wix.com/html5webeditor/900-website?cq_term=%2B%E3%83%9A%E3%83%A9%E3%82%A4%E3%83%81&gclid=Cj0KCQiArvX_BRCyARIsAKsnTxNG7msLU8vp-d3FS1bqdRAEB0RvofWauYSH2GVkAjSPuQSYV4hbMY0aAgj7EALw_wcB&cq_cmp=716821134&cq_plt=gp&cq_plac=&cq_con=53001442285&cq_src=google_ads&cq_pos=&cq_net=g&cq_med=&utm_medium=cpc&experiment_id=%2B%E3%83%9A%E3%83%A9%E3%82%A4%E3%83%81%5Eb%5E290394948705%5E)というサイトで適当に作成しそちらのURLを貼ってください。
![スクリーンショット 2021-01-13 7.44.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/9d36752f-a831-83fe-6fb0-ce731b0be115.png)
入力後`save`をクリックします。
`3-legged OAuth is enabled`となっていればOKです！
![スクリーンショット 2021-01-13 7.49.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/797483/10b46bec-bccf-6003-963f-f914160835b0.png)
##アプリ内でログイン機能の実装
次にログイン機能の実装を行います。

ログイン機能を実装するために
`FirebaseUI`と`Firebase`をimportします。

```swift:ViewController.swift

import Firebase
import FirebaseUI
```

次に、authUIにデフォルトのUIをインスタンス化します。
それと、サポートするログイン方法を使用するように FirebaseUI を構成します。

また、画面読み込み時に`checkLoggedIn() `を呼び出すようにしています。
checkLoggedIn( )については後ほど説明します。

```swift:ViewController.swift

let authUI = FUIAuth.defaultAuthUI()
let providers: [FUIAuthProvider] = [
    FUIOAuth.twitterAuthProvider()
]

override func viewDidLoad() {
    super.viewDidLoad()
        
    authUI!.delegate = self
    authUI!.providers = providers
        
    checkLoggedIn()    
}
```

`authUI!.delegate = self`でエラーが出るのでFIXします。
（FUIAuthDelegateプロトコルに準拠していないためエラーが出ます。）

下記のようにプロトコルが追加されるはずです。

```swift:ViewController.swift

class ViewController: UIViewController, FUIAuthDelegate { }
```

viewDidLoadで呼ばれるcheckLoggedIn( )ですが、
ユーザが追加されているかどうかをチェックします。

`Auth.auth().addStateDidChangeListener{ }`で
ユーザが存在した場合は`user`に情報を格納します。

存在しない場合はnilが返されるので、
`self.login()`が実行されます。

```swift:ViewController.swift
func checkLoggedIn() {

    Auth.auth().addStateDidChangeListener{auth, user in
        if user != nil{
            print("success")
        } else {
            print("fail")
            self.login()
        }
    }
}
```

login( )では画面遷移の処理を行います。

`let authViewController = authUI!.authViewController()`で
定数authViewControllerにViewの情報を代入しています。

その後のpresent( )で画面遷移を行っています。

```swift:ViewController.swift

func login() {
    let authViewController = authUI!.authViewController()
    self.present(authViewController, animated: true, completion: nil)
}
```

#さいごに
一応これでログインの機能は実装することが出来ます。

しかし、ログイン画面が英語で合ったり、フルスクリーンでなかったりと、
カスタムしないと少し使い勝手が悪いかなと思いました。

一応、Firebaseとアプリの連携と
実装方法①〜②を順番に行えばTwitterログインを実装出来るはずです！

バージョンの違いにより画面の状態やコードの違いなどが出てくるかもしれませんので、
その時は自分で調べて実装してみてください！

かなり長くなってしまいましたが最後までご覧いただきありがとうございました。

#参考
・[FirebaseUI で iOS アプリに簡単にログインを追加する](https://firebase.google.com/docs/auth/ios/firebaseui?hl=ja#sign_in)
・[Twitter loginを実装](http://tech.innovation.co.jp/2018/02/26/Firebae-Ui.html)
・[Firebaseとアプリの連携手順](https://qiita.com/Kai_82/items/744cd9ecf5f6e2626137)