8/16/2018

Membuat Halaman Login dengan Email dan Sandi pada Firebase Authentication

8/16/2018


Assalamualaikum Warahmatullahi Wabarakatuh.

Pada tutorial sebelumnya kita telah belajar Cara Melakukan Sign Up dengan Email dan Sandi pada Firebase Authentication. Selanjutnya kita akan membuat halaman login untuk user yang telah mendaftarkan akunnya menggunakan alamat email dan kata sandi.


Firebase menyediakan banyak sekali fitur untuk keperluan development aplikasi yang akan kita buat, khusunya pada autentikasi, pada postingan sebelumnya saya sudah membahas beberapa tutorial mengenai firebase Authentication, seperti login menggunakan akun Google, Twitter, Facebook dan juga Nomor Telepon, materinya bisa kalian lihat pada link dibawah ini.

Materi lainnya yang direkomendasikan:

Saya sarankan sebelum kalian mengikuti tutorial ini, ikuti tutorial yang saya berikan sebelumnya, karena project merupakan lanjutan dari project yang telah dibuat pada tutorial sebelumnya mengenai sistem sign in pada Firebase Authentication.

Membuat Halaman Login dengan Email dan Sandi pada Firebase Authentication

1) Pertama kita akan membuat activity baru bernama MainActivity, class ini digunakan sebagai halaman utama jika user berhasil login / masuk mengunakan email dan kata sandi mereka.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:context="cianjur.developer.net.firebaseexample.MainActivity">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Selamat Datang"
android:textAlignment="center"
android:textSize="18sp"
android:textStyle="bold"
tools:ignore="HardcodedText" />

<Button
android:id="@+id/logout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Logout"
tools:ignore="HardcodedText" />

</LinearLayout>
Pada activity tersebut kita cukup menambahkan TextView dan Button saja, Button tersebut digunakan untuk Logout / Keluar.

2) Selanjutnya buka class LoginActivity.java, untuk membuat sistem login dengan email dan kata sandi, kita cukup menggunakan fungsi signInWithEmailAndPassword() bawaan dari Firebase Authentication.
package cianjur.developer.net.firebaseexample;

import android.content.Intent;
import android.content.pm.ActivityInfo;
import android.support.annotation.NonNull;
import android.support.design.widget.TextInputEditText;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
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;
import com.google.firebase.auth.FirebaseUser;

public class LoginActivity extends AppCompatActivity implements View.OnClickListener{

//Deklarasi Variable
private Button Register, Login;
private TextInputEditText myEmail, myPassword;
private ProgressBar progressBar;
private FirebaseAuth auth;
private FirebaseAuth.AuthStateListener listener;
private String getEmail, getPassword;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

//Inisialisasi Widget
myEmail = findViewById(R.id.getEmail);
myPassword = findViewById(R.id.getPassword);
Register = findViewById(R.id.register);
Register.setOnClickListener(this);
Login = findViewById(R.id.login);
Login.setOnClickListener(this);
progressBar = findViewById(R.id.progressBar);
progressBar.setVisibility(View.GONE);

//Menyembunyikan / Hide Password
myPassword.setTransformationMethod(PasswordTransformationMethod.getInstance());

//Instance / Membuat Objek Firebase Authentication
auth = FirebaseAuth.getInstance();

//Mengecek Keberadaan User
listener = new FirebaseAuth.AuthStateListener() {
@Override
public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {

//Mengecek apakah ada user yang sudah login / belum logout
FirebaseUser user = firebaseAuth.getCurrentUser();
if(user != null){
//Jika ada, maka halaman akan langsung berpidah pada MainActivity
startActivity(new Intent(LoginActivity.this, MainActivity.class));
finish();
}
}
};
}

//Menerapkan Listener
@Override
protected void onStart() {
super.onStart();
auth.addAuthStateListener(listener);
}

//Melepaskan Litener
@Override
protected void onStop() {
super.onStop();
if(listener != null){
auth.removeAuthStateListener(listener);
}
}

//Method ini digunakan untuk proses autentikasi user menggunakan email dan kata sandi
private void loginUserAccount(){
auth.signInWithEmailAndPassword(getEmail, getPassword)
.addOnCompleteListener(new OnCompleteListener<AuthResult>() {
@Override
public void onComplete(@NonNull Task<AuthResult> task) {

//Mengecek status keberhasilan saat login
if(task.isSuccessful()){
Toast.makeText(LoginActivity.this, "Login Success", Toast.LENGTH_SHORT).show();
}else {
Toast.makeText(LoginActivity.this, "Tidak Dapat Masuk, Silakan Coba Lagi", Toast.LENGTH_SHORT).show();
progressBar.setVisibility(View.GONE);
}
}
});
}

@Override
public void onClick(View v) {
switch (v.getId()){

case R.id.register:
startActivity(new Intent(LoginActivity.this, RegisterActivity.class));
break;

case R.id.login:
//Mendapatkan dat yang diinputkan User
getEmail = myEmail.getText().toString();
getPassword = myPassword.getText().toString();

//Mengecek apakah email dan sandi kosong atau tidak
if(TextUtils.isEmpty(getEmail) || TextUtils.isEmpty(getPassword)){
Toast.makeText(this, "Email atau Sandi Tidak Boleh Kosong", Toast.LENGTH_SHORT).show();
}else{
loginUserAccount();
progressBar.setVisibility(View.VISIBLE);
}
break;
}
}
}
3) Buka class MainActivity.java, untuk membuat sistem logout / keluar, kita cukup menggunakan fungsi signOut(); fungsi tersebut akan kita implementasikan pada Button. Lalu menambahkan Listenet untuk memeriksa apakah user telah logout / keluar, jika ya, maka akan langsung berpindah pada halaman Login.
package cianjur.developer.net.firebaseexample;

import android.content.Intent;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.FirebaseUser;

public class MainActivity extends AppCompatActivity {

//Deklarasi Variable
private FirebaseAuth.AuthStateListener authListener;
private FirebaseAuth auth;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button Logout = findViewById(R.id.logout);

//Instance Firebasee Auth
auth = FirebaseAuth.getInstance();

//Menambahkan Listener untuk mengecek apakah user telah logout / keluar
authListener = new FirebaseAuth.AuthStateListener() {
@Override
public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {

//Jika Iya atau Null, maka akan berpindah pada halaman Login
FirebaseUser user = firebaseAuth.getCurrentUser();
if (user == null) {
Toast.makeText(MainActivity.this, "Logout Success", Toast.LENGTH_SHORT).show();
startActivity(new Intent(MainActivity.this, LoginActivity.class));
finish();
}
}
};

Logout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//Fungsi untuk logout
auth.signOut();
}
});
}

//Menerapkan Listener
@Override
protected void onStart() {
super.onStart();
auth.addAuthStateListener(authListener);
}

//Melepaskan Litener
@Override
protected void onStop() {
super.onStop();
if(authListener != null){
auth.removeAuthStateListener(authListener);
}
}
}
Demo:





Setelah kita membuat sistem Sign In dan Sign Up, lalu bagaimana cara merubah kata sandi emali dari User tersebut, tutorialnya dapat kalian lihat disini.

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.