Tutorial ini menunjukkan cara mengambil, memverifikasi, dan menyimpan kredensial pengguna menggunakan Firebase Authentication, lingkungan standar App Engine, dan Datastore.
Dokumen ini akan memandu Anda melalui aplikasi pencatatan sederhana bernama Firestore yang menyimpan catatan pengguna di notebook pribadi mereka. Notebook disimpan per pengguna, dan diidentifikasi oleh ID Firebase Authentication unik setiap pengguna. Aplikasi tersebut memiliki komponen berikut:
Frontend mengonfigurasi antarmuka pengguna login dan mengambil ID Firebase Authentication. Frontend ini juga menangani perubahan status autentikasi dan memungkinkan pengguna melihat catatan mereka.
FirebaseUI adalah solusi open source drop-in yang menyederhanakan tugas autentikasi dan UI. SDK menangani login pengguna, yang menautkan beberapa penyedia ke satu akun, memulihkan sandi, dan lainnya. Layanan ini menerapkan praktik terbaik autentikasi untuk pengalaman login yang lancar dan aman.
Backend memverifikasi status autentikasi pengguna dan menampilkan informasi profil pengguna serta catatan pengguna.
Aplikasi ini menyimpan kredensial pengguna di Datastore dengan menggunakan library klien NDB, tetapi Anda dapat menyimpan kredensial tersebut di database pilihan Anda.
Diagram berikut menunjukkan cara frontend dan backend berkomunikasi satu sama lain dan cara kredensial pengguna berpindah dari Firebase ke database.Firenotes didasarkan pada framework aplikasi web Flask. Aplikasi contoh menggunakan Flask karena kesederhanaan dan kemudahan penggunaannya, tetapi konsep dan teknologi yang dipelajari dapat diterapkan, terlepas dari framework yang Anda gunakan.
Tujuan
Dengan menyelesaikan tutorial ini, Anda akan menyelesaikan hal berikut:
- Mengonfigurasi antarmuka pengguna Firebase Authentication.
- Mendapatkan token ID Firebase dan verifikasi menggunakan autentikasi sisi server.
- Menyimpan kredensial pengguna dan data terkait di Datastore.
- Membuat kueri database menggunakan library klien NDB.
- Men-deploy aplikasi ke App Engine.
Biaya
Tutorial ini menggunakan komponen Google Cloud yang dapat ditagih, termasuk:
- Datastore
Gunakan Kalkulator Harga
untuk membuat perkiraan biaya berdasarkan penggunaan yang Anda proyeksikan.
Sebelum memulai
- Instal Git, Python 2.7, dan virtualenv. Untuk mengetahui informasi selengkapnya tentang penyiapan lingkungan pengembangan Python, seperti menginstal Python versi terbaru, lihat Menyiapkan Lingkungan Pengembangan Python untuk Google Cloud.
- 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.
- Menginstal Google Cloud CLI.
-
Untuk initialize gcloud CLI, jalankan perintah berikut:
gcloud init
-
Di konsol Google Cloud, pada halaman pemilih project, pilih atau buat project Google Cloud.
- Menginstal Google Cloud CLI.
-
Untuk initialize gcloud CLI, jalankan perintah berikut:
gcloud init
Jika Anda telah menginstal dan menginisialisasi SDK ke project yang berbeda, tetapkan project gcloud
ke project ID App Engine yang Anda gunakan untuk Firenotes. Baca bagian Mengelola Konfigurasi Google Cloud SDK jika ingin
mengetahui perintah khusus untuk mengupdate project dengan alat gcloud
.
Membuat clone aplikasi contoh
Untuk mendownload sampel ke komputer lokal:
Buat clone repositori aplikasi contoh ke komputer lokal Anda:
git clone https://github.com/GoogleCloudPlatform/python-docs-samples.git
Atau, Anda dapat mendownload contoh sebagai file ZIP dan mengekstraknya.
Buka direktori yang berisi kode contoh:
Untuk mengonfigurasi FirebaseUI dan mengaktifkan penyedia identitas:cd python-docs-samples/appengine/standard/firebase/firenotes
Tambahkan Firebase ke aplikasi Anda dengan mengikuti langkah-langkah berikut:
- Buat project Firebase di Firebase console.
- Jika Anda tidak memiliki project Firebase yang ada, klik Tambahkan project lalu masukkan nama project Google Cloud yang ada atau nama project baru.
- Jika Anda sudah memiliki project Firebase yang ingin digunakan, pilih project tersebut dari konsol.
- Dari halaman ringkasan project, klik Tambahkan Firebase ke aplikasi web Anda. Jika project Anda sudah memiliki aplikasi, pilih Tambahkan Aplikasi dari halaman ringkasan project.
Gunakan bagian
Initialize Firebase
dari cuplikan kode yang disesuaikan project Anda untuk mengisi bagian berikut dari filefrontend/main.js
:
- Buat project Firebase di Firebase console.
Di file
frontend/main.js
, konfigurasikan widget login FirebaseUI dengan memilih penyedia yang ingin Anda tawarkan kepada pengguna.Aktifkan penyedia yang telah Anda pilih untuk disimpan di Firebase console dengan mengklik Authentication > Sign-in method. Kemudian, di bagian Sign-in providers, arahkan kursor ke salah satu penyedia, lalu klik ikon pensil.
Klik tombol Aktifkan, dan bagi penyedia identitas pihak ketiga, masukkan ID dan rahasia penyedia dari situs developer penyedia. Dokumentasi Firebase memberikan petunjuk spesifik di bagian "Sebelum memulai" dalam panduan Facebook, Twitter, dan GitHub. Setelah mengaktifkan penyedia, klik Simpan.
Di Firebase console, pada bagian Authorized Domains, klik Add Domain dan masukkan domain aplikasi Anda di App Engine dalam format berikut:
[PROJECT_ID].appspot.com
Jangan sertakan
http://
sebelum nama domain.
Menginstal dependensi
Buka direktori
backend
dan selesaikan penyiapan aplikasi:cd backend/
Instal dependensi ke direktori
lib
di project Anda:pip install -t lib -r requirements.txt
Di
appengine_config.py
, metodevendor.add()
mendaftarkan library dalam direktorilib
.
Menjalankan aplikasi secara lokal
Untuk menjalankan aplikasi secara lokal, gunakan server pengembangan lokal App Engine:
Tambahkan URL berikut sebagai
backendHostURL
dimain.js
:http://localhost:8081
Buka direktori utama aplikasi tersebut. Kemudian, mulai server pengembangan:
dev_appserver.py frontend/app.yaml backend/app.yaml
Buka http://localhost:8080/ di browser web.
Mengautentikasi pengguna di server
Setelah menyiapkan project dan melakukan inisialisasi aplikasi untuk pengembangan, Anda dapat mempelajari kode tersebut untuk memahami cara mengambil dan memverifikasi token ID Firebase di server.
Mendapatkan token ID dari Firebase
Langkah pertama dalam autentikasi sisi server adalah mengambil token akses untuk diverifikasi. Permintaan Authentication ditangani dengan pemroses onAuthStateChanged()
dari Firebase:
Ketika pengguna login, metode getToken()
Firebase di callback menampilkan token ID Firebase dalam bentuk Token Web JSON (JWT).
Memverifikasi token di server
Setelah pengguna login, layanan frontend akan mengambil catatan apa pun yang ada di
notebook pengguna melalui permintaan GET
AJAX. Hal ini memerlukan otorisasi untuk mengakses data pengguna, sehingga JWT dikirim di header Authorization
permintaan menggunakan skema Bearer
:
Sebelum klien dapat mengakses data server, server Anda harus memverifikasi bahwa token telah ditandatangani Firebase. Anda dapat memverifikasi token ini menggunakan Library Autentikasi Google untuk Python.
Gunakan fungsi verify_firebase_token
library autentikasi untuk memverifikasi token pemilik dan mengekstrak klaim:
Setiap penyedia identitas mengirim kumpulan klaim yang berbeda, tetapi masing-masing memiliki setidaknya
klaim sub
dengan ID pengguna unik dan klaim yang memberikan beberapa informasi
profil, seperti name
atau email
, yang dapat digunakan untuk mempersonalisasi pengalaman
pengguna di aplikasi Anda.
Mengelola data pengguna di Datastore
Setelah melakukan autentikasi, Anda harus menyimpan data pengguna agar dapat dipertahankan setelah sesi login berakhir. Bagian berikut menjelaskan cara menyimpan catatan sebagai entity Datastore dan memisahkan entity berdasarkan ID pengguna.
Membuat entity untuk menyimpan data pengguna
Anda dapat membuat entity di Datastore dengan mendeklarasikan class model NDB bersama properti tertentu seperti bilangan bulat atau string. Datastore mengindeks entity berdasarkan jenis; dalam kasus Firenotes, jenis setiap entity adalah Note
.
Untuk tujuan kueri, setiap Note
disimpan dengan nama kunci, yang merupakan
ID pengguna yang diperoleh dari klaim sub
di bagian sebelumnya.
Kode berikut menunjukkan cara menetapkan properti entity, baik dengan metode konstruktor untuk class model saat entity dibuat maupun melalui penetapan properti individual setelah pembuatan:
Untuk menulis Note
yang baru dibuat ke Datastore, panggil metode put()
pada objek note
.
Mengambil data pengguna
Untuk mengambil data pengguna yang terkait dengan ID pengguna tertentu, gunakan metode query()
NDB untuk menelusuri catatan dalam grup entity yang sama di database.
Entity dalam grup yang sama, atau jalur ancestor memiliki nama kunci yang sama, yang dalam hal ini adalah ID pengguna.
Selanjutnya, Anda dapat mengambil data kueri dan menampilkan catatan di klien:
Men-deploy aplikasi Anda
Anda telah berhasil mengintegrasikan Firebase Authentication dengan aplikasi App Engine. Untuk melihat aplikasi Anda berjalan di lingkungan produksi yang aktif:
- Ubah URL host backend di
main.js
menjadihttps://backend-dot-[PROJECT_ID].appspot.com
. Ganti[PROJECT_ID]
dengan project ID Anda. Deploy aplikasi menggunakan antarmuka command line Google Cloud SDK:
gcloud app deploy backend/index.yaml frontend/app.yaml backend/app.yaml
Lihat permohonan secara langsung di
https://[PROJECT_ID].appspot.com
.
Pembersihan
Agar tidak menimbulkan biaya pada akun Google Cloud Anda untuk resource yang digunakan dalam tutorial ini, hapus project App Engine Anda:
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 berikutnya
- Pelajari arsitektur referensi, diagram, dan praktik terbaik tentang Google Cloud. Lihat Cloud Architecture Center kami.