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:
Sebelum memulai
- 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.
-
Di konsol Google Cloud, pada halaman pemilih project, pilih atau buat project Google Cloud.
-
Pastikan penagihan telah diaktifkan untuk project Google Cloud Anda.
-
Pastikan Anda memiliki peran berikut di project: Identity Platform Admin, Service Usage Admin
Memeriksa peran
-
Di konsol Google Cloud, buka halaman IAM.
Buka IAM - Pilih project.
-
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.
- Di kolom Peran untuk baris yang berisi alamat email Anda, periksa apakah daftar peran menyertakan peran yang diperlukan.
Memberikan peran
-
Di konsol Google Cloud, buka halaman IAM.
Buka IAM - Pilih project.
- Klik Berikan akses.
- Di kolom Akun utama baru, masukkan alamat email Anda.
- Di daftar Pilih peran, pilih peran.
- Untuk memberikan peran tambahan, klik Tambahkan peran lain, lalu tambahkan setiap peran tambahan.
- Klik Simpan.
-
-
Di konsol Google Cloud, pada halaman pemilih project, pilih atau buat project Google Cloud.
-
Pastikan penagihan telah diaktifkan untuk project Google Cloud Anda.
-
Pastikan Anda memiliki peran berikut di project: Identity Platform Admin, Service Usage Admin
Memeriksa peran
-
Di konsol Google Cloud, buka halaman IAM.
Buka IAM - Pilih project.
-
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.
- Di kolom Peran untuk baris yang berisi alamat email Anda, periksa apakah daftar peran menyertakan peran yang diperlukan.
Memberikan peran
-
Di konsol Google Cloud, buka halaman IAM.
Buka IAM - Pilih project.
- Klik Berikan akses.
- Di kolom Akun utama baru, masukkan alamat email Anda.
- Di daftar Pilih peran, pilih peran.
- Untuk memberikan peran tambahan, klik Tambahkan peran lain, lalu tambahkan setiap peran tambahan.
- Klik Simpan.
-
Aktifkan Identity Platform
Di konsol Google Cloud, buka halaman Identity Platform di Cloud Marketplace.
Klik Aktifkan Identity Platform.
Mengonfigurasi login email
Buka halaman Penyedia Identitas.
Di halaman Identity Provider, klik Add a provider.
Pada daftar Select a provider, pilih
Email/Password.Klik tombol Diaktifkan ke aktif.
Untuk menyimpan setelan penyedia, klik Simpan.
Membuat pengguna
Di konsol Google Cloud, buka halaman Pengguna.
Klik Tambahkan pengguna.
Di kolom Email, masukkan email dan sandi. Perhatikan kedua nilai ini karena Anda akan memerlukannya di langkah selanjutnya.
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.
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:
Dari direktori project, instal Firebase menggunakan npm:
npm install firebase
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.
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
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
Membuat file baru bernama
index.html
.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>
Luncurkan
index.html
di browser web Anda. Pesan selamat datang yang menampilkan email pengguna Anda akan muncul.
SDK v8 (lama)
Membuat halaman web
Di komputer lokal Anda, buat file baru bernama
index.html
.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
Pada konsol Google Cloud, buka halaman Penyedia Identitas.
Klik
Application setup details .Salin kode inisialisasi ke
index.html
.
Memproses login pengguna
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 callbackonAuthStateChanged()
.Ganti kode berikut:
- EMAIL_ID: email untuk pengguna yang Anda buat sebelumnya
- PASSWORD: sandi untuk pengguna yang Anda buat sebelumnya
Buka
index.html
di browser web Anda. Pesan selamat datang yang menampilkan email pengguna Anda akan muncul.
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:
Pada konsol Google Cloud, buka halaman Penyedia Identitas.
Untuk menghapus penyedia, klik
Delete di samping nama penyedia. Untuk mengonfirmasi, klik Hapus.Di konsol Google Cloud, buka halaman Pengguna.
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:
- Di konsol Google Cloud, buka halaman Manage resource.
- Pada daftar project, pilih project yang ingin Anda hapus, lalu klik Delete.
- 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.
Migrasikan pengguna dari aplikasi Anda yang sudah ada ke Identity Platform.