Last Updated on 8 years by Mas Herdi
Yo semuanya, melanjutkan tutorial saya tentang implementasi Firebase di Android. Jika sebelumnya kita telah belajar tentang implementasi Register / Sign Up pengguna menggunakan Firebase Authentication. Kali ini kita lanjut belajar soal Firebase Authentication, tepatnya tentang bagaimana mengimplementasikan fitur Sign In atau Login pengguna.
Belajar Membuat Fitur Sign In Menggunakan Firebase Authentication di Android Studio
Tidak jauh berbeda dengan tutorial sebelumnya, pada tutorial kali ini kita akan mengimplementasikan fitur Login menggunakan Firebase Auth di Android. Parameternya juga sama dengan saat Register, yaitu username dan password.
Sebelum lanjut ke coding, sangat saya sarankan kalian untuk membaca dan lakukan terlebih dahulu tutorial-tutorial berikut ini, karena tutorial ini melanjutkan dari tutorial sebelumnya :
Pre-requisites
- Membuat Project Hello World Android di Android Studio
- Implementasi Dasar dari Firebase Menggunakan Firebase Assistant
- Implementasi Fitur Sign Up / Register Menggunakan Firebase Authentication
Jika kalian sudah selesai dengan tutorial-tutorial sebelumnya. Maka kalian bisa memodifikasi layout activity_main.xml dan menambahkan dua buah Button untuk Sign In dan Logout seperti di bawah ini :
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.design.widget.TextInputLayout android:layout_marginTop="150dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_marginBottom="10dp" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/et_email" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Email" android:inputType="textEmailAddress" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:layout_margin="10dp" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/et_password" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Password" android:inputType="textPassword" /> </android.support.design.widget.TextInputLayout> <Button android:layout_margin="10dp" android:id="@+id/bt_signup" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Sign Up" /> <Button android:layout_margin="10dp" android:id="@+id/bt_signin" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Login" /> <Button android:enabled="false" android:layout_margin="10dp" android:id="@+id/bt_signout" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Log Out" /> </LinearLayout>
Setelah itu, kalian bisa buka file MainActivity.java dan menambahkan method untuk Sign In di Firebase seperti di bawah ini :
private void signIn(final String email, String password){ fAuth.signInWithEmailAndPassword(email, password) .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() { @Override public void onComplete(@NonNull Task<AuthResult> task) { Log.d(TAG, "signInWithEmail:onComplete:" + task.isSuccessful()); /** * Jika sign in gagal, tampilkan pesan ke user. Jika sign in sukses * maka auth state listener akan dipanggil dan logic untuk menghandle * signed in user bisa dihandle di listener. */ if (!task.isSuccessful()) { Log.w(TAG, "signInWithEmail:failed", task.getException()); Toast.makeText(FirebaseAuthActivity.this, "Proses Login Gagal\n", Toast.LENGTH_SHORT).show(); } else{ /** * set enabled pada button logout apabila user berhasil login */ btSignOut.setEnabled(true); Toast.makeText(FirebaseAuthActivity.this, "Login Berhasil\n" + "Email "+email, Toast.LENGTH_SHORT).show(); } // ... rest of code } }); }
Untuk default state pada tombol Sign Out adalah disabled, jika user berhasil Sign In, maka tombol Log Out baru berubah state nya menjadi enabled dan baru bisa diklik.
Kemudian, kalian bisa set up listener pada button Sign In yang akan memanggil method tersebut sewaktu diklik :
btSignIn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { /** * Lempar email dan password ketika tombol signin diklik */ signIn(etEmail.getText().toString(), etPassword.getText().toString()); } });
Dan seperti biasa saat diklik kita melempar email dan password yang sudah diinputkan oleh pengguna di EditText.
Selanjutnya untuk fitur Logout, kalian bisa menambahkan method seperti di bawah ini :
private void signOut(){ /** * Method untuk sign out dari Firebase */ fAuth.signOut(); }
Dan method itu akan kita panggil apabila tombol Sign Out diklik, sehingga kalian bisa menambahkan onClickListener pada btSignOut seperti dibawah.
btSignOut.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { signOut(); } });
Kemudian kita akan modif sedikit Firebase State Listenernya, sehingga apabila ada user Log Out maka tombol Log Out nya akan didisable lagi :
/** * Cek apakah ada user yang sudah login */ fStateListener = new FirebaseAuth.AuthStateListener() { @Override public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) { FirebaseUser user = firebaseAuth.getCurrentUser(); if (user != null) { // User sedang login Log.v(TAG, "onAuthStateChanged:signed_in:" + user.getUid()); } else { /** * Method ini akan dipanggil apabila user berhasil logout */ Toast.makeText(FirebaseAuthActivity.this, "User Logout\n", Toast.LENGTH_SHORT).show(); btSignOut.setEnabled(false); Log.v(TAG, "onAuthStateChanged:signed_out"); } } };
Untuk file akhir MainActivity.java bisa kalian lihat langsung di GitHub saya.
Demo
Oke sekarang untuk demonya, mari kita coba jalankan aplikasinya.
Beginilah tampilan awal aplikasi, ketika user belum Login. Bisa dilihat tombol Log Out yang ter-disabled.
Setelah user berhasil login, maka akan muncul Toast seperti di atas.
Kemudian tampilan di atas adalah ketika user berhasil logout.
That’s all ! Semoga membantu! Source code nya bisa kalian download dan jalankan sebagai Android Studio project di GitHub saya. Jangan lupa follow dan star project tersebut terlebih dulu ya. 🙂 Silahkan bertanya di bagian komentar jika ada yang kurang jelas. 😀