Memproses login pengguna dengan email menggunakan Identity Platform

Memproses login pengguna dengan email menggunakan Identity Platform

Pelajari cara menggunakan Identity Platform untuk memproses login pengguna menggunakan email dan sandi.

---

Jika ingin mengikuti panduan langkah demi langkah untuk tugas ini langsung di Konsol Google Cloud, klik Pandu saya:

Pandu saya

---

Sebelum memulai

1. Login ke akun Google Cloud Anda. Jika Anda baru menggunakan Google Cloud, buat akun untuk mengevaluasi performa produk kami dalam skenario dunia nyata. Pelanggan baru juga mendapatkan kredit gratis senilai $300 untuk menjalankan, menguji, dan men-deploy workload.

2. Di konsol Google Cloud, pada halaman pemilih project, pilih atau buat project Google Cloud.

   Catatan: Jika tidak berencana untuk menyimpan resource yang Anda buat dalam prosedur ini, buatlah project, bukan memilih project yang ada. Setelah menyelesaikan langkah ini, Anda dapat menghapus project, yang menghapus semua resource yang terkait dengan project ini.

   Buka pemilih project

3. Pastikan penagihan telah diaktifkan untuk project Google Cloud Anda.

4. Pastikan Anda memiliki peran berikut di project: Identity Platform Admin, Service Usage Admin

   Memeriksa peran

   1. Di konsol Google Cloud, buka halaman IAM.

      Buka IAM
   2. Pilih project.

   3. Di kolom Akun utama, cari baris yang berisi alamat email Anda.

      Jika alamat email Anda tidak ada di kolom tersebut, berarti Anda tidak memiliki peran apa pun.

   4. Di kolom Peran untuk baris yang berisi alamat email Anda, periksa apakah daftar peran menyertakan peran yang diperlukan.

   Memberikan peran

   1. Di konsol Google Cloud, buka halaman IAM.

      Buka IAM
   2. Pilih project.
   3. Klik Berikan akses.
   4. Di kolom Akun utama baru, masukkan alamat email Anda.
   5. Di daftar Pilih peran, pilih peran.
   6. Untuk memberikan peran tambahan, klik Tambahkan peran lain, lalu tambahkan setiap peran tambahan.
   7. Klik Simpan.

5. Di konsol Google Cloud, pada halaman pemilih project, pilih atau buat project Google Cloud.

   Catatan: Jika tidak berencana untuk menyimpan resource yang Anda buat dalam prosedur ini, buatlah project, bukan memilih project yang ada. Setelah menyelesaikan langkah ini, Anda dapat menghapus project, yang menghapus semua resource yang terkait dengan project ini.

   Buka pemilih project

6. Pastikan penagihan telah diaktifkan untuk project Google Cloud Anda.

7. Pastikan Anda memiliki peran berikut di project: Identity Platform Admin, Service Usage Admin

   Memeriksa peran

   1. Di konsol Google Cloud, buka halaman IAM.

      Buka IAM
   2. Pilih project.

   3. Di kolom Akun utama, cari baris yang berisi alamat email Anda.

      Jika alamat email Anda tidak ada di kolom tersebut, berarti Anda tidak memiliki peran apa pun.

   4. Di kolom Peran untuk baris yang berisi alamat email Anda, periksa apakah daftar peran menyertakan peran yang diperlukan.

   Memberikan peran

   1. Di konsol Google Cloud, buka halaman IAM.

      Buka IAM
   2. Pilih project.
   3. Klik Berikan akses.
   4. Di kolom Akun utama baru, masukkan alamat email Anda.
   5. Di daftar Pilih peran, pilih peran.
   6. Untuk memberikan peran tambahan, klik Tambahkan peran lain, lalu tambahkan setiap peran tambahan.
   7. Klik Simpan.

Aktifkan Identity Platform

1. Di konsol Google Cloud, buka halaman Identity Platform di Cloud Marketplace.

   Buka Identity Platform

2. Klik Aktifkan Identity Platform.

Mengonfigurasi login email

1. Buka halaman Penyedia Identitas.

2. Di halaman Identity Provider, klik Add a provider.

3. Pada daftar Select a provider, pilih Email/Password.

4. Klik tombol Diaktifkan ke aktif.

5. Untuk menyimpan setelan penyedia, klik Simpan.

Membuat pengguna

1. Di konsol Google Cloud, buka halaman Pengguna.

   Buka Pengguna

2. Klik Tambahkan pengguna.

3. Di kolom Email, masukkan email dan sandi. Perhatikan kedua nilai ini karena Anda akan memerlukannya di langkah selanjutnya.

4. Untuk menambahkan pengguna, klik Tambahkan. Pengguna baru tercantum di halaman Users.

Memproses login pengguna

Langkah-langkah untuk memproses login pengguna bervariasi, bergantung pada versi SDK mana yang digunakan aplikasi Anda. Pastikan Anda mengikuti langkah-langkah yang benar untuk permohonan Anda.

Catatan: Penggunaan SDK v9 sangat direkomendasikan, terutama untuk aplikasi produksi. Jika Anda memerlukan dukungan untuk opsi pengelolaan SDK lainnya, seperti window.firebase, lihat Mengupgrade dari versi 8 ke Web SDK modular atau Cara alternatif untuk menambahkan Firebase.

SDK v9 (modular)

Menginstal SDK dan melakukan inisialisasi Firebase

Firebase JS SDK versi 9 menggunakan format Modul JavaScript.

Alur kerja ini menggunakan npm dan memerlukan pemaket modul atau alat framework JavaScript karena SDK v9 dioptimalkan agar dapat digunakan dengan pemaket modul untuk menghapus kode yang tidak digunakan (tree-shaking) dan mengurangi ukuran SDK.

Untuk menggunakan SDK v9, lakukan langkah-langkah berikut:

1. Dari direktori project, instal Firebase menggunakan npm:

   npm install firebase

2. Inisialisasi Firebase di aplikasi Anda dan buat objek Aplikasi Firebase:

   import { initializeApp } from 'firebase/app';
   
   const firebaseConfig = {
       apiKey: "API_KEY",
       authDomain: "AUTH_DOMAIN"
   };
   
   const app = initializeApp(firebaseConfig);
   

   Ganti kode berikut:

   • API_KEY: apiKey project Firebase Anda.
   • AUTH_DOMAIN: authDomain project Firebase Anda.

   Anda dapat menemukan nilai ini dari konfigurasi project Firebase aplikasi Anda.

   Aplikasi Firebase adalah objek mirip container yang menyimpan konfigurasi umum dan membagikan autentikasi di berbagai layanan Firebase. Setelah menginisialisasi objek Aplikasi Firebase dalam kode, Anda dapat menambahkan dan mulai menggunakan layanan Firebase.

   Jika Anda menggunakan ESM dan ingin menggunakan modul browser, ganti semua baris import dengan pola berikut:
   import { } from 'https://www.gstatic.com/firebasejs/10.11.0/firebase-SERVICE.js',
   dengan SERVICE sebagai nama SDK, misalnya firebase-firestore.

   Menggunakan modul browser adalah cara cepat untuk memulai, tetapi sebaiknya gunakan pemaket modul untuk production.

Mengakses Identity Platform di JavaScript Anda

Setelah menginisialisasi Firebase SDK, Anda dapat menggunakannya di mana saja di aplikasi Anda. Misalnya, berikut adalah aplikasi yang mencoba login ke pengguna hard code dan menampilkan hasilnya di halaman web.

import { initializeApp } from 'firebase/app';
import {
  onAuthStateChanged,
  signInWithEmailAndPassword,
  getAuth
} from 'firebase/auth';

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app, {/* extra options */ });

document.addEventListener("DOMContentLoaded", () => {
  onAuthStateChanged(auth, (user) => {
      if (user) {
          document.getElementById("message").innerHTML = "Welcome, " + user.email;
      }
      else {
          document.getElementById("message").innerHTML = "No user signed in.";
      }
  });
  signIn();
});

function signIn() {
  const email = "EMAIL_ID";
  const password = "PASSWORD";
  signInWithEmailAndPassword(auth, email, password)
      .catch((error) => {
          document.getElementById("message").innerHTML = error.message;
      });
}

Ganti kode berikut:

• API_KEY: apiKey project Firebase Anda.
• AUTH_DOMAIN: authDomain project Firebase Anda.
• EMAIL_ID: alamat email pengguna yang Anda buat sebelumnya dalam panduan ini.
• PASSWORD: sandi pengguna yang Anda buat sebelumnya dalam panduan ini.

Menggunakan pemaket modul untuk mengurangi ukuran

Catatan: Anda dapat melewati langkah ini jika menggunakan alat CLI framework JavaScript seperti Angular CLI, Next.js, Vue CLI, atau Membuat Aplikasi React. Lihat panduan kami tentang pemaketan modul untuk informasi selengkapnya.

Firebase Web SDK dirancang agar dapat digunakan dengan pemaket modul guna menghapus kode yang tidak digunakan (tree-shaking). Kami sangat merekomendasikan pendekatan ini untuk aplikasi produksi. Alat seperti Angular CLI, Next.js, Vue CLI, atau Create React App otomatis menangani pemaketan modul untuk library yang diinstal melalui npm dan diimpor ke codebase Anda.

Misalnya, Anda dapat menggunakan Webpack untuk membuat folder dist yang berisi paket aplikasi dan kode dependensi. Baca Menggunakan pemaket modul dengan Firebase untuk mengetahui informasi selengkapnya.

Mengimpor JavaScript ke halaman Anda

1. Membuat file baru bernama index.html.

2. Tambahkan dua penampung HTML dasar dan impor js paket.

   <script defer src="js/bundled.js"></script>
   <div>Identity Platform Quickstart</div>
   <div id="message">Loading...</div>
   

3. Luncurkan index.html di browser web Anda. Pesan selamat datang yang menampilkan email pengguna Anda akan muncul.

SDK v8 (lama)

Membuat halaman web

1. Di komputer lokal Anda, buat file baru bernama index.html.

2. Di file HTML, tambahkan dua penampung HTML:

   <div>Identity Platform Quickstart</div>
   <div id="message">Loading...</div>
   

Melakukan inisialisasi Identity Platform Client SDK dengan kunci API

1. Pada konsol Google Cloud, buka halaman Penyedia Identitas.

   Buka Penyedia Identitas

2. Klik Application setup details.

3. Salin kode inisialisasi ke index.html.

Memproses login pengguna

1. Untuk memproses login pengguna, salin kode berikut ke index.html:

   <script>
     var email = "EMAIL_ID";
     var password = "PASSWORD";
   
     firebase.auth().onAuthStateChanged(function(user) {
       if (user) {
         document.getElementById("message").innerHTML = "Welcome, " + user.email;
       } else {
         document.getElementById("message").innerHTML = "No user signed in.";
       }
     });
   
     firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
       document.getElementById("message").innerHTML = error.message;
     });
   </script>
   

   Kode ini memanggil signInWithEmailAndPassword(), lalu memproses hasilnya dengan callback onAuthStateChanged().

   Ganti kode berikut:

   • EMAIL_ID: email untuk pengguna yang Anda buat sebelumnya
   • PASSWORD: sandi untuk pengguna yang Anda buat sebelumnya

2. Buka index.html di browser web Anda. Pesan selamat datang yang menampilkan email pengguna Anda akan muncul.

Ada batas untuk upaya login pengguna yang gagal. Beberapa upaya login yang cepat dan gagal untuk sementara akan mengunci pengguna dari akunnya.

Untuk informasi selengkapnya tentang batas Identity Platform lainnya, lihat Kuota dan batas.

Pembersihan

Agar akun Google Cloud Anda tidak dikenakan biaya untuk resource yang digunakan pada halaman ini, ikuti langkah-langkah berikut.

Hapus penyedia dan pengguna

Jika Anda menggunakan project Google Cloud yang sudah ada, hapus penyedia dan pengguna yang Anda buat untuk menghindari tagihan pada akun Anda:

1. Pada konsol Google Cloud, buka halaman Penyedia Identitas.

   Buka Penyedia Identitas

2. Untuk menghapus penyedia, klik Delete di samping nama penyedia. Untuk mengonfirmasi, klik Hapus.

3. Di konsol Google Cloud, buka halaman Pengguna.

   Buka Pengguna

4. Untuk menghapus pengguna yang Anda buat, klik Hapus di samping nama pengguna. Untuk mengonfirmasi, klik Hapus.

Menghapus project

Cara termudah untuk menghilangkan penagihan adalah dengan menghapus project yang Anda buat untuk tutorial.

Untuk menghapus project:

Perhatian: Menghapus project memiliki efek berikut:

• Semua hal dalam project akan dihapus. Jika menggunakan project yang sudah ada untuk tugas dalam dokumen ini, saat Anda menghapusnya, pekerjaan lain yang telah Anda lakukan dalam project tersebut juga akan terhapus.
• Project ID kustom hilang. Saat membuat project ini, Anda mungkin telah membuat project ID kustom yang ingin digunakan di masa mendatang. Untuk mempertahankan URL yang menggunakan project ID, seperti URL appspot.com, hapus resource yang dipilih di dalam project, bukan menghapus seluruh project.

Jika Anda berencana mempelajari berbagai arsitektur, tutorial, atau panduan memulai, menggunakan kembali project dapat membantu agar Anda tidak melampaui batas kuota project.

1. Di konsol Google Cloud, buka halaman Manage resource.

   Buka Manage resource

2. Pada daftar project, pilih project yang ingin Anda hapus, lalu klik Delete.
3. Pada dialog, ketik project ID, lalu klik Shut down untuk menghapus project.

Langkah selanjutnya

Dalam aplikasi yang sebenarnya, pengguna akan mendaftar menggunakan halaman pendaftaran khusus, lalu login dengan memasukkan email dan sandi mereka. Identity Platform menawarkan UI autentikasi bawaan yang dapat Anda gunakan untuk halaman ini, atau Anda dapat membuatnya sendiri. Anda mungkin juga ingin mendukung metode login tambahan, seperti penyedia media sosial (seperti Facebook atau Google), nomor telepon, OIDC, atau SAML.

Pelajari lebih lanjut hal berikut:

• Buat pengguna login dengan JavaScript, Android, iOS, C++, atau Unity.

• Proses login pengguna dengan OIDC atau SAML.

• Migrasikan pengguna dari aplikasi Anda yang sudah ada ke Identity Platform.