Login Android dengan FirebaseUI

Codelab ini adalah bagian dari kursus Android Lanjutan di Kotlin. Anda akan mendapatkan manfaat maksimal dari kursus ini jika menyelesaikan codelab secara berurutan, tetapi ini tidak bersifat wajib. Semua codelab kursus tercantum di halaman landing codelab Android Lanjutan di Kotlin.

Codelab ini adalah bagian dari rangkaian yang memandu Anda dalam mendukung login bagi pengguna . Sebaiknya pelajari semua codelab secara berurutan, karena Anda perlu menyelesaikan setiap tugas langkah demi langkah.

Codelab dalam seri ini adalah:

• 6.1 Login Android dengan FirebaseUI
• 6.2 Navigasi Kondisional Android dengan Login

Pengantar

Saat membangun aplikasi Android, ada banyak manfaat yang bisa didapatkan dari mendukung login untuk pengguna Anda. Dengan mengizinkan pengguna membuat identitas dalam aplikasi Anda, Anda dapat memberi mereka lebih banyak cara untuk berinteraksi dengan aplikasi.

Dengan akun yang dipersonalisasi, pengguna dapat menyesuaikan pengalaman dalam aplikasi, berinteraksi dengan pengguna lain, dan data mereka akan tetap ada dan ditransfer jika mereka menggunakan aplikasi di perangkat lain (seperti web atau ponsel baru).

Dalam codelab ini, Anda akan mempelajari dasar-dasar cara mendukung login untuk aplikasi Anda menggunakan library FirebaseUI. Selain banyak hal lainnya, library FirebaseUI memudahkan developer yang ingin membuat alur login, dan menangani pengelolaan akun pengguna untuk Anda.

Yang harus sudah Anda ketahui

• Dasar-dasar cara membangun aplikasi Android
• LiveData dan ViewModel

Yang akan Anda pelajari

• Cara menambahkan Firebase ke project Anda
• Cara mendukung login untuk aplikasi Android Anda
• Cara mengamati status autentikasi aplikasi Anda saat ini
• Cara logout pengguna

Yang akan Anda lakukan

• Gunakan Firebase console untuk mengintegrasikan Firebase di aplikasi Anda.
• Terapkan fitur login.
• Tambahkan penyesuaian di aplikasi untuk pengguna yang login.
• Terapkan logout pengguna.

Pelajari LiveData dan ViewModel lebih lanjut

Untuk aplikasi dalam codelab ini, Anda memerlukan pemahaman dasar tentang LiveData dan ViewModel. Baca ringkasan LiveData dan ViewModel jika Anda ingin ringkasan singkat tentang konsep ini.

Anda juga dapat mempelajari kursus Mengembangkan Aplikasi Android dengan Kotlin untuk mempelajari topik dasar Android yang akan Anda temui sebagai bagian dari codelab ini. Kursus tersebut tersedia sebagai kursus Udacity dan kursus codelab.

Dalam codelab ini, Anda akan membuat aplikasi yang menampilkan fakta menarik tentang Android. Yang lebih penting, aplikasi akan memiliki tombol Login/Logout. Saat pengguna login ke aplikasi, fakta Android yang ditampilkan akan menyertakan sapaan untuk pengguna sebagai cara untuk menambahkan sentuhan personalisasi.

Untuk mendownload aplikasi contoh, Anda dapat melakukan:

Download Zip

... atau clone repositori GitHub dari command line dengan menggunakan perintah berikut dan beralih ke cabang start repositori:

$  git clone https://github.com/googlecodelabs/android-kotlin-login

Penting: Kode awal berada di cabang start dari repo yang didownload.

Penting: Karena Anda akan mengintegrasikan aplikasi untuk menggunakan Firebase, aplikasi starter memerlukan beberapa penyiapan agar dapat dibuat dan dijalankan. Anda akan melakukannya di langkah berikutnya dalam codelab.

Langkah 1: Buat project Firebase

Agar dapat menambahkan Firebase ke aplikasi Android, Anda perlu membuat project Firebase untuk terhubung ke aplikasi Android.

1. Di Firebase console, klik Tambahkan project.
2. Pilih atau masukkan Nama project. Anda dapat memberi nama project apa pun, tetapi coba pilih nama yang relevan dengan aplikasi yang Anda buat.
3. Klik Lanjutkan.
4. Anda dapat melewati penyiapan Google Analytics dan memilih opsi Not Right Now.
5. Klik Create Project untuk menyelesaikan penyiapan project Firebase.

Langkah 2: Daftarkan aplikasi Anda ke Firebase

Setelah memiliki project Firebase, Anda dapat menambahkan aplikasi Android ke dalamnya.

1. Di tengah halaman ringkasan project Firebase console, klik ikon Android untuk meluncurkan alur kerja penyiapan.
2. Masukkan ID aplikasi untuk aplikasi Anda di kolom Nama paket Android. Pastikan Anda memasukkan ID yang digunakan aplikasi Anda, karena Anda tidak dapat menambah atau mengubah nilai ini setelah mendaftarkan aplikasi Anda ke project Firebase.

1. ID aplikasi terkadang disebut sebagai nama paket.
2. Temukan ID aplikasi ini dalam file Gradle modul (level aplikasi), biasanya app/build.gradle (contoh ID: com.yourcompany.yourproject).
3. Masukkan SHA-1 sertifikat penandatanganan debug. Anda dapat membuat kunci ini dengan memasukkan perintah berikut di terminal command line.

keytool -alias androiddebugkey -keystore ~/.android/debug.keystore -list -v -storepass android

4. Klik Daftarkan aplikasi.

Langkah 3: Tambahkan file konfigurasi Firebase ke project Anda

Tambahkan file konfigurasi Android Firebase ke aplikasi Anda:

1. Klik Download google-services.json untuk mendapatkan file konfigurasi Android Firebase Anda (google-services.json).

• Anda dapat mendownload file konfigurasi Android Firebase lagi kapan saja.
• Pastikan file konfigurasi tidak ditambahi karakter lain dan hanya boleh diberi nama google-services.json

2. Pindahkan file konfigurasi ke direktori modul (level aplikasi) aplikasi Anda.

Langkah 4: Konfigurasi project Android Anda untuk mengaktifkan produk Firebase

1. Untuk mengaktifkan produk Firebase di aplikasi Anda, tambahkan plugin google-services ke file Gradle Anda.

1. Dalam file Gradle level root (level project), build.gradle, tambahkan aturan untuk menyertakan plugin Layanan Google. Pastikan Anda juga memiliki repositori Maven Google.

build.gradle

buildscript {

  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
  }

  dependencies {
    // ...

    // Add the following line:
    classpath 'com.google.gms:google-services:4.3.0'  // Google Services plugin
  }
}

allprojects {
  // ...

  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
    // ...
  }
}

2. Dalam file Gradle modul (level aplikasi), biasanya app/build.gradle, tambahkan satu baris ke bagian paling bawah file.

app/build.gradle

apply plugin: 'com.android.application'

android {
  // ...
}

// Add the following line to the bottom of the file:
apply plugin: 'com.google.gms.google-services'  // Google Play services Gradle plugin

Langkah 4: Tambahkan dependensi Firebase

Dalam codelab ini, alasan utama mengintegrasikan Firebase adalah untuk memiliki cara membuat dan mengelola pengguna. Untuk melakukannya, Anda perlu menambahkan library Firebase yang memungkinkan Anda menerapkan login.

1. Tambahkan dependensi berikut di file build.gradle (Module:app) agar Anda dapat menggunakan SDK di aplikasi Anda. firebase-auth SDK memungkinkan pengelolaan pengguna yang diautentikasi di aplikasi Anda.

app/build.gradle:

implementation 'com.firebaseui:firebase-ui-auth:5.0.0'

2. Sinkronkan project Anda dengan file gradle untuk memastikan semua dependensi tersedia untuk aplikasi Anda. Jika tidak diminta, pilih File > Sync Project with Gradle Files di Android Studio, atau dari toolbar.

Langkah 5: Jalankan aplikasi dan periksa kode

1. Jalankan aplikasi di emulator atau perangkat fisik untuk memastikan lingkungan Anda berhasil disiapkan untuk memulai pengembangan.

Jika berhasil, Anda akan melihat layar utama menampilkan fakta menarik tentang Android dan tombol login di sudut kiri atas. Mengetuk tombol login belum menyebabkan apa pun.

Secara umum, ini adalah aplikasi satu aktivitas dengan beberapa fragmen. MainFragment berisi semua UI yang Anda lihat di layar di bawah. (Anda akan menggunakan LoginFragment dan SettingsFragment dalam codelab lanjutan.)

2. Pahami kode. Khususnya, perhatikan:

• FirebaseUserLiveData adalah class yang akan Anda terapkan untuk mengamati pengguna Firebase saat ini yang terkait dengan aplikasi. Anda akan menggunakan instance FirebaseAuth sebagai titik entri untuk mendapatkan informasi pengguna ini pada langkah selanjutnya.
• MainFragment terikat ke LoginViewModel. LoginViewModel adalah class yang akan Anda terapkan untuk memanfaatkan FirebaseUserLiveData dalam membuat variabel authenticationState. Dengan menggunakan variabel authenticationState ini, MainFragment kemudian dapat mengamati nilai untuk memperbarui UI dengan tepat.

Pada langkah ini, Anda akan menggunakan Firebase Console untuk menyiapkan metode autentikasi yang ingin didukung aplikasi Anda. Untuk codelab ini, Anda akan berfokus pada cara mengizinkan pengguna login dengan alamat email yang mereka berikan atau Akun Google mereka.

1. Buka Firebase console. (Catatan: Jika Anda masih berada di alur kerja Tambahkan Firebase, klik X di pojok kiri atas untuk kembali ke konsol.
2. Pilih project Anda, jika Anda belum berada di project Anda.
3. Buka navigasi sebelah kiri, lalu pilih Develop > Authentication.

4. Pilih tab Metode login di menu navigasi atas.

5. Klik baris Email/Sandi.
6. Di jendela pop-up, alihkan tombol Aktifkan dan klik Simpan.
7. Demikian pula, klik baris Google.
8. Aktifkan tombol Diaktifkan, masukkan Email dukungan project, lalu klik Simpan.

Dalam tugas ini, Anda akan menerapkan fitur login untuk pengguna.

1. Buka MainFragment.kt.
2. Dalam tata letak MainFragment, perhatikan auth_button. Saat ini, aplikasi tidak disiapkan untuk menangani input pengguna.
3. Di onViewCreated(),, tambahkan onClickListener ke auth_button untuk memanggil launchSignInFlow().

MainFragment.kt

binding.authButton.setOnClickListener { launchSignInFlow() }

4. Cari metode launchSignInFlow() di MainFragment.kt. Saat ini berisi TODO.
5. Selesaikan fungsi launchSignInFlow() seperti yang ditunjukkan di bawah.

MainFragment.kt

private fun launchSignInFlow() {
   // Give users the option to sign in / register with their email or Google account.
   // If users choose to register with their email,
   // they will need to create a password as well.
   val providers = arrayListOf(
       AuthUI.IdpConfig.EmailBuilder().build(), AuthUI.IdpConfig.GoogleBuilder().build()

       // This is where you can provide more ways for users to register and 
       // sign in.
   )

   // Create and launch sign-in intent.
   // We listen to the response of this activity with the
   // SIGN_IN_REQUEST_CODE 
   startActivityForResult(
       AuthUI.getInstance()
           .createSignInIntentBuilder()
           .setAvailableProviders(providers)
           .build(),
       MainFragment.SIGN_IN_REQUEST_CODE
   )
}

Dengan demikian, pengguna dapat mendaftar dan login dengan alamat email atau Akun Google mereka. Jika pengguna memilih untuk mendaftar dengan alamat emailnya, kombinasi email dan sandi yang dibuatnya bersifat unik untuk aplikasi Anda. Artinya, dia akan dapat login ke aplikasi Anda dengan kombinasi alamat email dan sandi tersebut, tetapi bukan berarti dia juga dapat login ke aplikasi lain yang didukung Firebase dengan kredensial yang sama.

6. Di MainFragment.kt, Anda dapat memproses hasil proses login dengan menerapkan metode onActivityResult(), seperti yang ditunjukkan di bawah. Karena Anda memulai proses login dengan SIGN_IN_REQUEST_CODE, Anda juga dapat memproses hasil proses login dengan memfilter saat SIGN_IN_REQUEST_CODE dikirim kembali ke onActivityResult(). Mulai dengan memiliki beberapa pernyataan log untuk mengetahui apakah pengguna telah berhasil login.
   

MainFragment.kt

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
   super.onActivityResult(requestCode, resultCode, data)
   if (requestCode == SIGN_IN_REQUEST_CODE) {
       val response = IdpResponse.fromResultIntent(data)
       if (resultCode == Activity.RESULT_OK) {
           // User successfully signed in
           Log.i(TAG, "Successfully signed in user ${FirebaseAuth.getInstance().currentUser?.displayName}!")
       } else {
           // Sign in failed. If response is null the user canceled the
           // sign-in flow using the back button. Otherwise check
           // response.getError().getErrorCode() and handle the error.
           Log.i(TAG, "Sign in unsuccessful ${response?.error?.errorCode}")
       }
   }
}

Aplikasi Anda kini dapat menangani pendaftaran dan login pengguna.

7. Jalankan aplikasi dan verifikasi bahwa mengetuk tombol Login akan menampilkan layar login.
8. Anda kini dapat login dengan alamat email dan sandi Anda, atau dengan Akun Google Anda.
9. Tidak akan ada perubahan di UI setelah Anda login (Anda akan menerapkan pembaruan UI pada langkah berikutnya), tetapi jika semuanya berfungsi dengan benar, Anda akan melihat pesan log Successfully signed in user ${your name}! setelah melalui alur pendaftaran.
10. Anda juga dapat membuka Firebase console dan membuka Develop > Authentication > Users untuk memeriksa apakah aplikasi kini memiliki satu pengguna terdaftar.
11. Perhatikan bahwa saat pengguna membuat akun untuk aplikasi Anda, akun ini hanya terikat secara khusus ke aplikasi Anda, dan bukan ke aplikasi yang menggunakan Firebase untuk fungsi login.

Dalam tugas ini, Anda akan menerapkan pembaruan UI berdasarkan status autentikasi. Saat pengguna login, Anda dapat mempersonalisasi layar utama mereka dengan menampilkan nama mereka. Anda juga akan memperbarui tombol Login menjadi tombol Logout saat pengguna login.

1. Buka class FirebaseUserLiveData.kt, yang telah dibuat untuk Anda. Hal pertama yang perlu Anda lakukan adalah menyediakan cara agar class lain dalam aplikasi mengetahui kapan pengguna telah login atau logout. Namun, class tersebut belum melakukan apa pun karena nilai LiveData belum diupdate.
2. Karena Anda menggunakan library FirebaseAuth, Anda dapat memproses perubahan pada pengguna yang login dengan callback FirebaseUser.AuthStateListener yang diimplementasikan untuk Anda sebagai bagian dari library FirebaseUI. Callback ini dipicu setiap kali pengguna login atau logout dari aplikasi Anda.
3. Perhatikan bahwa FirebaseUserLiveData.kt menentukan variabel authStateListener. Anda akan menggunakan variabel ini untuk menyimpan nilai LiveData. Variabel authStateListener dibuat agar Anda dapat memulai dan berhenti memproses perubahan status autentikasi dengan benar berdasarkan status aplikasi Anda. Misalnya, jika pengguna menempatkan aplikasi di latar belakang, aplikasi harus berhenti memproses perubahan status autentikasi untuk mencegah potensi kebocoran memori.
4. Perbarui authStateListener sehingga nilai FirebaseUserLiveData Anda sesuai dengan pengguna Firebase saat ini.

FirebaseUserLiveData.kt

private val authStateListener = FirebaseAuth.AuthStateListener { firebaseAuth ->
   value = firebaseAuth.currentUser
}

5. Buka LoginViewModel.kt.
6. Di LoginViewModel.kt, buat variabel authenticationState berdasarkan objek FirebaseUserLiveData yang baru saja Anda terapkan. Dengan membuat variabel authenticationState ini, class lain kini dapat mengkueri apakah pengguna login atau tidak melalui LoginViewModel.

LoginViewModel.kt

val authenticationState = FirebaseUserLiveData().map { user ->
   if (user != null) {
       AuthenticationState.AUTHENTICATED
   } else {
       AuthenticationState.UNAUTHENTICATED
   }
}

7. Buka MainFragment.kt.
8. Di observeAuthenticationState() MainFragment.kt, Anda dapat menggunakan variabel authenticationState yang baru saja ditambahkan di LoginViewModel dan mengubah UI yang sesuai. Jika ada pengguna yang login, authButton harus menampilkan Logout.

MainFragment.kt

private fun observeAuthenticationState() {
   val factToDisplay = viewModel.getFactToDisplay(requireContext())

   viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
       when (authenticationState) {
           LoginViewModel.AuthenticationState.AUTHENTICATED -> {
               binding.authButton.text = getString(R.string.logout_button_text)
               binding.authButton.setOnClickListener {
                   // TODO implement logging out user in next step
               }

                // TODO 2. If the user is logged in, 
                 // you can customize the welcome message they see by
                 // utilizing the getFactWithPersonalization() function provided

           }
           else -> {
               // TODO 3. Lastly, if there is no logged-in user, 
                // auth_button should display Login and
                //  launch the sign in screen when clicked.
           }
       }
   })
}

9. Jika pengguna login, Anda juga dapat menyesuaikan pesan selamat datang yang mereka lihat dengan menggunakan fungsi getFactWithPersonalization() yang disediakan di MainFragment.
   

MainFragment.kt

binding.welcomeText.text = getFactWithPersonalization(factToDisplay)

10. Terakhir, jika tidak ada pengguna yang login (jika authenticationState adalah nilai selain LoginViewModel.AuthenticationState.AUTHENTICATED), auth_button akan menampilkan Login dan meluncurkan layar login saat diklik. Pesan yang ditampilkan juga tidak boleh dipersonalisasi.

MainFragment.kt

binding.authButton.text = getString(R.string.login_button_text)
binding.authButton.setOnClickListener { launchSignInFlow() }
binding.welcomeText.text = factToDisplay

Setelah semua langkah selesai, metode observeAuthenticationState() akhir Anda akan terlihat mirip dengan kode di bawah.

MainFragment.kt

private fun observeAuthenticationState() {
   val factToDisplay = viewModel.getFactToDisplay(requireContext())

   viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
        // TODO 1. Use the authenticationState variable you just added 
         // in LoginViewModel and change the UI accordingly.
       when (authenticationState) {
            // TODO 2.  If the user is logged in, 
             // you can customize the welcome message they see by
             // utilizing the getFactWithPersonalization() function provided
           LoginViewModel.AuthenticationState.AUTHENTICATED -> {
               binding.welcomeText.text = getFactWithPersonalization(factToDisplay)
               binding.authButton.text = getString(R.string.logout_button_text)
               binding.authButton.setOnClickListener {
                   // TODO implement logging out user in next step
               }
           }
           else -> {
                // TODO 3. Lastly, if there is no logged-in user, 
                 // auth_button should display Login and
                 // launch the sign in screen when clicked.
               binding.welcomeText.text = factToDisplay

               binding.authButton.text = getString(R.string.login_button_text)
               binding.authButton.setOnClickListener {
                   launchSignInFlow()
               }
           }
       }
   })
}

11. Jalankan aplikasi Anda. UI akan diperbarui sesuai dengan apakah pengguna login atau tidak. Jika semuanya berfungsi dengan baik, dan Anda login, layar utama akan menyapa Anda dengan nama Anda selain menampilkan fakta Android. Tombol Login juga akan menampilkan Logout.

Dalam tugas ini, Anda akan menerapkan fitur logout.

Karena aplikasi mengizinkan pengguna untuk login, aplikasi juga harus memberi mereka cara untuk logout. Berikut contoh cara logout pengguna hanya dengan satu baris kode:

AuthUI.getInstance().signOut(requireContext())

1. Buka MainFragment.kt.
2. Di observeAuthenticationState() MainFragment.kt, tambahkan logika logout sehingga auth_button berfungsi dengan benar saat ada pengguna yang login. Hasil akhir metode ini akan terlihat seperti kode di bawah.

MainFragment.kt

private fun observeAuthenticationState() {
   val factToDisplay = viewModel.getFactToDisplay(requireContext())

   viewModel.authenticationState.observe(viewLifecycleOwner, Observer { authenticationState ->
       when (authenticationState) {
           LoginViewModel.AuthenticationState.AUTHENTICATED -> {
               binding.welcomeText.text = getFactWithPersonalization(factToDisplay)

               binding.authButton.text = getString(R.string.logout_button_text)
               binding.authButton.setOnClickListener {
                   AuthUI.getInstance().signOut(requireContext())
               }
           }
           else -> {
               binding.welcomeText.text = factToDisplay

               binding.authButton.text = getString(R.string.login_button_text)
               binding.authButton.setOnClickListener {
                   launchSignInFlow()
               }
           }
       }
   })
}

3. Jalankan aplikasi.
4. Ketuk tombol Logout dan verifikasi bahwa pengguna telah logout, dan status tombol berubah menjadi Login.

Anda dapat menemukan versi akhir aplikasi yang telah selesai di sini https://github.com/googlecodelabs/android-kotlin-login.

Dalam codelab ini, Anda telah mempelajari:

• Cara menambahkan Firebase ke project Anda dengan menambahkan dependensi yang diperlukan dalam file gradle dan menyiapkan project di Firebase console.
• Cara menerapkan login untuk aplikasi Anda menggunakan library FirebaseUI dan menentukan cara Anda ingin mengizinkan pengguna login. Perhatikan bahwa setiap akun yang dibuat pengguna di aplikasi Anda hanya khusus untuk aplikasi Anda, dan tidak dibagikan ke semua aplikasi yang menggunakan Firebase untuk fungsi login.
• Cara mengamati status autentikasi aplikasi Anda saat ini menggunakan LiveData.
• Cara logout pengguna.

Codelab ini membahas dasar-dasar cara mendukung login untuk aplikasi Android.

Dalam codelab ini, Anda mengizinkan pengguna mendaftar dan login dengan alamat email mereka. Namun, dengan library FirebaseUI, Anda juga dapat mendukung metode autentikasi lain seperti login dengan nomor telepon. Untuk mempelajari lebih lanjut kemampuan library FirebaseUI dan cara memanfaatkan fungsi lain yang disediakan, lihat referensi berikut:

• Dokumentasi Authentication FirebaseUI
• Demo dan Kode Contoh FirebaseUI Authentication

Untuk mengetahui informasi selengkapnya tentang praktik terbaik seputar login, lihat referensi berikut:

Codelab:

• Mengoptimalkan aplikasi Anda untuk isi otomatis
• Login Lancar dengan Smart Lock

Dokumentasi developer Android:

• Framework IsiOtomatis Android
• Smart Lock untuk Sandi di Android

Video:

• Mengoptimalkan Alur Pengguna melalui Login

Untuk mengetahui link ke codelab lain dalam kursus ini, lihat halaman landing codelab Android Lanjutan di Kotlin.