FirebaseUI について
FirebaseUI とは、Firebase Authentication のログイン画面を簡単に作ることができるオープンソースのライブラリです。
Firebase Authentication の各種認証方法に対応しています。
ログイン画面のデザインは予め決まった物となっていますが、テーマなどを変更することができます。
機能の有効化
使用したい認証方法ごとに、Firebase コンソールで有効化する必要があります。
幾つかの認証方法の有効化手順については、過去の記事で紹介しましたので参考にして下さい。
Google 認証を使う場合は、SHA-1 フィンガープリントを登録する必要があります。
もし、実行時に「code:10 message:10」のようなエラーが出た場合は、この設定がされているかチェックしてみて下さい。
また、アプリレベルの build.gradle に以下の依存関係を追加する必要があります。
implementation 'com.firebaseui:firebase-ui-auth:4.3.1'
ログイン画面への遷移処理
以下のコードのようにインテントを作成し、startActivityForResult メソッドを呼び出すことで、ログイン画面に遷移します。
このコードは、ログインボタンのコールバックなどに実装すると良いかと思います。
List<AuthUI.IdpConfig> providers = Arrays.asList(
new AuthUI.IdpConfig.EmailBuilder().build(),
new AuthUI.IdpConfig.PhoneBuilder().build(),
new AuthUI.IdpConfig.GoogleBuilder().build());
Intent signIn = AuthUI.getInstance()
.createSignInIntentBuilder()
.setIsSmartLockEnabled(false)
.setAvailableProviders(providers)
.setLogo(R.drawable.my_great_logo)
.setTheme(R.style.GreenTheme)
.setTosAndPrivacyPolicyUrls(
"https://example.com/terms.html",
"https://example.com/privacy.html")
.build();
startActivityForResult(signIn, RC_SIGN_IN);
providers リストに、使用したい認証方法を追加します。
説明の簡略化のために省略していますが、Twitter や Facebook 認証を使う場合は、このリストに追加します。
このリストに、1つだけ認証方法をセットした場合は、認証方法を選択する画面はスキップして、認証画面に直接遷移します。
createSignInIntentBuilder メソッドでインテントを作成していますが、その後に、設定のための set メソッドが連なっています。
設定が不要の場合は、これらの set メソッドは省略できます。
setIsSmartLockEnabled は、スマートロックの機能の有効無効を切り替えます。
setLogo は、ログイン画面にロゴを表示します。
setTheme は、テーマを変更します。
setTosAndPrivacyPolicyUrls は、利用規約とプライバシーポリシー画面へのリンクを作成します。
画面遷移すると、以下のようなログイン画面が表示されます。



電話番号認証をエミュレータ上で行った際は、「This app is not authorized to use Firebase Authentication. ……」の様なエラーが出ます。Firebase コンソールの Authentication→ログイン方法→電話番号→テスト用の電話番号 のところに電話番号をセットしておくと、エミュレータでテストできます。
ログイン結果の受け取り
ログイン画面で、ユーザがログインに成功したりキャンセルしたりした場合、以下のコールバック関数が呼び出されます。
public void onActivityResult(int requestCode, int resultCode, Intent data)
{
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == RC_SIGN_IN) {
IdpResponse response = IdpResponse.fromResultIntent(data);
if (resultCode == RESULT_OK) {
FirebaseUser user = FirebaseAuth.getInstance().getCurrentUser();
Log.d(TAG, "FirebaseUI signin success : " + user.getUid());
} else {
if (response == null) {
Log.d(TAG, "FirebaseUI signin cancelled");
} else {
Log.d(TAG, "FirebaseUI signin failed : " + response.getError());
}
}
}
}
テーマの変更
テーマを設定することで、ログイン画面の見た目を変えることができます。
例えば、以下のようにスタイルを定義し、インテント作成時に setTheme メソッドを呼び出します。
<style name="GreenTheme" parent="FirebaseUI">
<!-- Required for sign-in flow styling -->
<item name="colorPrimary">@color/material_green_500</item>
<item name="colorPrimaryDark">@color/material_green_700</item>
<item name="colorAccent">@color/material_purple_a700</item>
<item name="colorControlNormal">@color/material_green_500</item>
<item name="colorControlActivated">@color/material_lime_a700</item>
<item name="colorControlHighlight">@color/material_green_a200</item>
<item name="android:windowBackground">@color/material_green_50</item>
</style>
<color name="material_green_50">#E8F5E9</color>
<color name="material_green_500">#4CAF50</color>
<color name="material_green_700">#388E3C</color>
<color name="material_green_a200">#69F0AE</color>
<color name="material_lime_a700">#AEEA00</color>
<color name="material_purple_a700">#AA00FF</color>
レイアウトの変更
ログイン画面 (認証方法を選択する画面) のレイアウトを変更することができます。
各認証画面に遷移するためのボタンを配置した、以下のようなレイアウトファイルを用意します。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/EmailButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Email" />
<Button
android:id="@+id/PhoneButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Phone" />
<Button
android:id="@+id/GoogleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Google" />
</LinearLayout>
そして、以下のようにインテントを作成します。
AuthMethodPickerLayout customLayout = new AuthMethodPickerLayout
.Builder(R.layout.custom_auth)
.setEmailButtonId(R.id.EmailButton)
.setPhoneButtonId(R.id.PhoneButton)
.setGoogleButtonId(R.id.GoogleButton)
.build();
Intent signIn = AuthUI.getInstance()
.createSignInIntentBuilder()
// ...
.setAuthMethodPickerLayout(customLayout)
.build();
すると、デフォルトのものではなく、ここで定義したレイアウトの画面が表示されます。