Android FirebaseUIを使ったFirebase Authentication（Facebook認証）

業務でFirebase Authenticationを触る機会があったので備忘録として残します．
FirebaseUIを使っています．使わなくてもできるので，お好きな方法で．


# 準備
## Firebaseアプリを作成する
コンソール画面にて，（初めての場合の画像を貼り付けておきます）Androidアプリを追加しましょう
<img width="1446" alt="スクリーンショット 2017-10-11 17.28.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/98896/baff5db9-9606-4f2a-c654-d2fd0fa3c94d.png">

署名証明書に関しては[こちら](https://developers.google.com/android/guides/client-auth)に書いてあります．

## Facebookアプリを作成する
[facebook developer](https://developers.facebook.com/)にログインして，新しいアプリを作成しましょう．

<img width="936" alt="スクリーンショット 2017-10-11 17.53.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/98896/77c12bb8-bbd0-a96d-533d-9ae66029501e.png">

赤く塗りつぶしてあるところに`APP_ID`が記載されてあるので，メモ．
表示ボタンを押して，表示される`APP_SECRET`もメモ．

## FirebaseアプリのFacebook認証を有効にする
左のメニューからAuthenticationを選択し，ログイン方法に入ります．
Facebookの有効にします．

<img width="1103" alt="スクリーンショット 2017-10-11 18.00.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/98896/c29b0614-3104-2744-c297-27d56d9032f3.png">

さきほどメモした`APP_ID`と`APP_SECRET`をこちらに入力して保存しましょう．

## Firebase UI Tips

# Androidアプリを作成する
## SDKインストール
- Firebase Auth SDK
- Fackbook SDK
- Firebase UI

の３つのSDKをgradleに追記します．

### Firebase Auth SDK

```app/build.gradle
dependencies {
     implementation "com.google.firebase:firebase-auth:$GOOGLE_SERVICE_VERSION"
}

```

`app`直下の`build.gradle`に，追記します．
バージョンは最新の安定版をいれましょう．

### Facebook SDK

```project/build.gradle
...

buildscript {
    repositories {
        mavenCentral()
    }
}

...
```

プロジェクト直下の`build.gradle`に上記を追記します．

```app/build.gradle
dependencies {
     // Facebook SDK
     implementation "com.facebook.android:facebook-login:$FACEBOOK_SDK_VERSION"
}
```

`app`直下の`build.gradle`に追記します．

### Firebase UI

```app/build.gradle
dependencies {
     // Firebase UI
     implementation "com.firebaseui:firebase-ui-auth:$FIREBASE_UI_VERSION"
}
```

`app`直下の`build.gradle`に追記します．

追記し終わったらSyncしましょう．

# Facebook認証処理
## debug.keystoreを準備
```
keytool -genkey -v -keystore debug.keystore -alias androiddebugkey -keyalg RSA -validity 10000 -dname "CN=Android Debug,O=Android,C=US"
```
`C=`のパラメータは日本にしたければ`JP`としておきましょう．
Facebookアプリの署名証明書の欄に登録するキーハッシュを取り出したければ

```
openssl sha1 -binary keystore/debug.keystore | openssl base64
```

で取り出せます．

## Layout
ログインボタン付きのレイアウトファイルを作成します．

```activity_login.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  >

  <android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="tsun.kettsun.component.activity.LoginActivity"
    >

    <Button
      android:id="@+id/login_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="facebook"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      />
  </android.support.constraint.ConstraintLayout>

</layout>
```


## Activity
Activityを準備します．

```LoginActivity.kt
class LoginActivity : AppCompatActivity() {

    private val binding: ActivityLoginBinding by lazy {
        DataBindingUtil.setContentView<ActivityLoginBinding>(this, R.layout.activity_login)
    }

    private val onClicked = View.OnClickListener {
        startActivityForResult(
                AuthUI.getInstance().createSignInIntentBuilder()
                        .setAvailableProviders(listOf(AuthUI.IdpConfig.Builder(AuthUI.FACEBOOK_PROVIDER).build()))
                        .build(), 100)
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding.loginButton.setOnClickListener(onClicked)
    }
}
```

もちろん`AndroidManifest.xml`にも追記しましょう．


## 動かしてみる
以下の画面が出て，ボタンをクリックするとFacebookの認証画面に飛べれば成功です．

![スクリーンショット 2017-10-12 10.34.32.png](https://qiita-image-store.s3.amazonaws.com/0/98896/39d5995a-e95a-1599-28bc-d7188480ad18.png)

実際に認証すれば，Firebaseからもユーザを確認でき，Authenticationの導入が完了していることがわかると思います．

## まとめ
- FirebaseUIを使えば簡単にFacebook経由のFirebase Authenticationができる
- onActivityResultを実装すれば，レスポンスから認証に使ったサービスのアクセストークンが取れる
    - もし，任意のタイミングで取得したい場合にはfacebook　sdkから取りましょう
- `AuthUI`に複数の`Provider`を渡せば以下のように何でログインするか選択する画面をFirebaseUIが勝手に生成して挟んでくれる

 ![スクリーンショット 2017-10-12 10.44.42.png](https://qiita-image-store.s3.amazonaws.com/0/98896/5b1a18f7-96e3-d131-bffd-72c995820d1f.png)

- しかし，上のプロバイダ選択画面のUIは柔軟性が低く，変更できる部分は限られている
    - Statusbarの色
    - Toolbar(Actionbar)の色
    - backgroundColor
    - 中央のロゴアイコン
- ただ，呼び出して，コールバックを設定するだけで使えるっていうのはとても楽でした．