Google は、黒人コミュニティのための人種的公平の促進に取り組んでいます。詳細をご覧ください。

FirebaseUI でログイン機能を簡単に Android アプリに追加する

FirebaseUI は Firebase Authentication SDK の上に構築されるライブラリで、アプリにドロップイン UI フローを追加できます。FirebaseUI には次の利点があります。

  • 複数のプロバイダに対応 - メール / パスワード、メールリンク、電話認証、Google ログイン、Facebook ログイン、Twitter ログイン、GitHub ログインのログインフローに対応しています。
  • アカウント管理 - アカウントの作成やパスワードのリセットなどのアカウント管理タスクを処理できます。
  • アカウントのリンク - ID プロバイダ間でユーザー アカウントを安全にリンクできます。
  • 匿名ユーザーのアップグレード - 匿名ユーザーを安全にアップグレードできます。
  • カスタムテーマ - FirebaseUI の外観はアプリに合わせてカスタマイズできます。FirebaseUI はオープンソースであるため、必要に応じてプロジェクトをフォークしてカスタマイズすることもできます。
  • Smart Lock for Passwords - Smart Lock for Passwords と自動的に統合され、迅速なクロスデバイス ログインを可能にします。

はじめに

  1. まだ Firebase を Android プロジェクトに追加していない場合は追加します。

  2. アプリレベルの build.gradle ファイルに FirebaseUI の依存関係を追加します。Facebook や Twitter によるログインをサポートする場合は、次のように Facebook と Twitter の SDK も含めます。

    dependencies {
    // ...

    implementation 'com.firebaseui:firebase-ui-auth:6.4.0'

    // Required only if Facebook login support is required
    // Find the latest Facebook SDK releases here: https://goo.gl/Ce5L94
    implementation 'com.facebook.android:facebook-android-sdk:4.x'

    // Required only if Twitter login support is required
    // Find the latest Twitter SDK releases here: https://goo.gl/E5wZvQ
    implementation 'com.twitter.sdk.android:twitter-core:3.x'
}

    FirebaseUI Auth SDK には、Firebase SDK と Google Play 開発者サービス SDK に対する一時的な依存関係があります。

  3. Firebase コンソールで [Authentication] セクションを開き、サポートするログイン方法を有効にします。一部のログイン方法では追加情報が必要となります。通常、その情報はサービスのデベロッパー コンソールにあります。

  4. Google ログインをサポートし、アプリの SHA-1 フィンガープリントを指定していない場合は、Firebase コンソールの [設定] ページでフィンガープリントを設定します。アプリの SHA-1 フィンガープリントを取得する方法の詳細については、クライアントの認証をご覧ください。

  5. Facebook または Twitter によるログインをサポートする場合は、各プロバイダに必要な識別情報を指定する文字列リソースを strings.xml に追加します。

    
<resources>
  <!-- Facebook application ID and custom URL scheme (app ID prefixed by 'fb'). -->
  <string name="facebook_application_id" translatable="false">YOUR_APP_ID</string>
  <string name="facebook_login_protocol_scheme" translatable="false">fbYOUR_APP_ID</string>
  <!-- Twitter consumer key and secret -->
  <string name="twitter_consumer_key" translatable="false">YOUR_CONSUMER_KEY</string>
  <string name="twitter_consumer_secret" translatable="false">YOUR_CONSUMER_SECRET</string>
</resources>

ログイン

FirebaseUI ログインフローを開始するには、任意のログイン方法を含むログイン インテントを作成します。

Java

// Choose authentication providers
List<AuthUI.IdpConfig> providers = Arrays.asList(
        new AuthUI.IdpConfig.EmailBuilder().build(),
        new AuthUI.IdpConfig.PhoneBuilder().build(),
        new AuthUI.IdpConfig.GoogleBuilder().build(),
        new AuthUI.IdpConfig.FacebookBuilder().build(),
        new AuthUI.IdpConfig.TwitterBuilder().build());

// Create and launch sign-in intent
startActivityForResult(
        AuthUI.getInstance()
                .createSignInIntentBuilder()
                .setAvailableProviders(providers)
                .build(),
        RC_SIGN_IN);
FirebaseUIActivity.java

Kotlin+KTX

// Choose authentication providers
val providers = arrayListOf(
        AuthUI.IdpConfig.EmailBuilder().build(),
        AuthUI.IdpConfig.PhoneBuilder().build(),
        AuthUI.IdpConfig.GoogleBuilder().build(),
        AuthUI.IdpConfig.FacebookBuilder().build(),
        AuthUI.IdpConfig.TwitterBuilder().build())

// Create and launch sign-in intent
startActivityForResult(
        AuthUI.getInstance()
                .createSignInIntentBuilder()
                .setAvailableProviders(providers)
                .build(),
        RC_SIGN_IN)
FirebaseUIActivity.kt

ログインフローが完了すると、onActivityResult に結果が返されます。

Java

@Override
protected 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) {
            // Successfully signed in
            FirebaseUser user = FirebaseAuth.getInstance().getCurrentUser();
            // ...
        } else {
            // Sign in failed. If response is null the user canceled the
            // sign-in flow using the back button. Otherwise check
            // response.getError().getErrorCode() and handle the error.
            // ...
        }
    }
}
FirebaseUIActivity.java

Kotlin+KTX

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    super.onActivityResult(requestCode, resultCode, data)

    if (requestCode == RC_SIGN_IN) {
        val response = IdpResponse.fromResultIntent(data)

        if (resultCode == Activity.RESULT_OK) {
            // Successfully signed in
            val user = FirebaseAuth.getInstance().currentUser
            // ...
        } else {
            // Sign in failed. If response is null the user canceled the
            // sign-in flow using the back button. Otherwise check
            // response.getError().getErrorCode() and handle the error.
            // ...
        }
    }
}
FirebaseUIActivity.kt

ログイン方法の設定

  1. Firebase コンソールで [Authentication] セクションを開きます。[ログイン方法] タブで [メール / パスワード] を有効にします。メールリンク ログインを使用するには、メール / パスワードによるログインを有効にする必要があります。

  2. 同じセクションで、ログイン方法として [メールリンク（パスワードなしでログイン）] を有効にして、[保存] をクリックします。

  3. メールリンク ログインを使用するには、Firebase Dynamic Links も有効にする必要があります。Firebase コンソールのナビゲーション バーの [つながる] の下にある [Dynamic Links] をクリックします。[始める] をクリックしてドメインを追加します。ここで選択したドメインは、ユーザーに送信されるメールリンクに反映されます。

  4. EmailBuilder インスタンスの enableEmailLinkSignIn を呼び出すことで、FirebaseUI のメールリンク ログインを有効にできます。true に設定した setHandleCodeInApp で、有効な ActionCodeSettings オブジェクトを指定する必要もあります。さらに、setUrl に渡す URL をホワイトリストに登録する必要があります。これは Firebase コンソールの、[Authentication] -> [ログイン方法] -> [承認済みドメイン] で実行できます。

    ActionCodeSettings actionCodeSettings = ActionCodeSettings.newBuilder()
        .setAndroidPackageName(/* yourPackageName= */ ..., /* installIfNotAvailable= */ true,
        /* minimumVersion= */ null)
        .setHandleCodeInApp(true) // This must be set to true
        .setUrl("https://google.com") // This URL needs to be whitelisted
        .build();

startActivityForResult(
        AuthUI.getInstance()
                .createSignInIntentBuilder()
                .setAvailableProviders(Arrays.asList(
                        new AuthUI.IdpConfig.EmailBuilder().enableEmailLinkSignIn()
                        .setActionCodeSettings(actionCodeSettings).build())
                .build(),
        RC_SIGN_IN);

  5. 特定のアクティビティのリンクを取得する場合は、ここで説明されている手順に沿ってください。それ以外の場合は、リンクはランチャー アクティビティにリダイレクトされます。

  6. ディープリンクを取得したら、処理できるように verify を呼び出す必要があります。可能であれば、setEmailLink を介してこれを Google に渡す必要があります。

    if (AuthUI.canHandleIntent(getIntent())) {
    if (getIntent().getExtras() == null) {
            return;
        }
        String link = getIntent().getExtras().getString(ExtraConstants.EMAIL_LINK_SIGN_IN);
        if (link != null) {
            startActivityForResult(
                    AuthUI.getInstance()
                            .createSignInIntentBuilder()
                            .setEmailLink(link)
                            .setAvailableProviders(getAvailableProviders())
                            .build(),
                    RC_SIGN_IN);
        }
}

  7. 省略可: クロスデバイスのメールリンク ログインがサポートされています。つまり、Android アプリを介して送信されたリンクを使用して、ウェブアプリまたは iOS アプリにログインできます。デフォルトでは、クロスデバイス サポートは有効になっています。これは EmailBuilder インスタンスの setForceSameDevice を呼び出すことによって無効にできます。

    詳細については、FirebaseUI-Web と FirebaseUI-iOS をご覧ください。

ログアウト

FirebaseUI には、Firebase Authentication およびすべてのソーシャル ID プロバイダからログアウトするための便利な方法があります。

Java

AuthUI.getInstance()
        .signOut(this)
        .addOnCompleteListener(new OnCompleteListener<Void>() {
            public void onComplete(@NonNull Task<Void> task) {
                // ...
            }
        });
FirebaseUIActivity.java

Kotlin+KTX

AuthUI.getInstance()
        .signOut(this)
        .addOnCompleteListener {
            // ...
        }
FirebaseUIActivity.kt

ユーザーのアカウントを完全に削除することもできます。

Java

AuthUI.getInstance()
        .delete(this)
        .addOnCompleteListener(new OnCompleteListener<Void>() {
            @Override
            public void onComplete(@NonNull Task<Void> task) {
                // ...
            }
        });
FirebaseUIActivity.java

Kotlin+KTX

AuthUI.getInstance()
        .delete(this)
        .addOnCompleteListener {
            // ...
        }
FirebaseUIActivity.kt

カスタム

デフォルトでは、FirebaseUI はテーマに AppCompat を使用します。そのため、アプリのカラースキームが自動的に使用されます。さらにカスタマイズが必要な場合は、テーマとロゴをログイン Intent ビルダーに渡すことができます。

Java

startActivityForResult(
        AuthUI.getInstance()
                .createSignInIntentBuilder()
                .setAvailableProviders(providers)
                .setLogo(R.drawable.my_great_logo)      // Set logo drawable
                .setTheme(R.style.MySuperAppTheme)      // Set theme
                .build(),
        RC_SIGN_IN);
FirebaseUIActivity.java

Kotlin+KTX

startActivityForResult(
        AuthUI.getInstance()
                .createSignInIntentBuilder()
                .setAvailableProviders(providers)
                .setLogo(R.drawable.my_great_logo) // Set logo drawable
                .setTheme(R.style.MySuperAppTheme) // Set theme
                .build(),
        RC_SIGN_IN)
FirebaseUIActivity.kt

カスタム プライバシー ポリシーと利用規約を設定することもできます。

Java

startActivityForResult(
        AuthUI.getInstance()
                .createSignInIntentBuilder()
                .setAvailableProviders(providers)
                .setTosAndPrivacyPolicyUrls(
                        "https://example.com/terms.html",
                        "https://example.com/privacy.html")
                .build(),
        RC_SIGN_IN);
FirebaseUIActivity.java

Kotlin+KTX

startActivityForResult(
        AuthUI.getInstance()
                .createSignInIntentBuilder()
                .setAvailableProviders(providers)
                .setTosAndPrivacyPolicyUrls(
                        "https://example.com/terms.html",
                        "https://example.com/privacy.html")
                .build(),
        RC_SIGN_IN)
FirebaseUIActivity.kt

次のステップ

  • FirebaseUI の使用とカスタマイズの詳細については、GitHub の README ファイルをご覧ください。
  • FirebaseUI で見つかった問題を報告するには、GitHub の [Issues] タブを使用してください。