FirebaseUI-demo(swift版)を試してみました


# はじめに
Firebaseには複数の認証方法が用意されています。
* パスワード認証　
* Googleログイン
* Facebookログイン
* Twitterログイン

これらのログイン方法を個別に実装することもできますが、これらのログイン方法を統一的なUIで提供する[firebase/FirebaseUI](https://github.com/firebase/FirebaseUI)がオープンソースライブラリとして公開されています。FirebaseUIは、Android版、iOS版、Web版があります。

この中のiOS(Swift版)を試してみました。

[firebase/FirebaseUI-iOS](https://github.com/firebase/FirebaseUI-iOS)を参考にFirebaseUI-demo(swift版)のサンプルアプリプロジェクトを取得し、Facebookログインを使ってログインするところまで実行しました。


# サンプルプロジェクトの取得
ポイントは、```pod try FirebaseUI```です。このコマンドを実行するとサンプルアプリのプロジェクトを取得出来ます。

```
$ git clone https://github.com/firebase/FirebaseUI-iOS.git
Cloning into 'FirebaseUI-iOS'...
$ cd FirebaseUI-iOS
$ pod try FirebaseUI
```

Podのインストールログがターミナル上に表示された後、objective-c版サンプルを取得するかswift版サンプルを取得するか聞かれます。2を選択しました。
```
$ ...
$ Trying FirebaseUI
1: FirebaseUIFrameworks/samples/objc/FirebaseUI-demo-objc.xcodeproj
2: FirebaseUIFrameworks/samples/swift/FirebaseUI-demo-swift.xcodeproj
Which project would you like to open
```

Xcodeでプロジェクトを開くところまで実行してくれます。

```
Performing CocoaPods Installation
Fetching podspec for `FirebaseUI` from `https://raw.githubusercontent.com/firebase/FirebaseUI-iOS/master/FirebaseUI.podspec`

Installing Bolts (1.8.4)
...
Opening '/private/var/folders/bm/gfw2hl4d3zv5f29zchj4p_z40000gn/T/CocoaPods/Try/FirebaseUI/FirebaseUIFrameworks/samples/swift/FirebaseUI-demo-swift.xcworkspace'
```


# プロジェクト設定

取得したプロジェクトにFacebookログイン情報を設定します。
Twitterログインも同様にできるようですが試していません。

## Facebookアプリの設定をします 
Facebookログイン用のアプリを作成します。
アプリIDとシークレットキーをメモしておきます。

## FirebaseコンソーでFaceebook認証の設定をします
[iOS で Facebook ログインを使用して認証する  \|  Firebase](https://firebase.google.com/docs/auth/ios/facebook-login?hl=ja)を参考にFirebaseコンソールにおいてFaceebook認証の設定を行います。
FacebookアプリのIDとシークレットキーを設定します。

![Firebase_Console_facebook.png](https://qiita-image-store.s3.amazonaws.com/0/5247/f30eb96c-ec03-0cc8-091e-7d7e2f6ce677.png "Firebase_Console_facebook.png")


## info.plistのUrl Typesを編集します。
* REVERSED_CLIENT_IDをGoogleService-Info.plistの値に変更します
* fb{your-app-id}のFacebook AppのIDを設定します

![FirebaseUI_Info_plist.png](https://qiita-image-store.s3.amazonaws.com/0/5247/0c8d38f9-53e8-e383-ad63-8a9bd79f50cf.png "FirebaseUI_Info_plist.png")

# 実行
FirebaseUIアプリを実行します。
エラーが出なければ成功です。

* Authをタップします
* Sign Inボタンをタップします
* Facebookのログイン情報を設定します

![FacebookUI_Auth.png](https://qiita-image-store.s3.amazonaws.com/0/5247/5e89f391-637b-230f-034a-68382fb41294.png "FacebookUI_Auth.png")


![FacebookUI_Signin.png](https://qiita-image-store.s3.amazonaws.com/0/5247/44cbed70-5453-1586-030c-8cc70bf069a4.png "FacebookUI_Signin.png")

![FacebookUI_Auth_Facebook.png](https://qiita-image-store.s3.amazonaws.com/0/5247/0468e96c-0354-f712-daf4-b8f65bf4656d.png "FacebookUI_Auth_Facebook.png")

![FacebookUI_Signin_Facebook.png](https://qiita-image-store.s3.amazonaws.com/0/5247/468fbbee-dc48-dd29-376c-78838b14bf4c.png "FacebookUI_Signin_Facebook.png")

![FacebookUI_Signin_Facebook2.png](https://qiita-image-store.s3.amazonaws.com/0/5247/b2696184-ef79-17b3-1c92-c3f21e54d0be.png "FacebookUI_Signin_Facebook2.png")

![FacebookUI_Signin_Facebook3.png](https://qiita-image-store.s3.amazonaws.com/0/5247/b4e4cc60-7359-fbf0-9dd8-83fde301454d.png "FacebookUI_Signin_Facebook3.png")

![FacebookUI_Signin_Facebook4.png](https://qiita-image-store.s3.amazonaws.com/0/5247/dfe9f797-e8a4-f2bf-68f4-b9528a3e9ebb.png "FacebookUI_Signin_Facebook4.png")

# 参考
* [firebase/FirebaseUI](https://github.com/firebase/FirebaseUI)
* [firebase/FirebaseUI-iOS](https://github.com/firebase/FirebaseUI-iOS)
* [iOS で Facebook ログインを使用して認証する  \|  Firebase](https://firebase.google.com/docs/auth/ios/facebook-login?hl=ja)
* [ios \- Facebook SDK: app not registered as a URL Scheme \- Stack Overflow](http://stackoverflow.com/questions/21893447/facebook-sdk-app-not-registered-as-a-url-scheme)