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 dengan 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. Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

2. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

   Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

   Go to project selector

3. Make sure that billing is enabled for your Google Cloud project.

4. Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin

   Check for the roles

   1. In the Google Cloud console, go to the IAM page.

      Go to IAM
   2. Select the project.

   3. In the Principal column, find all rows that identify you or a group that you're included in. To learn which groups you're included in, contact your administrator.

   4. For all rows that specify or include you, check the Role colunn to see whether the list of roles includes the required roles.

   Grant the roles

   1. In the Google Cloud console, go to the IAM page.

      Buka IAM
   2. Pilih project.
   3. Klik Berikan akses.

   4. Di kolom New principals, masukkan ID pengguna Anda. Ini biasanya adalah alamat email untuk Akun Google.

   5. Di daftar Pilih peran, pilih peran.
   6. Untuk memberikan peran tambahan, klik Tambahkan peran lain, lalu tambahkan setiap peran tambahan.
   7. Klik Simpan.

   8. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

      Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

      Go to project selector

   9. Make sure that billing is enabled for your Google Cloud project.

   10. Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin

       Check for the roles

       1. In the Google Cloud console, go to the IAM page.

          Go to IAM
       2. Select the project.

       3. In the Principal column, find all rows that identify you or a group that you're included in. To learn which groups you're included in, contact your administrator.

       4. For all rows that specify or include you, check the Role colunn to see whether the list of roles includes the required roles.

       Grant the roles

       1. In the Google Cloud console, go to the IAM page.

          Buka IAM
       2. Pilih project.
       3. Klik Berikan akses.

       4. Di kolom New principals, masukkan ID pengguna Anda. Ini biasanya adalah alamat email untuk Akun Google.

       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 dengan email

1. Buka halaman Penyedia Identitas.

   Buka Identity Provider

2. Di halaman Penyedia Identitas, klik Tambahkan penyedia.

3. Di daftar Pilih penyedia, pilih Email/Sandi.

4. Klik tombol Aktifkan 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 memerlukannya pada langkah berikutnya.

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

Memproses login pengguna

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

Catatan: Penggunaan SDK v9 sangat direkomendasikan, terutama untuk aplikasi produksi. Jika Anda memerlukan dukungan untuk opsi pengelolaan SDK lainnya, seperti window.firebase, lihat artikel 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/11.0.2/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 produksi.

Mengakses Identity Platform di JavaScript

Setelah menginisialisasi Firebase SDK, Anda dapat menggunakannya di mana saja di aplikasi. Misalnya, berikut adalah aplikasi yang mencoba login pengguna hardcode 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 bundler modul untuk mengurangi ukuran

Catatan: Anda dapat mengabaikan langkah ini jika menggunakan alat CLI framework JavaScript, seperti Angular CLI, Next.js, Vue CLI, atau Create React App. Lihat panduan pemaketan modul untuk mendapatkan 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 Anda. Lihat Menggunakan pemaket modul dengan Firebase untuk mengetahui informasi selengkapnya.

Mengimpor JavaScript ke halaman

1. Membuat file baru bernama index.html.

2. Tambahkan dua penampung HTML dasar dan impor js yang dipaketkan.

   <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, 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 SDK klien Identity Platform dengan kunci API Anda

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

   Buka Identity Provider

2. Klik Detail penyiapan aplikasi.

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 batasan untuk upaya login pengguna yang gagal. Beberapa upaya login yang cepat dan gagal akan mengunci pengguna dari akunnya untuk sementara.

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

Pembersihan

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

Menghapus penyedia dan pengguna

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

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

   Buka Identity Provider

2. Untuk menghapus penyedia, klik Hapus 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 beberapa arsitektur, tutorial atau panduan memulai, dengan menggunakan kembali project dapat membantu Anda agar tidak melampaui batas kuota project.

1. In the Google Cloud console, go to the Manage resources page.

   Go to Manage resources

2. In the project list, select the project that you want to delete, and then click Delete.
3. In the dialog, type the project ID, and then click Shut down to delete the 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 membuat UI Anda 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:

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

• Memproses login pengguna dengan OIDC atau SAML.

• Migrasi pengguna dari aplikasi yang ada ke Identity Platform.