Zenn
Jboy王国メディアPublicationへの投稿
🙄

Jetpack Composeで匿名認証を実装する

JboyHashimoto
2023/11/28に公開
Android
Jetpack Compose
tech

Overview

AndroidのJetpack Composeで、FirebaseAuthの匿名認証を使ってみたくて、今回はネットの情報を参考に全部同じファイルに処理を書いているんですけど、チュートリアルを作ってみました。

こんな感じのアプリを作りました
https://youtube.com/shorts/wHZZLqrDm64?feature=share

こちらのサイトを参考に作りました
パッケージのバージョンを下げないとKotlinのエラーが出てくるので対応が必要でした!
最初は、よくわからなくて結構ハマりました😅

Firebaseを使うには、プロジェクトを作成して、google-service.jsonをアプリに追加する必要があります。その後、build.gradleのファイルが２つあるのですが、こちらを設定していきます。

こちらの記事を参考してみてください
https://zenn.dev/jboy_blog/articles/5e2530e951020c

summary

こちらは参考してませんが、公式の匿名認証の解説です。
https://firebase.google.com/docs/auth/android/anonymous-auth?hl=ja

signInAnonymouslyメソッドを使って匿名ログインをする。

auth.signInAnonymously()
    .addOnCompleteListener(this) { task ->
        if (task.isSuccessful) {
            // Sign in success, update UI with the signed-in user's information
            Log.d(TAG, "signInAnonymously:success")
            val user = auth.currentUser
            updateUI(user)
        } else {
            // If sign in fails, display a message to the user.
            Log.w(TAG, "signInAnonymously:failure", task.exception)
            Toast.makeText(
                baseContext,
                "Authentication failed.",
                Toast.LENGTH_SHORT,
            ).show()
            updateUI(null)
        }
    }

やること

  1. Firebase Authのパッケージを追加する.
  2. そのまま参考にしてもバージョンのエラーが出る.
  3. Firebaseのパッケージのバージョンを下げる必要がある.
  4. google-service.jsonはコピーして、appディレクトリを選択して、コピー&ペーストすれば配置できる。表示方法を変えないと、ファイルは表示されないようだ?


https://firebase.google.com/docs/auth/android/start?hl=ja

赤い丸で囲んでいる２つのbuild.gradleに設定を追加する。

上のファイル
// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
    id 'com.android.application' version '8.0.2' apply false
    id 'com.android.library' version '8.0.2' apply false
    id 'org.jetbrains.kotlin.android' version '1.7.20' apply false
    id("com.google.gms.google-services") version "4.4.0" apply false// Firebaseのコードを追加
}
下のファイル
plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
    id("com.google.gms.google-services")
}

android {
    namespace 'com.example.firebaseauthapp'
    compileSdk 33

    defaultConfig {
        applicationId "com.example.firebaseauthapp"
        minSdk 24
        targetSdk 33
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary true
        }
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion '1.3.2'
    }
    packagingOptions {
        resources {
            excludes += '/META-INF/{AL2.0,LGPL2.1}'
        }
    }
}

dependencies {

    implementation 'androidx.core:core-ktx:1.8.0'
    implementation platform('org.jetbrains.kotlin:kotlin-bom:1.8.0')
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
    implementation 'androidx.activity:activity-compose:1.5.1'
    implementation platform('androidx.compose:compose-bom:2022.10.00')
    implementation 'androidx.compose.ui:ui'
    implementation 'androidx.compose.ui:ui-graphics'
    implementation 'androidx.compose.ui:ui-tooling-preview'
    implementation 'androidx.compose.material3:material3'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
    androidTestImplementation platform('androidx.compose:compose-bom:2022.10.00')
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
    debugImplementation 'androidx.compose.ui:ui-tooling'
    debugImplementation 'androidx.compose.ui:ui-test-manifest'
    // Firebase Authのパッケージ追加
    implementation platform('com.google.firebase:firebase-bom:31.0.0')
    implementation("com.google.firebase:firebase-auth-ktx")
}

MainActivity.ktのファイルに設定を追加する。今回はここにログインの処理とログイン後のページを作るComposableを作成する。

アプリを実行するコード
MainActivity.kt
package com.example.firebaseauthapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import com.example.firebaseauthapp.ui.theme.FirebaseAuthAppTheme
import com.google.firebase.auth.FirebaseAuth

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            FirebaseAuthAppTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    var isLoggedIn by remember { mutableStateOf(false) }

                    if (isLoggedIn) {
                        WelcomePage(onLogout = {
                            isLoggedIn = false
                        })
                    } else {
                        LoginPage(onLoginSuccess = {
                            isLoggedIn = true
                        })
                    }
                }
            }
        }
    }
}

@Composable
fun LoginPage(onLoginSuccess: () -> Unit) {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Button(onClick = { performAnonymousLogin(onLoginSuccess) }) {
            Text("登録しないで利用する")
        }
    }
}

private fun performAnonymousLogin(onLoginSuccess: () -> Unit) {
    FirebaseAuth.getInstance().signInAnonymously()
        .addOnCompleteListener { task ->
            if (task.isSuccessful) {
                onLoginSuccess()
            } else {
                // ログインできなかった場合の処理。今回はログを出す
                println("ログインできませんでした")
            }
        }
}

@Composable
fun WelcomePage(onLogout: () -> Unit) {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text("ようこそ！")
        Button(onClick = { onLogout() }) {
            Text("ログアウト")
        }
    }
}

ビルドに成功したら、こんな画面が表示されるはずです。ログインしてログアウトするだけですが、作るの難しかったです😅

thoughts

今回は簡単というわけではなかったですが、ネイティブアプリの開発で匿名認証をつけてみました。コードは書けてもKotlinとパッケージのバージョンがあっていないから、エラーが出て悩まされましたね😇

この記事が、誰かのお役に立てると嬉しいです。

Jboy王国メディア
Jboy王国メディアPublication

これは、Jboy王国公式のZennアカウントです。

Discussion