• トップ
  • ブログ一覧
  • FirebaseのAuthenticationを使用してログイン機能を実装してみた!
  • FirebaseのAuthenticationを使用してログイン機能を実装してみた!

    たか(エンジニア)たか(エンジニア)
    2024.09.09

    IT技術

    はじめに

    こんにちは!今回はFirebaseのAuthenticationを使用してログイン機能を実装する方法をブログにまとめてみようと思います。業務でFirebaseを触る機会があり、以前からFirebaseについて調べてみたいと思っていました。そこでAuthenticationを見つけて、今後ログイン機能が必要なアプリ開発をする機会もあると思うので、どのような流れで機能を実現しているのか気になり、今回調べてみました!

    FirebaseのAuthenticationとは?

    まずFirebaseのAuthenticationとはなにかですがFirebaseが提供する認証サービスで、アプリにユーザー認証機能を簡単に統合できるようにするためのツールセットです!
    主な機能として、メールアドレスとパスワードを使用してサインアップおよびログインできるメール/パスワード認証、Google、Facebook、Twitter、GitHubなどのサードパーティプロバイダーを使用した認証が可能なソーシャルログインなどがあります!

    またFirebase SDKを使用することで、数行のコードで認証機能をアプリに組み込むことができます。今回はAndroidで導入していますが、クロスプラットフォームサポートが提供されており、iOSやWebでも一貫した認証エクスペリエンスを実現することができます!

    今回実装したログイン機能の画面

    今回実装した機能としてはメールアドレス・パスワードでSignIn、SignUpする機能・ログイン後SignOutできる機能を実装しました!
    以下が実装したアプリの画面の動作になります!

    作成したFirebaseのプロジェクトにアプリを追加

    それでは早速導入してみたいと思います!
    ログイン機能を実現するためにはまずFirebaseのプロジェクトにアプリを追加する必要があります!

    追加の仕方ですが、
    以下の画像から「アプリを追加」を選択するとiosやandroidなどプラットフォームが選択できるようになります。そのため追加したいアプリのプラットフォームを選択してください!

    すると以下の画面に切り替えるので必要な情報を入力していきます!

    上からAndroidパッケージ名にはアプリレベルのbuild.gradleファイルのapplicationIdを設定します。
    アプリのニックネームは任意になっており、デバッグ用の署名証明書SHA-1はAuthでDynamic Links、Googleログイン、電話番号をサポートするためには設定する必要があります!

    firebaseからダウンロードしたgoogle-service.jsonファイルをappファイル配下に配置

    次にfirebaseからダウンロードしたgoogle-service.jsonファイルをappファイル配下に配置します!
    Firebaseサービスをアプリケーションで使用するためには、google-services.jsonファイルが必要です。このファイルは、アプリがFirebaseプロジェクトと通信するために必要な設定情報などが含まれています!

    このファイルを追加する理由としては、Firebase SDKの初期化が挙げられます!アプリが起動すると、google-services.jsonファイルから設定情報を読み取り、Firebase SDKが適切に初期化されます!また、Firebaseサービスを利用するための認証情報やAPIキーが含まれており、これによりアプリがFirebaseサービスにアクセスできるようになります!各Firebaseプロジェクトは一意のプロジェクト番号やIDを持っているのでこれによりアプリがどのプロジェクトに属しているかを識別できます!

    必要な設定をbuild.gradleファイルに追記

    次に必要な設定をbuild.gradleファイルに追加します!

    1dependencies {
    2    // Firebase BoMのインポート
    3    implementation(platform("com.google.firebase:firebase-bom:33.1.1"))
    4
    5    // 使用するFirebaseプロダクトの依存関係を追加
    6    // BoMを使用している場合、バージョンを指定しないでください
    7    implementation("com.google.firebase:firebase-analytics")
    8    implementation("com.google.firebase:firebase-auth-ktx")
    9}

    Firebase BoMとは?
    Firebase Bill of Materials(BoM)は、すべてのFirebase Androidライブラリのバージョンを一括管理するためのツールです!これにより、各Firebaseライブラリのバージョンを個別に指定する必要がなくなり、互換性の問題を回避できます!

    追加する理由
    バージョン管理の簡素化:BoMを使用することで、すべてのFirebaseライブラリのバージョンを一括管理できます。これにより、各ライブラリのバージョンを個別に指定する手間が省け、バージョンの互換性に関する問題を回避できます!
    Firebaseプロダクトの利用:google-services.jsonファイルには、Firebaseプロジェクトとアプリケーションを接続するための設定情報が含まれています!これにより、アプリケーションはFirebaseの各種サービス(Analytics、Authenticationなど)を利用できます!
    初期化と設定:アプリが起動すると、google-services.jsonファイルの情報を基にFirebase SDKが初期化されます。これにより、Firebaseサービスが適切に機能するようになります!

    以上でFirebaseの設定は完了です!

    SignIn機能の実装

    今回はSignIn・SignUp・SignOutの3つの機能を実装しているのでそれぞれの実装を一つずつ解説していこうと思います!
    まずはsignInメソッドについて解説します!

    1    //SignInするメソッド
    2    private fun signIn(
    3        auth: FirebaseAuth,
    4        email: String,
    5        password: String,
    6        onComplete: (Boolean) -> Unit
    7    ) {
    8        auth.signInWithEmailAndPassword(email, password)
    9            .addOnCompleteListener(this) {
    10                onComplete(it.isSuccessful)
    11            }
    12    }

    このメソッドの目的は、Firebase Authenticationを使用してユーザーをSignInさせ、その結果をコールバック関数で通知することです!引数にauth、email、password、onCompleteを受け取ります!

    auth: FirebaseAuthはFirebase AuthenticationインスタンスでFirebase Authenticationサービスへのアクセスを提供しています!
    email: Stringはユーザーのメールアドレスでpassword: Stringはユーザーのパスワードです!
    onComplete: (Boolean) -> Unitはサインインの結果を受け取るコールバック関数です。Boolean型の引数を取り、SignInが成功したかどうかを示します!

    引数で受け取ったauthからsignInWithEmailAndPasswordメソッドを使用して、指定されたemailとpasswordを使ってSignInを試みます!
    .addOnCompleteListener(this) は、サインイン操作が完了したときに呼び出されるリスナーを追加します!
    it.isSuccessfulプロパティを使用して、サインインが成功したかどうかを確認し、onCompleteコールバック関数にサインインの成功状態(Boolean 値)を渡します!

    以上がsignInメソッドの内部処理です!

    SignUp機能の実装

    次にsignUpメソッドについて解説します!

    1    //SignUpをするメソッド
    2    private fun signUp(
    3        auth: FirebaseAuth,
    4        email: String,
    5        password: String,
    6        onComplete: (Boolean) -> Unit
    7    ) {
    8        auth.createUserWithEmailAndPassword(email, password)
    9            .addOnCompleteListener(this) {
    10                onComplete(it.isSuccessful)
    11            }
    12    }

    このメソッドの目的はFirebase Authenticationを使用してユーザーをSignUpさせ、その結果をコールバック関数で通知することです!
    引数にsignInメソッドと同様auth、email、password、onCompleteを受け取ります!

    引数で受け取ったauthから今回はcreateUserWithEmailAndPasswordメソッドを使用して、指定されたemailとpasswordを使ってSignUpを試みます!
    .addOnCompleteListener(this) は、SignUp操作が完了したときに呼び出されるリスナーを追加します!
    it.isSuccessfulプロパティを使用して、SignUpが成功したかどうかを確認し、onCompleteコールバック関数にSignUpの成功状態(Boolean 値)を渡します!

    基本的にはSignInメソッドと同じような処理になっていますが以上がsignUpメソッドの内部処理です!

    SignOut機能の実装

    最後にsignOutメソッドですが引数で受け取ったauthからsignOutメソッドを呼び出すだけです!

    1    //SignOutするメソッド
    2    private fun signOut(
    3        auth: FirebaseAuth
    4    ) {
    5        auth.signOut()
    6    }

    MainActivity全体のコード

    以下が、全体のコードになります!Screenなど足りない部分については追加してください!

    1object LoginDestinations {
    2    const val SIGN_IN_ROUTE = "SignInScreen"
    3    const val HOME_ROUTE = "HomeScreen"
    4}
    5
    6class MainActivity : ComponentActivity() {
    7    private lateinit var auth: FirebaseAuth
    8
    9    override fun onCreate(savedInstanceState: Bundle?) {
    10        super.onCreate(savedInstanceState)
    11        auth = Firebase.auth
    12        setContent {
    13            val navController = rememberNavController()
    14            val startDestination =
    15                if (auth.currentUser == null) LoginDestinations.SIGN_IN_ROUTE else LoginDestinations.HOME_ROUTE
    16            NavHost(
    17                navController = navController,
    18                startDestination = startDestination
    19            ) {
    20                composable(route = LoginDestinations.SIGN_IN_ROUTE) {
    21                    val context = LocalContext.current
    22                    SignInScreen(
    23                        onSignInClick = { email, password ->
    24                            signIn(auth, email, password) { success ->
    25                                if (success) {
    26                                    navController.navigate(LoginDestinations.SIGN_IN_ROUTE)
    27                                } else {
    28                                    Toast.makeText(
    29                                        context,
    30                                        getString(R.string.failed_sign_In_message),
    31                                        Toast.LENGTH_SHORT
    32                                    ).show()
    33                                }
    34                            }
    35                        },
    36                        onSignUpClick = { email, password ->
    37                            signUp(auth, email, password) { success ->
    38                                if (success) {
    39                                    navController.navigate(LoginDestinations.HOME_ROUTE)
    40                                } else {
    41                                    Toast.makeText(
    42                                        context,
    43                                        getString(R.string.failed_sign_up_message),
    44                                        Toast.LENGTH_SHORT
    45                                    ).show()
    46                                }
    47                            }
    48                        }
    49                    )
    50                }
    51
    52                composable(route = LoginDestinations.HOME_ROUTE) {
    53                    HomeScreen(
    54                        onSignOutClick = {
    55                            signOut(auth)
    56                            navController.navigate(LoginDestinations.SIGN_IN_ROUTE)
    57                        }
    58                    )
    59                }
    60            }
    61        }
    62    }
    63
    64    //サインインするメソッド
    65    private fun signIn(
    66        auth: FirebaseAuth,
    67        email: String,
    68        password: String,
    69        onComplete: (Boolean) -> Unit
    70    ) {
    71        auth.signInWithEmailAndPassword(email, password)
    72            .addOnCompleteListener(this) {
    73                onComplete(it.isSuccessful)
    74            }
    75    }
    76
    77    //新規登録をするメソッド
    78    private fun signUp(
    79        auth: FirebaseAuth,
    80        email: String,
    81        password: String,
    82        onComplete: (Boolean) -> Unit
    83    ) {
    84        auth.createUserWithEmailAndPassword(email, password)
    85            .addOnCompleteListener(this) {
    86                onComplete(it.isSuccessful)
    87            }
    88    }
    89
    90    //サインアウトするメソッド
    91    private fun signOut(
    92        auth: FirebaseAuth
    93    ) {
    94        auth.signOut()
    95    }
    96}

    まとめ

    今回はFirebaseのAuthenticationについてのブログを書いてみました!
    Firebaseにアプリを追加する手順から今回調査しましたが、比較的簡単に追加しライブラリの追加も公式ドキュメントを参考にしながら進めると簡単に感じました!
    まだまだ知らないライブラリや技術が多くあるので勉強し、ブログで発信していきたいと思います!

    ライトコードでは、エンジニアを積極採用中!

    ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。

    採用情報へ

    たか(エンジニア)
    たか(エンジニア)
    Show more...

    おすすめ記事

    エンジニア大募集中!

    ライトコードでは、エンジニアを積極採用中です。

    特に、WEBエンジニアとモバイルエンジニアは是非ご応募お待ちしております!

    また、フリーランスエンジニア様も大募集中です。

    background