Mengintegrasikan Pengelola Kredensial dengan Login dengan Google

Login dengan Google membantu Anda mengintegrasikan autentikasi pengguna dengan aplikasi Android dengan cepat. Pengguna dapat menggunakan Akun Google mereka untuk login ke aplikasi Anda, memberikan izin, dan membagikan informasi profil mereka dengan aman ke aplikasi Anda. Library Jetpack Pengelola Kredensial Android memudahkan integrasi ini, sehingga menawarkan pengalaman yang konsisten di seluruh perangkat Android menggunakan satu API.

Dokumen ini akan memandu Anda dalam menerapkan Login dengan Google di aplikasi Android, cara menyiapkan UI tombol Login dengan Google, dan mengonfigurasi pengalaman mendaftar dan login dengan sekali ketuk yang dioptimalkan untuk aplikasi. Untuk migrasi perangkat yang lancar, Login dengan Google mendukung login otomatis, dan sifat lintas platformnya di seluruh platform Android, iOS, dan web membantu Anda memberikan akses login untuk aplikasi Anda di perangkat apa pun.

Untuk menyiapkan Login dengan Google, ikuti dua langkah utama berikut:

Konfigurasikan Login dengan Google sebagai opsi untuk UI sheet bawah Pengelola Kredensial. Opsi ini dapat dikonfigurasi untuk meminta pengguna login secara otomatis. Jika telah menerapkan kunci sandi atau sandi, Anda dapat meminta semua jenis kredensial yang relevan secara bersamaan, sehingga pengguna tidak perlu mengingat opsi yang telah mereka gunakan sebelumnya untuk login.

Sheet bawah Pengelola Kredensial
Gambar 1. UI pemilihan kredensial bottomsheet Pengelola Kredensial

Tambahkan tombol Login dengan Google ke UI aplikasi Anda. Tombol Login dengan Google menawarkan cara yang mudah bagi pengguna dalam menggunakan Akun Google yang ada untuk mendaftar atau login ke aplikasi Android. Pengguna akan mengklik tombol Login dengan Google jika mereka menutup UI sheet bawah, atau jika mereka secara eksplisit ingin menggunakan Akun Google mereka untuk mendaftar dan login. Bagi developer, hal ini memudahkan orientasi pengguna dan mengurangi hambatan selama pendaftaran.

Animasi yang menampilkan alur Login dengan Google
Gambar 2. UI tombol Login dengan Google Pengelola Kredensial

Dokumen ini menjelaskan cara mengintegrasikan tombol Login dengan Google dan dialog sheet bawah dengan Credential Manager API menggunakan library helper ID Google.

Menyiapkan project konsol API Google Anda

  1. Buka project Anda di Konsol API, atau buat project jika Anda belum memilikinya.
  2. Pada halaman layar izin OAuth, pastikan semua informasi sudah lengkap dan akurat.
    1. Pastikan aplikasi Anda memiliki Nama Aplikasi, Logo Aplikasi, dan Halaman Beranda Aplikasi yang benar. Nilai ini akan ditampilkan kepada pengguna di layar izin Login dengan Google saat mendaftar dan layar aplikasi & layanan pihak ketiga.
    2. Pastikan Anda telah menentukan URL kebijakan privasi dan persyaratan layanan aplikasi Anda.
  3. Di halaman Credentials, buat client ID Android untuk aplikasi Anda jika belum memilikinya. Anda harus menentukan nama paket dan tanda tangan SHA-1 aplikasi Anda.
    1. Buka halaman Credentials.
    2. Klik Create credentials > OAuth client ID.
    3. Pilih jenis aplikasi Android.
  4. Di halaman Kredensial, buat client ID "Aplikasi web" baru jika Anda belum melakukannya. Untuk saat ini, Anda dapat mengabaikan kolom "Asal JavaScript yang Diotorisasi" dan "URI pengalihan yang diotorisasi". Client ID ini akan digunakan untuk mengidentifikasi server backend Anda saat berkomunikasi dengan layanan autentikasi Google.
    1. Buka halaman Credentials.
    2. Klik Create credentials > OAuth client ID.
    3. Pilih jenis aplikasi Web.

Mendeklarasikan dependensi

Dalam file build.gradle modul, deklarasikan dependensi menggunakan Pengelola Kredensial versi terbaru:

dependencies {
  // ... other dependencies

  implementation "androidx.credentials:credentials:<latest version>"
  implementation "androidx.credentials:credentials-play-services-auth:<latest version>"
  implementation "com.google.android.libraries.identity.googleid:googleid:<latest version>"
}

Membuat instance permintaan login dengan Google

Untuk memulai implementasi Anda, buat instance permintaan login dengan Google. Gunakan GetGoogleIdOption untuk mengambil Token ID Google pengguna.

val googleIdOption: GetGoogleIdOption = GetGoogleIdOption.Builder()
  .setFilterByAuthorizedAccounts(true)
  .setServerClientId(WEB_CLIENT_ID)
  .setAutoSelectEnabled(true)
  .setNonce(<nonce string to use when generating a Google ID token>)
  .build()

Pertama, periksa apakah pengguna memiliki akun yang sebelumnya telah digunakan untuk login ke aplikasi Anda dengan memanggil API menggunakan parameter setFilterByAuthorizedAccounts yang ditetapkan ke true. Pengguna dapat memilih antara akun yang tersedia untuk login.

Jika tidak ada Akun Google resmi yang tersedia, pengguna akan diminta untuk mendaftar dengan salah satu akun mereka yang tersedia. Untuk melakukannya, minta pengguna dengan memanggil kembali API dan menyetel setFilterByAuthorizedAccounts ke false. Pelajari pendaftaran lebih lanjut.

Aktifkan login otomatis untuk pengguna yang kembali (direkomendasikan)

Developer harus mengaktifkan login otomatis untuk pengguna yang mendaftar dengan satu akun mereka. Tindakan ini memberikan pengalaman yang lancar di seluruh perangkat, terutama selama migrasi perangkat, yang memungkinkan pengguna mendapatkan kembali akses ke akun mereka dengan cepat tanpa perlu memasukkan ulang kredensial. Untuk pengguna Anda, tindakan ini akan menghilangkan hambatan yang tidak perlu ketika mereka sudah login sebelumnya.

Untuk mengaktifkan login otomatis, gunakan setAutoSelectEnabled(true). Login otomatis hanya dapat dilakukan jika kriteria berikut terpenuhi:

  • Ada satu kredensial yang cocok dengan permintaan, yang dapat berupa Akun Google atau sandi, dan kredensial ini cocok dengan akun default di perangkat Android.
  • Pengguna belum logout secara eksplisit.
  • Pengguna belum menonaktifkan login otomatis di setelan Akun Google mereka.
val googleIdOption: GetGoogleIdOption = GetGoogleIdOption.Builder()
  .setFilterByAuthorizedAccounts(true)
  .setServerClientId(WEB_CLIENT_ID)
  .setAutoSelectEnabled(true)
  .setNonce(<nonce string to use when generating a Google ID token>)
  .build()

Jangan lupa untuk menangani logout dengan benar saat menerapkan login otomatis, sehingga pengguna dapat selalu memilih akun yang tepat setelah logout dari aplikasi Anda secara eksplisit.

Setel nonce untuk meningkatkan keamanan

Untuk meningkatkan keamanan login dan menghindari serangan replay, tambahkan setNonce untuk menyertakan nonce dalam setiap permintaan. Pelajari lebih lanjut cara membuat nonce.

val googleIdOption: GetGoogleIdOption = GetGoogleIdOption.Builder()
  .setFilterByAuthorizedAccounts(true)
  .setServerClientId(WEB_CLIENT_ID)
  .setAutoSelectEnabled(true)
  .setNonce(<nonce string to use when generating a Google ID token>)
  .build()

Membuat alur Login dengan Google

Langkah-langkah untuk menyiapkan alur Login dengan Google adalah sebagai berikut:

  1. Buat instance GetCredentialRequest, lalu tambahkan googleIdOption yang dibuat sebelumnya untuk mengambil kredensial.
  2. Teruskan permintaan ini ke panggilan getCredential() (Kotlin) atau getCredentialAsync() (Java) untuk mengambil kredensial pengguna yang tersedia.
  3. Setelah API berhasil, ekstrak CustomCredential yang menyimpan hasil untuk data GoogleIdTokenCredential.
  4. Jenis untuk CustomCredential harus sama dengan nilai GoogleIdTokenCredential.TYPE_GOOGLE_ID_TOKEN_CREDENTIAL. Konversi objek menjadi GoogleIdTokenCredential menggunakan metode GoogleIdTokenCredential.createFrom.

  5. Jika konversi berhasil, ekstrak ID GoogleIdTokenCredential, validasi, lalu autentikasi kredensial di server Anda.

  6. Jika konversi gagal dengan GoogleIdTokenParsingException, Anda mungkin perlu mengupdate versi library Login dengan Google.

  7. Tangkap jenis kredensial kustom yang tidak dikenal.

val request: GetCredentialRequest = Builder()
  .addGetCredentialOption(googleIdOption)
  .build()

coroutineScope.launch {
  try {
    val result = credentialManager.getCredential(
      request = request,
      context = activityContext,
    )
    handleSignIn(result)
  } catch (e: GetCredentialException) {
    handleFailure(e)
  }
}

fun handleSignIn(result: GetCredentialResponse) {
  // Handle the successfully returned credential.
  val credential = result.credential

  when (credential) {

    // Passkey credential
    is PublicKeyCredential -> {
      // Share responseJson such as a GetCredentialResponse on your server to
      // validate and authenticate
      responseJson = credential.authenticationResponseJson
    }

    // Password credential
    is PasswordCredential -> {
      // Send ID and password to your server to validate and authenticate.
      val username = credential.id
      val password = credential.password
    }

    // GoogleIdToken credential
    is CustomCredential -> {
      if (credential.type == GoogleIdTokenCredential.TYPE_GOOGLE_ID_TOKEN_CREDENTIAL) {
        try {
          // Use googleIdTokenCredential and extract id to validate and
          // authenticate on your server.
          val googleIdTokenCredential = GoogleIdTokenCredential
            .createFrom(credential.data)
        } catch (e: GoogleIdTokenParsingException) {
          Log.e(TAG, "Received an invalid google id token response", e)
        }
      } else {
        // Catch any unrecognized custom credential type here.
        Log.e(TAG, "Unexpected type of credential")
      }
    }

    else -> {
      // Catch any unrecognized credential type here.
      Log.e(TAG, "Unexpected type of credential")
    }
  }
}

Memicu alur tombol Login dengan Google

Untuk memicu alur tombol Login dengan Google, gunakan GetSignInWithGoogleOption, bukan GetGoogleIdOption:

val signInWithGoogleOption: GetSignInWithGoogleOption = GetSignInWithGoogleOption.Builder()
  .setServerClientId(WEB_CLIENT_ID)
  .setNonce(<nonce string to use when generating a Google ID token>)
  .build()

Tangani GoogleIdTokenCredential yang ditampilkan seperti yang dijelaskan dalam contoh kode berikut.

fun handleSignIn(result: GetCredentialResponse) {
  // Handle the successfully returned credential.
  val credential = result.credential

  when (credential) {
    is CustomCredential -> {
      if (credential.type == GoogleIdTokenCredential.TYPE_GOOGLE_ID_TOKEN_CREDENTIAL) {
        try {
          // Use googleIdTokenCredential and extract id to validate and
          // authenticate on your server.
          val googleIdTokenCredential = GoogleIdTokenCredential
            .createFrom(credential.data)
        } catch (e: GoogleIdTokenParsingException) {
          Log.e(TAG, "Received an invalid google id token response", e)
        }
      }
      else -> {
        // Catch any unrecognized credential type here.
        Log.e(TAG, "Unexpected type of credential")
      }
    }

    else -> {
      // Catch any unrecognized credential type here.
      Log.e(TAG, "Unexpected type of credential")
    }
  }
}

Setelah Anda membuat instance permintaan login dengan Google, luncurkan alur autentikasi dengan cara yang sama seperti yang disebutkan di bagian Login dengan Google.

Aktifkan pendaftaran untuk pengguna baru (disarankan)

Login dengan Google adalah cara termudah bagi pengguna untuk membuat akun baru dengan aplikasi atau layanan Anda, hanya dengan beberapa ketukan.

Jika tidak ditemukan kredensial tersimpan (tidak ada Akun Google yang ditampilkan oleh getGoogleIdOption), minta pengguna untuk mendaftar. Pertama, periksa apakah setFilterByAuthorizedAccounts(true) untuk melihat apakah ada akun yang digunakan sebelumnya. Jika tidak ada yang ditemukan, minta pengguna untuk mendaftar dengan Akun Google mereka menggunakan setFilterByAuthorizedAccounts(false)

Contoh:

val googleIdOption: GetGoogleIdOption = GetGoogleIdOption.Builder()
  .setFilterByAuthorizedAccounts(false)
  .setServerClientId(SERVER_CLIENT_ID)
  .build()

Setelah Anda membuat instance permintaan pendaftaran Google, luncurkan alur autentikasi. Jika pengguna tidak ingin mendaftar ke Google, pertimbangkan layanan isi otomatis atau kunci sandi untuk pembuatan akun.

Menangani logout

Saat pengguna logout dari aplikasi Anda, panggil metode clearCredentialState() API untuk menghapus status kredensial pengguna saat ini dari semua penyedia kredensial. Tindakan ini akan memberi tahu semua penyedia kredensial bahwa setiap sesi kredensial yang disimpan untuk aplikasi tertentu harus dihapus.

Penyedia kredensial mungkin telah menyimpan sesi kredensial aktif dan menggunakannya untuk membatasi opsi login untuk panggilan get-credential di masa mendatang. Misalnya, setelan ini mungkin akan memprioritaskan kredensial aktif daripada kredensial lain yang tersedia. Jika pengguna secara eksplisit logout dari aplikasi Anda dan untuk mendapatkan opsi login holistik di lain waktu, Anda harus memanggil API ini untuk memungkinkan penyedia menghapus sesi kredensial yang disimpan.