Mengautentikasi pengguna dengan Firebase

ID region

REGION_ID adalah kode singkat yang ditetapkan Google berdasarkan region yang Anda pilih saat membuat aplikasi. Kode ini tidak sesuai dengan negara atau provinsi, meskipun beberapa ID region mungkin tampak mirip dengan kode negara dan provinsi yang umum digunakan. Untuk aplikasi yang dibuat setelah Februari 2020, REGION_ID.r disertakan dalam URL App Engine. Untuk aplikasi lama yang dibuat sebelum tanggal tersebut, ID region bersifat opsional dalam URL.

Pelajari ID region lebih lanjut.

Tambahkan alur login pengguna ke layanan web Anda yang menggunakan Firebase Authentication.

Dalam langkah panduan ini, Anda akan memperbarui layanan web untuk mengautentikasi pengguna, serta mengambil dan menampilkan informasi milik pengguna setelah mereka melakukan autentikasi. Perhatikan bahwa untuk langkah ini, waktu permintaan situs akan tetap bersifat global, bukan spesifik pengguna.

Sebelum memulai

Jika Anda telah menyelesaikan semua langkah sebelumnya dalam panduan ini, lewati bagian ini. Jika tidak, selesaikan salah satu langkah berikut:

Mulai dari Membuat Aplikasi Python 3 dan selesaikan semua langkah menuju langkah ini.
Jika sudah memiliki project Google Cloud, Anda dapat melanjutkan dengan mendownload salinan layanan web dan menambahkan Firebase:
1. Download repositori aplikasi contoh menggunakan Git:
```
git clone https://github.com/GoogleCloudPlatform/python-docs-samples
```
  Atau, Anda dapat mendownload sampel sebagai file zip, lalu mengekstraknya.
2. Buka direktori yang berisi salinan file dari langkah sebelumnya:
```
cd python-docs-samples/appengine/standard_python3/building-an-app/building-an-app-2
```
3. Tambahkan Firebase ke project Google Cloud dan layanan web.

Menambahkan metode autentikasi Firebase

Firebase menyediakan metode dan variabel JavaScript yang dapat digunakan untuk mengonfigurasi perilaku login untuk layanan web Anda. Untuk layanan web ini, tambahkan fungsi logout, variabel yang mengonfigurasi UI login, dan fungsi yang mengontrol perubahan yang terjadi saat pengguna login atau logout.

Untuk menambahkan perilaku yang diperlukan untuk alur autentikasi, ganti metode pemroses peristiwa file static/script.js saat ini dengan kode berikut:

window.addEventListener('load', function () {
  document.getElementById('sign-out').onclick = function () {
    firebase.auth().signOut();
  };

  // FirebaseUI config.
  var uiConfig = {
    signInSuccessUrl: '/',
    signInOptions: [
      // Comment out any lines corresponding to providers you did not check in
      // the Firebase console.
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
      //firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      //firebase.auth.TwitterAuthProvider.PROVIDER_ID,
      //firebase.auth.GithubAuthProvider.PROVIDER_ID,
      //firebase.auth.PhoneAuthProvider.PROVIDER_ID

    ],
    // Terms of service url.
    tosUrl: '<your-tos-url>'
  };

  firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
      // User is signed in, so display the "sign out" button and login info.
      document.getElementById('sign-out').hidden = false;
      document.getElementById('login-info').hidden = false;
      console.log(`Signed in as ${user.displayName} (${user.email})`);
      user.getIdToken().then(function (token) {
        // Add the token to the browser's cookies. The server will then be
        // able to verify the token against the API.
        // SECURITY NOTE: As cookies can easily be modified, only put the
        // token (which is verified server-side) in a cookie; do not add other
        // user information.
        document.cookie = "token=" + token;
      });
    } else {
      // User is signed out.
      // Initialize the FirebaseUI Widget using Firebase.
      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      // Show the Firebase login button.
      ui.start('#firebaseui-auth-container', uiConfig);
      // Update the login state indicators.
      document.getElementById('sign-out').hidden = true;
      document.getElementById('login-info').hidden = true;
      // Clear the token cookie.
      document.cookie = "token=";
    }
  }, function (error) {
    console.log(error);
    alert('Unable to log in: ' + error)
  });
});

Perhatikan bahwa metode onAuthStateChanged(), yang mengontrol perubahan apa saja yang terjadi saat pengguna login atau logout, menyimpan token ID pengguna sebagai cookie. Token ID ini adalah token unik yang dihasilkan Firebase secara otomatis saat pengguna berhasil login, dan digunakan oleh server untuk mengautentikasi pengguna.

Memperbarui layanan web untuk menggunakan token

Selanjutnya, verifikasi pengguna di server menggunakan token ID Firebase yang unik, lalu dekripsi token tersebut sehingga Anda dapat mencetak kembali data kepada mereka.

Untuk menggunakan token ID Firebase:

Ambil, verifikasi, dan dekripsi token dalam metode root dari file main.py Anda:

from flask import Flask, render_template, request
from google.auth.transport import requests
from google.cloud import datastore
import google.oauth2.id_token

firebase_request_adapter = requests.Request()
@app.route("/")
def root():
    # Verify Firebase auth.
    id_token = request.cookies.get("token")
    error_message = None
    claims = None
    times = None

    if id_token:
        try:
            # Verify the token against the Firebase Auth API. This example
            # verifies the token on each page load. For improved performance,
            # some applications may wish to cache results in an encrypted
            # session store (see for instance
            # http://flask.pocoo.org/docs/1.0/quickstart/#sessions).
            claims = google.oauth2.id_token.verify_firebase_token(
                id_token, firebase_request_adapter
            )
        except ValueError as exc:
            # This will be raised if the token is expired or any other
            # verification checks fail.
            error_message = str(exc)

        # Record and fetch the recent times a logged-in user has accessed
        # the site. This is currently shared amongst all users, but will be
        # individualized in a following step.
        store_time(datetime.datetime.now(tz=datetime.timezone.utc))
        times = fetch_times(10)

    return render_template(
        "index.html", user_data=claims, error_message=error_message, times=times
    )

Pastikan bahwa file requirements.txt Anda menyertakan semua dependensi yang diperlukan:
```
Flask==3.0.0
google-cloud-datastore==2.15.1
google-auth==2.17.3
requests==2.28.2
```

Menguji layanan web Anda

Uji layanan web Anda dengan menjalankannya secara lokal di lingkungan virtual:

Jalankan perintah berikut di direktori utama project Anda untuk menginstal dependensi baru dan menjalankan layanan web Anda. Jika Anda belum menyiapkan lingkungan virtual untuk pengujian lokal, lihat menguji layanan web Anda.
```
pip install -r requirements.txt
python main.py
```
Masukkan alamat berikut di browser web untuk melihat layanan web Anda:
```
http://localhost:8080
```

Men-deploy layanan web Anda

Setelah autentikasi berfungsi secara lokal, Anda dapat men-deploy ulang layanan web ke App Engine.

Jalankan perintah berikut dari direktori utama project, tempat file app.yaml Anda berada:

gcloud app deploy

Semua traffic akan otomatis dirutekan ke versi baru yang Anda deploy.

Untuk mengetahui informasi selengkapnya tentang mengelola versi, lihat Mengelola Layanan dan Versi.

Melihat layanan Anda

Untuk meluncurkan browser dan mengakses layanan web dengan cepat di https://PROJECT_ID.REGION_ID.r.appspot.com, jalankan perintah berikut:

gcloud app browse

Langkah berikutnya

Setelah menyiapkan autentikasi pengguna, Anda siap mempelajari cara memperbarui layanan web untuk mempersonalisasi data bagi pengguna terautentikasi.

Sebelumnya

Tambahkan Firebase

Berikutnya

Mempersonalisasi data