Firebase Authentication について (FirebaseUI)

2019.10.07

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();

すると、デフォルトのものではなく、ここで定義したレイアウトの画面が表示されます。