イー・エージェンシーはマーケティングデータ活用でビジネス課題を解決するプロフェッショナル

【Firebase】Firebase Authenticationとは?(4)Firebase UI

この記事をシェア

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

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

いかがでしたか?イー・エージェンシーでは、Google アナリティクス 360 やサポートをご契約のお客様を対象に、Google アナリティクス for Firebase の導入支援を行っております。
また、アプリとWebのクロスプラットフォーム分析ができるGoogle アナリティクス 4 プロパティ(GA4)の導入支援も行っております。
まずは下記よりお気軽にお問い合わせください。

Google アナリティクス for Firebase ・Google アナリティクス 4 プロパティ(GA4) の導入に関するお問い合わせはこちら

関連リンク

【Firebase】Firebase Authenticationとは?(1)ユーザー管理
【Firebase】Firebase Authenticationとは?(2)Google認証
【Firebase】Firebase Authenticationとは?(3)SMS認証

この記事をシェア

この記事を書いた人

アバター

広報・PR・マーケティング担当

このライターが書いた記事を見る

私たちは、データを活用した成果貢献のための支援を行っております。
サービスについてお気軽にご相談・お問い合わせください。

資料ダウンロード

デジタルマーケティングに活用いただける様々な資料を
ダウンロードいただけるようご用意しました。

ご相談・お問い合わせ

私たちは、貴社のビジネス成長のためのデータ活用を支援いたします。
支援内容についてはお気軽にご相談・お問い合わせください

このページの先頭へ