Firebase (Java) を使用した Android でのユーザー認証

Firebaseとは何ですか?

Firebase は、モバイル (Android または iOS) および Web アプリケーション開発プラットフォームであり、クラウドベースのツールとサービスのスイートを提供します。グーグル。これはサービスとしてのバックエンドです( BaaS ）これにより、開発者は、認証、リアルタイム データベース、クラウド ストレージ、ホスティングなどの機能が組み込まれており、アプリケーションを迅速かつ効率的に構築および展開できます。

このチュートリアルでは、ユーザーがアカウントを作成できるようにする認証用のシンプルな Java Android アプリを Firebase で構築します。アカウントにサインインしてサインアウトします。 Androidスマートフォンをエミュレータとして利用する方法についても解説します。

前提条件

このチュートリアルを開始する前に、Android アプリ開発の基本を理解しておく必要があります。

さらに、次のソフトウェアがコンピュータにインストールされている必要があります。

• Androidスタジオ: AndroidスタジオAndroid アプリ開発用の公式 IDE です。コード編集、レイアウト設計、デバッグ、テスト用のエミュレータなどの豊富な機能を備えています。
• Java Development Kit (JDK): このチュートリアルでは、ジャワアプリを構築するために。 Android Studio には JDK 8 以降が必要です。
• Android SDK (ソフトウェア開発キット): Android SDK は、Android アプリを開発するために Google が提供するツールとライブラリのコレクションです。
• Android 仮想デバイス (AVD) マネージャー: AVD マネージャーは、Android Studio によって提供されるツールで、アプリをテストするための仮想デバイスを作成および管理できます。

ステップ 1: 新しい Android アプリを作成する

• Android Studioを開き、ようこそ画面で「新しいAndroid Studioプロジェクトを開始」をクリックします。このオプションが表示されない場合は、[ファイル] > [新規] > [新しいプロジェクト] に移動して新しいプロジェクトを作成できます。
• 次に、プロジェクトのテンプレートを選択します。 Android Studio には、「空のアクティビティ」、「基本アクティビティ」、「全画面アクティビティ」など、さまざまな種類のアプリ用のテンプレートがいくつか用意されています。 「空のアクティビティ」を選択し、「次へ」をクリックします。

• 「空のアクティビティ」ダイアログでは、アプリの追加設定を行うことができます。プロジェクト名、パッケージ名、場所、最小 SDK、言語など、プロジェクトのさまざまな設定を構成するためのプロンプトが表示されます。必要な情報を入力します。この場合、プロジェクト名は「FirebaseAuthApp」で、「完了」をクリックします。

• Android Studio は、選択したテンプレートを使用して新しいプロジェクトを作成し、必要なファイルとフォルダーを生成します。システムのパフォーマンスと容量によっては、数分かかる場合があります。プロジェクトが構築されると、「プロジェクト」タブにプロジェクト構造が表示され、レイアウト エディターに activity_main.xml レイアウト ファイルが表示され、エディターに mainactivity.java ファイルが表示されます。
• ツールバーの「ビルド」をクリックし、「プロジェクトのビルド」を選択して、アプリのコードとリソースを含む APK ファイルを生成します。注意: 以前にビルドをトリガーしたことがある場合、または完全なビルドを必要とするプロジェクトに変更を加えた場合は、「プロジェクトのビルド」ではなく「プロジェクトの再ビルド」が表示されることがあります。

ステップ 2: アプリを実行してテストします。

これを行うには、物理的な Android デバイスを接続するか、エミュレータを起動します。

エミュレータを使用するには、次の手順に従います。

• Android Studio のツールバーで [デバイス マネージャー] をクリックして、Android 仮想デバイス (AVD) マネージャーを開きます。

• 既存の仮想デバイスを作成または選択します。すでに仮想デバイスがある場合は、再生ボタンをクリックして AVD でエミュレータを開始します。お持ちでない場合は、「デバイスの作成」をクリックして新しいエミュレータまたは仮想デバイスを作成します。希望のハードウェア構成 (サイズ、解像度、密度など) を選択し、[次へ] を選択します。その後、システムイメージと Android バージョンを選択します。ダウンロードして、エミュレータの設定を行います。

• 仮想デバイスが作成されたら、再生ボタンをクリックしてエミュレータを起動します。
• エミュレータが実行されたら、ツールバーに移動し、「実行」ボタンをクリックしてエミュレータ上でプロジェクトを実行します。アプリが自動的にビルドされ、エミュレーター上にインストールされます。エミュレータ上に「Hello World」が表示されるはずです。

物理 Android デバイスに接続するには、次の手順に従います。

Android デバイス (携帯電話またはタブレット) で設定を開き、「携帯電話について」に移動します。 「ソフトウェア情報」をクリックします。

• 開いたら、下にスクロールして「ビルド番号」を探します。それを 7 回タップします (番号は電話によって異なります。私は Samsung の電話を使用しています)。開発モードがオンになります。
• この段階で、パスワードを要求される場合があります。入力すれば完了です。設定ホームページに戻ると、開発者向けオプションが表示されるはずです。
• [開発者向けオプション] をクリックし、[USB デバッグ] をオンにします。
• USB コードを使ってデバイスをコンピュータに接続します。コンピューターからの USB デバッグを許可するかどうかを尋ねるポップアップ メッセージが表示されます。
• Android Studio に戻り、AVD マネージャーに移動します。ツールバーにデバイスが表示されるはずです。それを選択してアプリを実行します。数分後に Android デバイスでアプリが開き、「Hello World」ホームページが表示されます。

注意: 物理デバイスをエミュレータとして Android Studio に接続するには、ワイヤレス デバッグなどの他の方法もありますが、このチュートリアルでは USB デバッグを使用します。

ステップ 3: ユーザー インターフェイスを作成する

このステップでは、ユーザー インターフェイスとデザインを作成します。 「app/res」フォルダーに移動します。ユーザー インターフェイスのほとんどの変更はここで行われます。

• 色の追加: `app/res/values/colors.xml` ファイルを開き、アプリのカラーコードを追加します。

 <?xml version="1.0" encoding="utf-8"?> <resources> <color name="slateblue"> #6F58C9</color> <color name="black">#FF000000</color> <color name="white"> #FFFFFFFF</color> </resources>

• フォントを追加する: 「res」フォルダーを右クリックして「新規」をクリックし、「フォルダー」まで下にスクロールして、ドロップダウンから「フォントフォルダー」を選択します。または、新しいフォルダーを作成して「font」という名前を付けます。 ダウンロードそしてこれをコピーしてくださいフォントフォントフォルダに入れます。
• 描画可能なリソースの作成: ログイン ページとサインアップ ページに、ログイン、ダイアログ ボックス、フォーム入力ボックス、ボタン、背景画像、ベクター アセットを作成して追加します。これを行うには、以下の手順に従います。
  • 背景画像を追加する:この画像をダウンロードして、Drawable フォルダーにコピーします。
• カスタム ドローアブル リソース ファイルを追加します。 「res」フォルダーで、「drawable」フォルダーに移動し、右クリックして「新規」をクリックし、「ドローアブル リソース ファイル」を選択します。名前を「custom_edittext」として保存し、ファイル名を変更します。ルート要素をセレクターからシェイプに移動し、「OK」をクリックします。
• ファイルを開いて、次のコード行を追加します。

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <stroke android:width="2dp" android:color="@color/slateblue"/> <corners android:radius="30dp"/> </shape>

• 
  

  • ベクター画像を追加します。
    • 「res」フォルダーで「drawable」フォルダーに移動し、それを右クリックして「新規」をクリックし、「ベクター アセット」を選択します。ここでは、フォーム用のベクター画像をダウンロードします。
    • クリップアートをクリックし、検索バーに「人物」と入力します。 「人物」アートを選択し、「次へ」をクリックして「完了」を選択します。
    • 手順を繰り返しますが、「ロック」のベクター イメージをダウンロードします。
    • それぞれの XML コードを開き、色合いをバーガンディに変更します。 'android:tint="@color/slateblue"'。

ステップ 4: 新しいアクティビティを作成します。

• 「app/java/com.example.firebaseauthapp」フォルダーに移動し、右クリックして「新規」を選択します。下にスクロールして「アクティビティ」をクリックし、「空のアクティビティ」を選択します。
• アクティビティの名前を「SignUpActivity」に変更し、「Launcher Activity」というボックスをオンにして、「Finish」をクリックします。

• ランチャーアクティビティにすることを除いて、今回は「LoginActivity」に対して手順を繰り返します。

• 「app/manifests/AndroidManifest.xml」ファイルを開き、メイン アクティビティ ブロックからインテント フィルターを削除し、「android:exported="true"」を「android:exported="false"」に変更します。次のようになります。

  
  

 <activity android:name=".LoginActivity" android:exported="false" /> <activity android:name=".SignUpActivity" android:exported="true"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".MainActivity" android:exported="false"> </activity>

ステップ5: アクティビティのレイアウトを編集します。

• 「app/res/layout/activity_main.xml」ファイルを開きます。
• 次のコードを追加します。

 <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/wallbg" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" android:textColor="@color/slateblue" android:textSize="26sp" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"/> </androidx.constraintlayout.widget.ConstraintLayout>

• 「app/res/layout/activity_sign_up.xml」ファイルを開きます。
• 次のコードを追加します。

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" android:background="@drawable/wallbg" tools:context=".SignUpActivity"> <androidx.cardview.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="30dp" app:cardCornerRadius="30dp" app:cardElevation="20dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center_horizontal" android:padding="24dp" android:background="@drawable/custom_edittext"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Sign Up" android:textSize="36sp" android:textAlignment="center" android:textStyle="bold" android:textColor="@color/slateblue" /> <EditText android:layout_width="match_parent" android:layout_height="50dp" android:id="@+id/signup_email" android:background="@drawable/custom_edittext" android:layout_marginRight="40dp" android:layout_marginTop="40dp" android:padding="8dp" android:hint="Email" android:drawableLeft="@drawable/baseline_person_24" android:drawablePadding="8dp" android:textColor="@color/black" /> <EditText android:layout_width="match_parent" android:layout_height="50dp" android:id="@+id/signup_password" android:background="@drawable/custom_edittext" android:layout_marginRight="40dp" android:layout_marginTop="20dp" android:padding="8dp" android:hint="Password" android:drawableLeft="@drawable/baseline_lock_24" android:drawablePadding="8dp" android:textColor="@color/black" /> <Button android:layout_width="match_parent" android:layout_height="60dp" android:text="Sign Up" android:id="@+id/signup_button" android:textSize="18sp" android:layout_marginTop="30dp" android:backgroundTint="@color/slateblue" app:cornerRadius = "20dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/loginRedirectText" android:text="Already a user. Login" android:layout_gravity="center" android:padding="8dp" android:layout_marginTop="10dp" android:textColor="@color/slateblue" android:textSize="18sp" /> </LinearLayout> </androidx.cardview.widget.CardView> </LinearLayout>

• app/res/layout/activity_login.xml に移動します。
• 次のコードを追加します。

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" android:background="@drawable/wallbg" tools:context=".LoginActivity"> <androidx.cardview.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="30dp" app:cardCornerRadius="30dp" app:cardElevation="20dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_gravity="center_horizontal" android:padding="24dp" android:background="@drawable/custom_edittext"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Login" android:textSize="36sp" android:textAlignment="center" android:textStyle="bold" android:textColor="@color/slateblue" /> <EditText android:layout_width="match_parent" android:layout_height="50dp" android:id="@+id/login_email" android:background="@drawable/custom_edittext" android:layout_marginRight="40dp" android:layout_marginTop="40dp" android:padding="8dp" android:hint="Email" android:drawableLeft="@drawable/baseline_person_24" android:drawablePadding="8dp" android:textColor="@color/black" /> <EditText android:layout_width="match_parent" android:layout_height="50dp" android:id="@+id/login_password" android:background="@drawable/custom_edittext" android:layout_marginRight="40dp" android:layout_marginTop="20dp" android:padding="8dp" android:hint="Password" android:drawableLeft="@drawable/baseline_lock_24" android:drawablePadding="8dp" android:textColor="@color/black" /> <Button android:layout_width="match_parent" android:layout_height="60dp" android:text="Login" android:id="@+id/login_button" android:textSize="18sp" android:layout_marginTop="30dp" android:backgroundTint="@color/slateblue" app:cornerRadius = "20dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/signUpRedirectText" android:text="Not yet registered? Sign Up" android:layout_gravity="center" android:padding="8dp" android:layout_marginTop="10dp" android:textColor="@color/slateblue" android:textSize="18sp" /> </LinearLayout> </androidx.cardview.widget.CardView> </LinearLayout>

ステップ 6: Firebase 認証をセットアップする

• メニュー バーに移動して [ツール] をクリックし、[Firebase] を選択します。
• これを実行すると、サイドにポップアップ バーが表示されます。スクロールして[認証]をクリックし、[カスタム認証システムを使用した認証] を選択します。これは Java Android チュートリアルであるため、選択しているオプションが KOTLIN を使用していないことを確認してください。

• ボタンをクリックして Firebase に接続します。 Firebase コンソールにリダイレクトされます。アカウントを作成していない場合は、必ず作成してください。おそらくサインインしているはずです。そうでない場合は、サインインします。
• 新しいプロジェクトを作成すると、Android Studio のプロジェクト名に基づいて名前が提案されます。そのまま保持するか名前を変更するかを選択できます。私のものは「FirebaseAuthApp」です。
• 次のプロンプトで、プロジェクトの Google Analytics を無効にして、プロジェクトを作成します。
• プロジェクトが作成されると、Android Studio を Firebase に接続するように求めるプロンプトが表示されます。 「OK」を選択すると完了です。
• Firebase コンソールに戻り、新しく作成したプロジェクトを開きます。
• 「ビルド」をクリックし、「認証」を選択します。 「始める」ボタンをクリックしてください。
• 「電子メール/パスワード」を選択して有効にして、サインイン方法を追加します。これにより、好みの方法 (この場合は電子メールまたはパスワード) を使用してカスタム認証システムが構築されます。

• Android Studio に戻ります。アプリ com.example.firebaseauthapp が Firebase プロジェクトに接続されたことを示すポップアップ メッセージが表示されます。
• アシスタント ツールバーのボタンをクリックし、[変更を受け入れる] を選択して、Firebase Authentication SDK をアプリに追加します。
• 完了すると、依存関係が正しく設定されたことを示すプロンプトがアシスタント ツールバーに表示されます。

• ツールバーを閉じて、Gradle を開きます。
• Gradle ツールバーの左上隅にある Gradle アイコンをクリックします。
• 検索バーに「signingRedport」と入力し、Enter キーを押します。
• Build Analyzer の結果が利用可能になったら、SHA1 ハッシュをコピーします。
• Firebase コンソールに戻り、プロジェクトの概要をクリックして、[プロジェクト設定] を選択します。

注: プロジェクトに複数のアプリがある場合は、プロジェクトの概要に移動し、「アプリ」をクリックして、認証するアプリを選択します。

• プロジェクトのベースに移動し、フィンガープリントを追加します。 SHA1 ハッシュを貼り付けて、[保存] を選択します。「新しい証明書のフィンガープリントが追加されました」というプロンプトが表示されます。

ステップ 7: プロジェクトに認証を追加します。

• 「com/example/firebaseauthapp/SignUpActivity.java」ファイルを開きます。
• 必要なインポートを追加し、FirebaseAuth インスタンスを宣言して、サインアップ アクティビティの 'onCreate' メソッドで初期化します。次のようになります。

 package com.example.firebaseauthapp; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import android.widget.Toast; import com.google.android.gms.tasks.OnCompleteListener; import com.google.android.gms.tasks.Task; import com.google.firebase.auth.AuthResult; import com.google.firebase.auth.FirebaseAuth; public class SignUpActivity extends AppCompatActivity { // Declare any other necessary variables. private FirebaseAuth auth; private EditText signupEmail, signupPassword; private Button signupButton; private TextView loginRedirectText; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_sign_up); //Initialize the FirebaseAuth instance in the onCreate() auth = FirebaseAuth.getInstance(); signupEmail = findViewById(R.id.signup_email); signupPassword = findViewById(R.id.signup_password); signupButton = findViewById(R.id.signup_button); loginRedirectText = findViewById(R.id.loginRedirectText); signupButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { String user = signupEmail.getText().toString().trim(); String pass = signupPassword.getText().toString().trim(); if (user.isEmpty()){ signupEmail.setError("Email cannot be empty"); } if(pass.isEmpty()){ signupPassword.setError("Password cannot be empty"); } else{ auth.createUserWithEmailAndPassword(user, pass).addOnCompleteListener(new OnCompleteListener<AuthResult>() { @Override public void onComplete(@NonNull Task<AuthResult> task) { if(task.isSuccessful()){ Toast.makeText(SignUpActivity.this, "Signup Successful", Toast.LENGTH_SHORT).show(); startActivity(new Intent(SignUpActivity.this, LoginActivity.class)); } else{ Toast.makeText(SignUpActivity.this, "Signup Failed" + task.getException().getMessage(), Toast.LENGTH_SHORT).show(); } } }); } } }); loginRedirectText.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { startActivity(new Intent(SignUpActivity.this, LoginActivity.class)); } }); } }

• 「com/example/firebaseauthapp/LoginActivity.java」ファイルを開きます。
• 次のコードを追加します。

 package com.example.firebaseauthapp; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import android.content.Intent; import android.os.Bundle; import android.util.Patterns; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import android.widget.Toast; import com.google.android.gms.tasks.OnFailureListener; import com.google.android.gms.tasks.OnSuccessListener; import com.google.firebase.auth.AuthResult; import com.google.firebase.auth.FirebaseAuth; public class LoginActivity extends AppCompatActivity { private FirebaseAuth auth; private EditText loginEmail, loginPassword; private TextView signupRedirectText; private Button loginButton; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_login); auth = FirebaseAuth.getInstance(); loginEmail = findViewById(R.id.login_email); loginPassword = findViewById(R.id.login_password); loginButton = findViewById(R.id.login_button); signupRedirectText = findViewById(R.id.signupRedirectText); loginButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { String email = loginEmail.getText().toString(); String pass = loginPassword.getText().toString(); if(!email.isEmpty() && Patterns.EMAIL_ADDRESS.matcher(email).matches()) { if (!pass.isEmpty()) { auth.signInWithEmailAndPassword(email, pass) .addOnSuccessListener(new OnSuccessListener<AuthResult>() { @Override public void onSuccess(AuthResult authResult) { Toast.makeText(LoginActivity.this, "Login Successful", Toast.LENGTH_SHORT).show(); startActivity(new Intent(LoginActivity.this, MainActivity.class )); finish(); } }).addOnFailureListener(new OnFailureListener() { @Override public void onFailure(@NonNull Exception e) { Toast.makeText(LoginActivity.this, "Login Failed", Toast.LENGTH_SHORT).show(); } }); } else { loginPassword.setError("Password cannot be empty"); } } else if (email.isEmpty()) { loginEmail.setError("Email cannot be empty"); } else { loginEmail.setError("Please enter a valid email"); } } }); signupRedirectText.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { startActivity(new Intent(LoginActivity.this, SignUpActivity.class)); } }); } }

• アプリを実行し、エミュレーターを起動します。

• 完全に機能するアプリケーションが表示されるはずです。
• Firebase コンソールに移動し、[認証] をクリックします。 「ユーザー」タブの下に、新しく登録されたユーザーのリストが表示されます。

これらの手順に従うことで、Firebase が正常に統合され、アプリケーションのユーザー認証が設定されました。

結論

このチュートリアルでは、Firebase を使用して Android Java アプリケーションにユーザー認証を追加しました。私たちは、ユーザーがアカウントを作成し、サインアップし、サインアウトできるアプリケーションを開発しました。 Androidスマートフォンをエミュレータとして使用する方法についても説明しました。

Android アプリ開発における Firebase の知識を広げるには、Android と Firebase のドキュメントを参照してください。