8/16/2018

Cara Melakukan Sign Up dengan Email dan Sandi pada Firebase Authentication

8/16/2018


Assalamualaikum Warahmatullahi Wabarakatuh.

Pada materi Firebase Authentication ini kita akan belajar bagaimana cara membuat halaman Sign Up untuk mendaftarkan user baru menggunakan Email dan Kata Sandi, dalam Firebase Authentication kita dapat membuat sistem autentikasi menggunakan alamat emali dan kata sandinya, selain itu juga kita dapat membuat sistem resigtrasi untuk mendaftarkan alamat email dan sandi dari user tersebut.


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:

Disini kita akan membuat project sederhana menggunakan Firebase Authentication untuk membuat sistem register/daftar atau Sign Up yang dapat mengizinkan pengguna untuk login/masuk menggunakan alamat email dan sandi mereka. Untuk itu mari kita simak tutorial berikut ini.

Cara Melakukan Sign Up dengan Email dan Sandi pada Firebase Authentication

1) Pertama, tambahkan Firebase kedalam Project Aplikasi,Untuk Tutorialnya kalian bisa lihat Disini

2) Buka file build.gradle (app level), masukan library berikut ini didalam dependencies kalian.
implementation 'com.google.firebase:firebase-auth:16.0.2'
3) Buka Firebase Console kalian, pada Authentication, aktifkan login dengan Email/Sandi.


Pada Link Email (login tanpa sandi) tidak perlu kita aktifkan, karena disini akan membuat sistem autentikasi login dan register.

4) Buat activity baru bernama LoginActivity, activity ini akan tampil pertama kalian pada saat aplikasi dibuka.

Untuk desain layout activity-nya, kita menggunakan widget ImageView, TextInputLayout, dan juga Button. Tapi kalian dapat menyesuaikannya sendiri.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
tools:context="cianjur.developer.net.firebaseexample.LoginActivity">

<ImageView
android:id="@+id/logo"
android:layout_width="120dp"
android:layout_height="120dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.100000024"
app:srcCompat="@drawable/firebase_auth"
tools:ignore="ContentDescription" />

<android.support.design.widget.TextInputLayout
android:id="@+id/emailForm"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/logo">

<android.support.design.widget.TextInputEditText
android:id="@+id/getEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Masukan Email"
tools:ignore="HardcodedText" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
android:id="@+id/passwordForm"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginStart="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/emailForm">

<android.support.design.widget.TextInputEditText
android:id="@+id/getPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
tools:ignore="HardcodedText" />
</android.support.design.widget.TextInputLayout>

<Button
android:id="@+id/login"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:text="Masuk"
app:layout_constraintEnd_toStartOf="@+id/register"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/passwordForm"
android:layout_marginLeft="32dp"
android:layout_marginRight="4dp"
tools:ignore="HardcodedText" />

<Button
android:id="@+id/register"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginStart="4dp"
android:layout_marginTop="8dp"
android:text="Daftar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/login"
app:layout_constraintTop_toBottomOf="@+id/passwordForm"
android:layout_marginLeft="4dp"
android:layout_marginRight="32dp"
tools:ignore="HardcodedText" />

<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="64dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />

</android.support.constraint.ConstraintLayout>
View:


Jika terdapat error seperti pada gambar berikut ini.


Untuk mengatasinya, pada folder values, buka file string.xml, lalu tambahkan baris kode berikut ini.
<item name="visible" type="id"/>
<item name="masked" type="id"/>
5) Jika sudah, selanjutnya buat activity baru bernama RegisterActivity, activity ini akan kita gunakan sebegai halaman pendaftaran user baru menggunakan email dan kata sandi.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
tools:context="cianjur.developer.net.firebaseexample.RegisterActivity">

<ImageView
android:id="@+id/logo"
android:layout_width="120dp"
android:layout_height="120dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.07999998"
app:srcCompat="@drawable/firebase_auth"
tools:ignore="ContentDescription" />

<android.support.design.widget.TextInputLayout
android:id="@+id/emailForm"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/logo">

<android.support.design.widget.TextInputEditText
android:id="@+id/regEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Masukan Email"
tools:ignore="HardcodedText" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
android:id="@+id/passwordForm"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginStart="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/emailForm">

<android.support.design.widget.TextInputEditText
android:id="@+id/regPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
tools:ignore="HardcodedText" />
</android.support.design.widget.TextInputLayout>

<Button
android:id="@+id/regUser"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:text="Daftarkan"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/passwordForm"
tools:ignore="HardcodedText" />

<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/regUser"
tools:visibility="gone" />

</android.support.constraint.ConstraintLayout>
View:


6) Buka class RegisterActivity.java kalian, pertama-tama kita akan deklarasikan beberapa variable dan juga inisialisasi objek dari Firebase Authentication, serta membuat beberapa method untuk mengecek data user dan untuk mendaftarkan user baru.
package cianjur.developer.net.firebaseexample;

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.firebase.auth.FirebaseAuth;

public class RegisterActivity extends AppCompatActivity {

//Deklarasi Variable
private TextInputEditText myEmail, myPassword;
private Button regButtton;
private ProgressBar progressBar;
private FirebaseAuth auth;
private String getEmail, getPassword;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_register);

//Inisialisasi Widget dan Membuat Objek dari Firebae Authenticaion
myEmail = findViewById(R.id.regEmail);
myPassword = findViewById(R.id.regPassword);
regButtton = findViewById(R.id.register);
progressBar = findViewById(R.id.progressBar);
progressBar.setVisibility(View.GONE);
auth = FirebaseAuth.getInstance();

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

regButtton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
cekDataUser();
}
});
}

//Method ini digunakan untuk mengecek dan mendapatkan data yang dimasukan user
private void cekDataUser(){}

//Method ini digunakan untuk membuat akun baru user
private void createUserAccount(){}
}
Coba kalian perhatikan, didalam source code tersebut kita menerapkan Hide Password untuk menyembunyikan password user.

7) Pada method cekDataUser(), berfungsi untuk mendapatkan input dari user dan mengecek data jiga yang dimasukan kosong atau tidak, dan juga mengecek panjang karakter password baru yang ingin didaftarkan.
private void cekDataUser(){
//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{
//Mengecek panjang karakter password baru yang akan didaftarkan
if(getPassword.length() < 6){
Toast.makeText(this, "Sandi Terlalu Pendek, Minimal 6 Karakter", Toast.LENGTH_SHORT).show();
}else {
progressBar.setVisibility(View.VISIBLE);
createUserAccount();
}
}
}
8) Jika sudah, berikutnya pada method createUserAccount(), disini kita akan menggunakan fungsi createUserWithEmailAndPassword() untuk mendaftarkan email dan kata sandi baru.
private void createUserAccount(){
auth.createUserWithEmailAndPassword(getEmail, getPassword)
.addOnCompleteListener(new OnCompleteListener<AuthResult>() {
@Override
public void onComplete(@NonNull Task<AuthResult> task) {

//Mengecek status keberhasilan saat medaftarkan email dan sandi baru
if(task.isSuccessful()){
Toast.makeText(RegisterActivity.this, "Sign Up Success", Toast.LENGTH_SHORT).show();
finish();
}else {
Toast.makeText(RegisterActivity.this, "Terjadi Kesalahan, Silakan Coba Lagi", Toast.LENGTH_SHORT).show();
progressBar.setVisibility(View.GONE);
}
}
});
}
Setelah kita selesai membuat sistem Sign Up / Daftar User Baru, berikutnya kita akan membuat sistem Login / Masuk menggunakan email dan kata sandi yang telah dibuat oleh user. Klik Disini.

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

Wassalamualaikum Warahmatullahi Wabarakatuh.