Belajar Membuat Authentication di Android dengan Firebase
Yudi Setiawan 7 Maret 2017
Pengantar
Firebase merupakan salah satu MBaaS (Mobile Backend as a Service) yang sangat berguna untuk melakukan pengembangan aplikasi tanpa harus memikirkan proses pembuatan aplikasi servernya. Dengan firebase, Anda bisa membuat aplikasi mobile dengan proses yang lebih cepat karena, untuk permasalahan seperti database, authentication login, cloud messaging, dan lainnya sudah diatur oleh si Firebase sendiri. Pada tutorial ini, kita akan mencoba membuat aplikasi mobile dengan memanfaatkan fitur authentication login-nya.
Persiapan Firebase
- Sebagai langkah awal, silakan Anda buat terlebih dahulu di https://firebase.google.com/
- Selanjutnya pilih
MULAILAH SECARA GRATIS
seperti pada gambar berikut. - Kemudian, pilih
BUAT PROYEK BARU
. - Masukkan nama proyek yang akan kita buat nantinya di Android Studio.
- Selanjutnya, Anda akan menuju dashboard dari proyek yang barusan dibuat tadi.
- Kemudian, kita pilih yang
Tambahkan Firebase ke aplikasi Android Anda
dan selanjutnya Anda isi package name dari aplikasi kita yang akan kita buat di Android Studio. - Di langkat berikutnya, Anda akan disuruh untuk mengunduh file google-services.json dan silakan Anda unduh.
- And finally, you're finishing config Firebase.
Pembuatan Projek Aplikasi
Pada tutorial ini, saya akan membuat sebuah aplikasi yang berfungsi sebagai note. Dan didalamnya saya akan menambahkan fitur authentication sehingga ketika pertama kali aplikasinya dibuka maka, si pengguna diwajibkan create an account dulu atau sign in if you're already have an account. Sebagai langkah awal, silakan Anda buat projek di Android Studio dengan keterangan seperti pada gambar berikut.
Library dan Gradle
Setelah projek Anda selesai dibuat maka, silakan Anda copy file google-services.json yang Anda unduh tadi dan paste ke direktori app seperti pada gambar berikut. dan setting file build.gradle modul Project menjadi seperti ini di bagian dependencies-nya.
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
repositories {
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:2.2.3'
classpath 'com.google.gms:google-services:3.0.0'
classpath 'com.jakewharton:butterknife-gradle-plugin:8.5.1'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
jcenter()
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}
}
Selanjutnya, ubah file build.gradle modul App menjadi seperti ini.
apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.jakewharton.butterknife'
android {
compileSdkVersion 25
buildToolsVersion "25.0.1"
defaultConfig {
applicationId "com.codepolitan.examplefirebaselogin"
minSdkVersion 15
targetSdkVersion 25
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.1.0'
compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'
compile 'com.android.support:design:25.1.0'
compile 'com.jakewharton:butterknife:8.5.1'
compile 'com.jakewharton:butterknife-compiler:8.5.1'
compile 'com.google.firebase:firebase-auth:10.2.0'
compile 'com.google.firebase:firebase-database:10.2.0'
compile 'com.android.support:support-v4:25.1.0'
testCompile 'junit:junit:4.12'
compile 'org.greenrobot:eventbus:3.0.0'
}
MainActivity
Selanjutnya, pada file activity_main.xml kita ubah isinya menjadi seperti berikut.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
tools:context="com.codepolitan.examplefirebaselogin.main.MainActivity"
>
<ImageView
android:layout_width="130dp"
android:layout_height="130dp"
android:id="@+id/image_view_icon_firebase_activity_main"
android:src="@drawable/ic_firebase"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:layout_marginBottom="@dimen/activity_vertical_margin"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/edit_text_username_activity_main"
android:hint="Username"
android:imeOptions="actionNext"
android:maxLines="1"
android:singleLine="true"
android:textColor="@android:color/white"
android:paddingBottom="@dimen/activity_vertical_margin"
android:layout_marginRight="@dimen/activity_horizontal_margin"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:layout_below="@+id/image_view_icon_firebase_activity_main"
android:layout_marginTop="@dimen/activity_vertical_margin"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/edit_text_password_activity_main"
android:hint="Password"
android:imeOptions="actionDone"
android:maxLines="1"
android:singleLine="true"
android:textColor="@android:color/white"
android:paddingBottom="@dimen/activity_vertical_margin"
android:layout_marginRight="@dimen/activity_horizontal_margin"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:layout_below="@+id/edit_text_username_activity_main"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:inputType="textPassword"
/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="@dimen/activity_horizontal_margin"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:id="@+id/button_login_activity_main"
android:text="Login"
android:layout_below="@id/edit_text_password_activity_main"
android:textColor="@android:color/white"
android:background="@drawable/background_button_orange"
android:layout_marginTop="@dimen/activity_vertical_margin"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button_sign_up_activity_main"
android:minWidth="0dp"
android:minHeight="0dp"
android:background="@drawable/background_text_view_create_account"
android:textAllCaps="false"
android:text="Create an account"
android:textColor="@android:color/white"
android:textSize="15sp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="@dimen/activity_vertical_margin"
android:paddingTop="10dp"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingBottom="10dp"
android:paddingLeft="@dimen/activity_horizontal_margin"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/text_view_not_registered_activity_main"
android:text="Not registered?"
android:gravity="center"
android:layout_above="@+id/button_sign_up_activity_main"
android:layout_centerHorizontal="true"
/>
<!-- for progress loading -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/relative_layout_progress_activity_main"
android:background="@android:color/black"
android:alpha="0.7"
android:clickable="true"
android:visibility="gone"
>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</RelativeLayout>
dan file MainActivity.java menjadi seperti berikut.
package com.codepolitan.examplefirebaselogin.main;
import android.content.DialogInterface;
import android.content.Intent;
import android.support.annotation.NonNull;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AlertDialog;
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.EditText;
import android.widget.RelativeLayout;
import com.codepolitan.examplefirebaselogin.dashboard.DashboardActivity;
import com.codepolitan.examplefirebaselogin.R;
import com.codepolitan.examplefirebaselogin.signup.SignupActivity;
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 butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
public class MainActivity extends AppCompatActivity {
@BindView(R.id.relative_layout_progress_activity_main)
RelativeLayout relativeLayoutProgress;
@BindView(R.id.edit_text_username_activity_main)
EditText editTextUsername;
@BindView(R.id.edit_text_password_activity_main)
EditText editTextPassword;
private FirebaseAuth firebaseAuth;
private boolean loggedIn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initFirebase();
ButterKnife.bind(this);
loggedIn = isLoggedIn();
if (loggedIn) {
// go to dashboard
goToDashboard();
}
}
private void initFirebase() {
firebaseAuth = FirebaseAuth.getInstance();
}
private void goToDashboard() {
Intent intent = new Intent(this, DashboardActivity.class);
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK);
startActivity(intent);
}
@OnClick({R.id.button_login_activity_main, R.id.button_sign_up_activity_main})
public void onClick(Button button) {
switch (button.getId()) {
case R.id.button_login_activity_main:
String username = editTextUsername.getText().toString().trim();
String password = editTextPassword.getText().toString().trim();
login(username, password);
break;
case R.id.button_sign_up_activity_main:
// go to form pendaftaran
startActivity(new Intent(this, SignupActivity.class));
break;
}
}
private void login(final String username, final String password) {
if (TextUtils.isEmpty(username)) {
Snackbar.make(findViewById(android.R.id.content), R.string.error_message_username_empty, Snackbar.LENGTH_LONG)
.show();
} else if (TextUtils.isEmpty(password)) {
Snackbar.make(findViewById(android.R.id.content), R.string.error_message_password_empty, Snackbar.LENGTH_LONG)
.show();
} else {
// do login
showProgress();
firebaseAuth.signInWithEmailAndPassword(username, password)
.addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
@Override
public void onComplete(@NonNull Task<AuthResult> task) {
hideProgress();
if (task.isSuccessful()) {
// login sucess
// go to dashboard
goToDashboard();
} else {
// login failed
showMessageBox("Login failed. Your username and password is not matched");
}
}
});
}
}
private void hideProgress() {
relativeLayoutProgress.setVisibility(View.GONE);
editTextUsername.setEnabled(true);
editTextPassword.setEnabled(true);
}
private void showProgress() {
relativeLayoutProgress.setVisibility(View.VISIBLE);
editTextUsername.setEnabled(false);
editTextPassword.setEnabled(false);
}
private void showMessageBox(String message) {
AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this);
alertDialogBuilder.setTitle("Login");
alertDialogBuilder.setMessage(message);
alertDialogBuilder.setCancelable(false);
alertDialogBuilder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
dialogInterface.dismiss();
}
});
alertDialogBuilder.show();
}
public boolean isLoggedIn() {
if (firebaseAuth.getCurrentUser() != null) {
// user logged in
return true;
} else {
return false;
}
}
}
MainActivity.java kita jadikan sebagai menu awal untuk login dan pada menu ini ada 2 pilihan, yaitu, login atau signup.
Signup
Buat activity baru dan beri nama SignupActivity dan ubah file layout-nya menjadi seperti berikut.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/activity_signup"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
android:orientation="vertical"
tools:context="com.codepolitan.examplefirebaselogin.signup.SignupActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">
<TextView
android:id="@+id/text_view_signup_activity_signup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:text="Sign up"
android:textColor="@android:color/white"
android:textSize="24sp" />
<EditText
android:id="@+id/edit_text_email_activity_signup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/text_view_signup_activity_signup"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:inputType="textEmailAddress"
android:hint="Email"
android:imeOptions="actionNext"
android:maxLines="1"
android:paddingBottom="@dimen/activity_vertical_margin"
android:singleLine="true"
android:textColor="@android:color/white" />
<EditText
android:id="@+id/edit_text_password_activity_signup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/edit_text_email_activity_signup"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:hint="Password"
android:imeOptions="actionDone"
android:inputType="textPassword"
android:textColor="@android:color/white"
android:maxLines="1"
android:paddingBottom="@dimen/activity_vertical_margin"
android:singleLine="true" />
<Button
android:id="@+id/button_next_activity_signup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:background="@drawable/background_button_orange_transparent"
android:drawableEnd="@drawable/ic_navigate_next"
android:drawableRight="@drawable/ic_navigate_next"
android:minHeight="0dp"
android:minWidth="0dp"
android:paddingBottom="10dp"
android:paddingLeft="14dp"
android:paddingRight="14dp"
android:paddingTop="10dp"
android:text="Next"
android:textAllCaps="false"
android:textColor="@color/colorAccent"
android:textSize="24sp" />
</RelativeLayout>
<!--for progress loading-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/relative_layout_progress_activity_signup"
android:background="@android:color/black"
android:alpha="0.7"
android:visibility="gone"
>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</RelativeLayout>
Kemudian, ubah juga file java nya menjadi seperti berikut.
package com.codepolitan.examplefirebaselogin.signup;
import android.content.DialogInterface;
import android.support.annotation.NonNull;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AlertDialog;
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.EditText;
import android.widget.RelativeLayout;
import com.codepolitan.examplefirebaselogin.R;
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 butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
public class SignupActivity extends AppCompatActivity {
@BindView(R.id.edit_text_email_activity_signup)
EditText editTextEmail;
@BindView(R.id.edit_text_password_activity_signup)
EditText editTextPassword;
@BindView(R.id.relative_layout_progress_activity_signup)
RelativeLayout relativeLayoutProgress;
FirebaseAuth firebaseAuth;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_signup);
ButterKnife.bind(this);
initFirebase();
}
private void initFirebase() {
firebaseAuth = FirebaseAuth.getInstance();
}
@OnClick({R.id.button_next_activity_signup})
public void onClick(Button button) {
switch (button.getId()) {
case R.id.button_next_activity_signup:
String email = editTextEmail.getText().toString().trim();
String password = editTextPassword.getText().toString().trim();
signup(email, password);
break;
}
}
private void signup(String email, String password) {
if (TextUtils.isEmpty(email)) {
Snackbar.make(findViewById(android.R.id.content), R.string.error_message_username_empty, Snackbar.LENGTH_LONG)
.show();
} else if (TextUtils.isEmpty(password)) {
Snackbar.make(findViewById(android.R.id.content), R.string.error_message_password_empty, Snackbar.LENGTH_LONG)
.show();
} else {
showProgress();
firebaseAuth.createUserWithEmailAndPassword(email, password)
.addOnCompleteListener(new OnCompleteListener<AuthResult>() {
@Override
public void onComplete(@NonNull Task<AuthResult> task) {
hideProgress();
if (task.isSuccessful()) {
// signup success
AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(SignupActivity.this);
alertDialogBuilder.setTitle("Signup");
alertDialogBuilder.setMessage("Your account has been registered. Please sign in use your username and password.");
alertDialogBuilder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
dialogInterface.dismiss();
finish();
}
});
alertDialogBuilder.show();
} else {
task.getException().printStackTrace();
// signup fail
final Snackbar snackbar = Snackbar.make(findViewById(android.R.id.content), "registered has been failed! Please try again.", Snackbar.LENGTH_INDEFINITE);
snackbar.setAction("OK", new View.OnClickListener() {
@Override
public void onClick(View view) {
snackbar.dismiss();
}
});
snackbar.setActionTextColor(getResources().getColor(R.color.colorAccent));
snackbar.show();
}
}
});
}
}
private void hideProgress() {
relativeLayoutProgress.setVisibility(View.GONE);
}
private void showProgress() {
relativeLayoutProgress.setVisibility(View.VISIBLE);
}
}
Seperti yang Anda lihat bahwa, untuk menggunakan authentication sign up di Firebase Anda bisa menggunakan createUserWithEmailAndPassword
dilanjutkan dengan 2 parameter email dan password.
Dashboard
Buat file navigation drawer activity baru dengan nama DashboardActivity. Selanjutnya, ubah file layout-nya menjadi seperti berikut.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="@layout/app_bar_dashboard"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_dashboard"
app:menu="@menu/activity_dashboard_drawer" />
</android.support.v4.widget.DrawerLayout>
Dan ubah juga file java-nya menjadi seperti berikut.
package com.codepolitan.examplefirebaselogin.dashboard;
import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import com.codepolitan.examplefirebaselogin.dashboard.account.change.password.ChangePasswordDialogFragment;
import com.codepolitan.examplefirebaselogin.dashboard.account.change.username.ChangeUsernameDialogFragment;
import com.codepolitan.examplefirebaselogin.dashboard.data.add.NewDataFragment;
import com.codepolitan.examplefirebaselogin.dashboard.home.HomeFragment;
import com.codepolitan.examplefirebaselogin.R;
import com.codepolitan.examplefirebaselogin.main.MainActivity;
import com.google.firebase.auth.FirebaseAuth;
public class DashboardActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_dashboard);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_dashboard);
setSupportActionBar(toolbar);
getSupportFragmentManager().beginTransaction()
.add(R.id.frame_layout_content_dashboard, new HomeFragment(), HomeFragment.class.getSimpleName())
.commit();
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
}
@Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.nav_change_password:
ChangePasswordDialogFragment changePasswordDialogFragment = new ChangePasswordDialogFragment();
changePasswordDialogFragment.show(getSupportFragmentManager(), null);
break;
case R.id.nav_change_email:
ChangeUsernameDialogFragment changeUsernameDialogFragment = new ChangeUsernameDialogFragment();
changeUsernameDialogFragment.show(getSupportFragmentManager(), null);
break;
case R.id.nav_logout:
FirebaseAuth firebaseAuth = FirebaseAuth.getInstance();
firebaseAuth.signOut();
Intent intent = new Intent(this, MainActivity.class);
intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK | Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(intent);
break;
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
}
Pada aplikasi ini sebenarnya, kita ada menggunakan fitur Database Realtime miliki si Firebase namun, itu tidak akan saya jelaskan di sini karena di sini fokusnya kita ke fitur Authentication si Firebase. Seperti yang Anda lihat pada method onNavigationItemSelected
ada 3 menu item yaitu, change password, change email, dan logout. Untuk logout, Anda cukup menggunakan syntax signOut
untuk mengeluarkan akun Anda dan kembali ke menu login.
ChangePassword
Buat file layout baru dengan nama dialog_fragment_change_password.xml dan isi dengan source code berikut.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/edit_text_email_old_dialog_fragment_change_password"
android:hint="Email"
android:inputType="textEmailAddress"
android:paddingBottom="@dimen/activity_vertical_margin"
/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/edit_text_password_dialog_fragment_change_password"
android:hint="Password"
android:inputType="textPassword"
android:paddingBottom="@dimen/activity_vertical_margin"
/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/edit_text_password_new_dialog_fragment_change_password"
android:hint="Password new"
android:inputType="textPassword"
android:paddingBottom="@dimen/activity_vertical_margin"
/>
</android.support.design.widget.TextInputLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="13dp"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button_save_password_dialog_fragment_change_password"
android:text="@string/save"
android:textAllCaps="false"
android:background="@drawable/background_button_orange_transparent"
android:minWidth="0dp"
android:minHeight="0dp"
android:paddingTop="13dp"
android:paddingRight="16dp"
android:paddingBottom="13dp"
android:paddingLeft="16dp"
android:textColor="@color/colorAccent"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
/>
<ProgressBar
android:layout_width="24dp"
android:layout_height="24dp"
android:id="@+id/progress_bar_dialog_fragment_change_password"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="13dp"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="13dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:visibility="gone"
/>
</RelativeLayout>
</LinearLayout>
dan kemudian, buat file java baru dengan nama ChangePasswordDialogFragment.java dan isi dengan source code berikut.
package com.codepolitan.examplefirebaselogin.dashboard.account.change.password;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.Snackbar;
import android.support.v4.app.DialogFragment;
import android.support.v7.app.AlertDialog;
import android.text.TextUtils;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ProgressBar;
import com.codepolitan.examplefirebaselogin.R;
import com.codepolitan.examplefirebaselogin.main.MainActivity;
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 butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
/**
* Created by root on 04/03/17.
*/
public class ChangePasswordDialogFragment extends DialogFragment {
private View view;
@BindView(R.id.edit_text_email_old_dialog_fragment_change_password)
EditText editTextEmail;
@BindView(R.id.edit_text_password_dialog_fragment_change_password)
EditText editTextPassword;
@BindView(R.id.edit_text_password_new_dialog_fragment_change_password)
EditText editTextPasswordNew;
@BindView(R.id.progress_bar_dialog_fragment_change_password)
ProgressBar progressBar;
@BindView(R.id.button_save_password_dialog_fragment_change_password)
Button buttonSave;
private FirebaseAuth firebaseAuth;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
view = inflater.inflate(R.layout.dialog_fragment_change_password, container, false);
getDialog().setTitle("Change Password");
ButterKnife.bind(this, view);
initFirebaseAuth();
return view;
}
private void initFirebaseAuth() {
firebaseAuth = FirebaseAuth.getInstance();
}
@OnClick({R.id.button_save_password_dialog_fragment_change_password})
public void onClick(View view) {
switch (view.getId()) {
case R.id.button_save_password_dialog_fragment_change_password:
// do something
String email = editTextEmail.getText().toString().trim();
String password = editTextPassword.getText().toString().trim();
final String passwordNew = editTextPasswordNew.getText().toString().trim();
if (TextUtils.isEmpty(email)) {
showMessageSnackbar("Email is empty!");
} else if (TextUtils.isEmpty(password)) {
showMessageSnackbar("Password is empty!");
} else if (TextUtils.isEmpty(passwordNew)) {
showMessageSnackbar("Please insert your password new!");
} else {
showProgress();
firebaseAuth.signInWithEmailAndPassword(email, password)
.addOnCompleteListener(new OnCompleteListener<AuthResult>() {
@Override
public void onComplete(@NonNull Task<AuthResult> task) {
if (task.isSuccessful()) {
firebaseAuth.getCurrentUser()
.updatePassword(passwordNew)
.addOnCompleteListener(new OnCompleteListener<Void>() {
@Override
public void onComplete(@NonNull Task<Void> task) {
hideProgress();
if (task.isSuccessful()) {
AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(getContext());
alertDialogBuilder.setTitle("Change Password");
alertDialogBuilder.setMessage("Your password has been changed! Please login again.");
alertDialogBuilder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
dialogInterface.dismiss();
firebaseAuth.signOut();
Intent intent = new Intent(getContext(), MainActivity.class);
intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK | Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(intent);
getDialog().dismiss();
}
});
alertDialogBuilder.show();
} else {
showMessageSnackbar("Your password fail to changed!");
getDialog().dismiss();
}
}
});
} else {
showMessageSnackbar("Your email and password is not matched!");
getDialog().dismiss();
}
}
});
}
}
}
private void showProgress() {
progressBar.setVisibility(View.VISIBLE);
buttonSave.setVisibility(View.GONE);
editTextEmail.setEnabled(false);
editTextPassword.setEnabled(false);
editTextPasswordNew.setEnabled(false);
}
private void hideProgress() {
progressBar.setVisibility(View.GONE);
buttonSave.setVisibility(View.VISIBLE);
editTextEmail.setEnabled(true);
editTextPassword.setEnabled(true);
editTextPasswordNew.setEnabled(true);
}
private void showMessageSnackbar(String message) {
Snackbar.make(getActivity().findViewById(android.R.id.content), message, Snackbar.LENGTH_LONG)
.show();
}
}
Perhatikan baik-baik pada kode diatas, bahwa untuk mengganti password authentication di Firebase Anda diharuskan melakukan sign in lagi dan kemudian, dilanjutkan mengubah password-nya.
Change Email
Buat satu file layout baru dengan nama dialog_fragment_change_email.xml dan isi dengan source code berikut.
<?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="wrap_content"
android:orientation="vertical"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/edit_text_email_old_dialog_fragment_change_email"
android:inputType="textEmailAddress"
android:paddingBottom="@dimen/activity_vertical_margin"
android:hint="Email"
/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/edit_text_password_dialog_fragment_change_email"
android:inputType="textPassword"
android:paddingBottom="@dimen/activity_vertical_margin"
android:hint="Password"
/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/edit_text_email_new_dialog_fragment_change_email"
android:hint="Email new"
android:inputType="textEmailAddress"
android:paddingBottom="@dimen/activity_vertical_margin"
/>
</android.support.design.widget.TextInputLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="13dp"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button_save_email_dialog_fragment_new_email"
android:text="@string/save"
android:textAllCaps="false"
android:background="@drawable/background_button_orange_transparent"
android:textColor="@color/colorAccent"
android:minWidth="0dp"
android:minHeight="0dp"
android:paddingTop="13dp"
android:paddingRight="16dp"
android:paddingBottom="13dp"
android:paddingLeft="16dp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
/>
<ProgressBar
android:layout_width="24dp"
android:layout_height="24dp"
android:id="@+id/progress_bar_dialog_fragment_change_email"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="13dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="13dp"
android:layout_marginLeft="16dp"
android:visibility="gone"
/>
</RelativeLayout>
</LinearLayout>
Selanjutnya, buat file java baru dengan nama ChangeUsernameDialogFragment.java dan isi dengan source code berikut.
package com.codepolitan.examplefirebaselogin.dashboard.account.change.username;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.Snackbar;
import android.support.v4.app.DialogFragment;
import android.support.v7.app.AlertDialog;
import android.text.TextUtils;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ProgressBar;
import com.codepolitan.examplefirebaselogin.R;
import com.codepolitan.examplefirebaselogin.main.MainActivity;
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 butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
/**
* Created by root on 04/03/17.
*/
public class ChangeUsernameDialogFragment extends DialogFragment {
private View view;
@BindView(R.id.edit_text_email_old_dialog_fragment_change_email)
EditText editTextEmail;
@BindView(R.id.edit_text_password_dialog_fragment_change_email)
EditText editTextPassword;
@BindView(R.id.edit_text_email_new_dialog_fragment_change_email)
EditText editTextEmailNew;
@BindView(R.id.progress_bar_dialog_fragment_change_email)
ProgressBar progressBar;
@BindView(R.id.button_save_email_dialog_fragment_new_email)
Button buttonSaveEmail;
private FirebaseAuth firebaseAuth;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
view = inflater.inflate(R.layout.dialog_fragment_change_email, container, false);
getDialog().setTitle("Change Email");
ButterKnife.bind(this, view);
initFirebaseAuth();
return view;
}
private void initFirebaseAuth() {
firebaseAuth = FirebaseAuth.getInstance();
}
@OnClick({R.id.button_save_email_dialog_fragment_new_email})
public void onClick(View view) {
switch (view.getId()) {
case R.id.button_save_email_dialog_fragment_new_email:
String email = editTextEmail.getText().toString().trim();
String password = editTextPassword.getText().toString().trim();
final String emailNew = editTextEmailNew.getText().toString().trim();
if (TextUtils.isEmpty(email)) {
showMessageSnackBar("email is empty!");
} else if (TextUtils.isEmpty(password)) {
showMessageSnackBar("password is empty!");
} else if (TextUtils.isEmpty(emailNew)) {
showMessageSnackBar("Please insert your email address!");
} else {
showProgress();
firebaseAuth.signInWithEmailAndPassword(email, password)
.addOnCompleteListener(new OnCompleteListener<AuthResult>() {
@Override
public void onComplete(@NonNull Task<AuthResult> task) {
if (task.isSuccessful()) {
firebaseAuth.getCurrentUser()
.updateEmail(emailNew)
.addOnCompleteListener(new OnCompleteListener<Void>() {
@Override
public void onComplete(@NonNull Task<Void> task) {
hideProgress();
if (task.isSuccessful()) {
AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(getContext());
alertDialogBuilder.setTitle("Change Email");
alertDialogBuilder.setMessage("Your email address has been updated! Please login again.");
alertDialogBuilder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
firebaseAuth.signOut();
Intent intent = new Intent(getActivity(), MainActivity.class);
intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK | Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(intent);
getDialog().dismiss();
dialogInterface.dismiss();
}
});
alertDialogBuilder.show();
} else {
getDialog().dismiss();
showMessageSnackBar("Your email address fail to updated!");
}
}
});
} else {
showMessageSnackBar("Your email or password not matched!");
}
}
});
}
}
}
private void hideProgress() {
progressBar.setVisibility(View.GONE);
buttonSaveEmail.setVisibility(View.VISIBLE);
editTextEmail.setEnabled(true);
editTextPassword.setEnabled(true);
editTextEmailNew.setEnabled(true);
}
private void showProgress() {
progressBar.setVisibility(View.VISIBLE);
buttonSaveEmail.setVisibility(View.GONE);
editTextEmail.setEnabled(false);
editTextPassword.setEnabled(false);
editTextEmailNew.setEnabled(false);
}
private void showMessageSnackBar(String message) {
Snackbar.make(getActivity().findViewById(android.R.id.content), message, Snackbar.LENGTH_LONG)
.show();
}
}
Sekali lagi hampir sama seperti pada cara mengubah password Anda diharuskan sign in lagi dan dilanjutkan untuk proses penyetelan email baru. Sebenarnya, masih banyak fitur-fitur yang bisa Anda explore lagi authentication di Firebase seperti, sendPasswordResetEmail, confirmPasswordReset dan masih banyak lagi. Silakan Anda explore sendiri ya di documentation-nya Firebase.
Output
Semua file pendukung pada projek ini bisa Anda pelajari di sini