Menambahkan Firebase ke layanan web

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 Firebase ke project Google Cloud, konfigurasikan setelan autentikasi, lalu tambahkan Firebase ke layanan web Anda.

Dengan menambahkan Firebase ke layanan web, Anda dapat mengautentikasi pengguna, sehingga Anda dapat memberikan pengalaman yang dipersonalisasi kepada setiap 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:

    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-1

Menambahkan Firebase ke project Google Cloud

Untuk menggunakan autentikasi Firebase dengan layanan web, tambahkan Firebase ke project Google Cloud dan konfigurasikan setelan autentikasi Anda.

  1. Tambahkan Firebase ke project Google Cloud yang sudah ada menggunakan alat Tambahkan project di Firebase console.

    Anda juga dapat memilih untuk menggunakan akun Firebase dengan nama yang berbeda, yang tidak terkait dengan project Google Cloud Anda yang sudah ada.

  2. Aktifkan penyedia login autentikasi di Firebase console. Untuk layanan web ini, Anda harus mengaktifkan penyedia login dengan Email/Sandi dan Google:

    1. Klik Build > Authentication > Sign-in method.

    2. Di bagian Sign-in providers, arahkan kursor ke penyedia Email/Password, lalu klik ikon pensil.

      Penyedia login

    3. Aktifkan tombol Enable untuk menggunakan autentikasi Email/Sandi.

      Aktifkan tombol Enable

    4. Setelah mengaktifkan penyedia, klik Save.

    5. Lakukan hal yang sama untuk penyedia login Google.

  3. Agar Firebase dapat melakukan autentikasi dengan benar, domain Anda perlu diotorisasi untuk pengalihan OAuth. Untuk memberikan otorisasi kepada domain Anda:

    1. Pilih Build > Authentication > Settings.

    2. Di bagian Authorized domains di halaman Settings, klik Add Domain.

    3. Masukkan domain aplikasi Anda di App Engine, kecuali awalan http://:

      PROJECT_ID. REGION_ID.r.appspot.com dengan PROJECT_ID adalah ID project Google Cloud Anda.

Menambahkan Firebase ke layanan web

Untuk menambahkan Firebase ke layanan web Anda, salin cuplikan kode kustom, file JavaScript, dan file CSS project Firebase ke layanan web Anda:

  1. Buka Firebase console dan pilih proyek Anda.

  2. Dari halaman ringkasan project, di bagian teks Get started by added Firebase to your app, pilih web. Jika sudah memiliki aplikasi yang ditambahkan ke project, Anda mungkin tidak akan melihat teks ini; sebagai gantinya, buka halaman Project Overview > Project settings > General aplikasi yang sudah ada, scroll ke bawah, lalu pilih Tambahkan aplikasi.

  3. Setelah aplikasi terdaftar, cuplikan kode yang disesuaikan akan ditampilkan. Salin konten cuplikan. Untuk melihat cuplikan kode ini lagi nanti, buka halaman Setelan project untuk aplikasi Firebase Anda.

  4. Perbarui file templates/index.html Anda dengan menyelesaikan hal berikut:

    1. Tambahkan baris berikut ke tag <head>:

      <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />

    2. Tambahkan cuplikan kode yang disesuaikan ke tag <body>.

      Untuk tutorial ini, Anda dapat menambahkan kode ke bagian atas isi, karena satu-satunya konten di templates/index.html adalah contoh layanan Firebase. Dalam lingkungan produksi Anda, sebaiknya tambahkan cuplikan kode ke bagian bawah isi, tetapi sebelum Anda menggunakan layanan Firebase apa pun.

      Kode kustom Anda akan terlihat seperti cuplikan tiruan ini:

      <!-- MOCK SNIPPET: DO NOT COPY -->
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->

<script>
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

    3. Ganti TODO dalam cuplikan di atas dengan tag skrip berikut untuk mengaktifkan komponen Autentikasi Firebase:

       <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>

      Alamat skrip ini didokumentasikan dalam dokumentasi UI Firebase untuk Web.

    4. Ganti bagian isi lainnya dengan kode berikut, yang nanti akan Anda gunakan dalam panduan ini untuk menampilkan data pengguna yang diautentikasi:

      <div id="firebaseui-auth-container"></div>

<button id="sign-out" hidden=true>Sign Out</button>

<div id="login-info" hidden=true>
  <h2>Login info:</h2>
  {% if user_data %}
    <dl>
      <dt>Name</dt><dd>{{ user_data['name'] }}</dd>
      <dt>Email</dt><dd>{{ user_data['email'] }}</dd>
      <dt>Last 10 visits</dt><dd>
	{% for time in times %}
          <p>{{ time['timestamp'] }}</p>
        {% endfor %} </dd>
    </dl>
  {% elif error_message %}
    <p>Error: {{ error_message }}</p>
  {% endif %}
</div>

Langkah Berikutnya

Setelah menambahkan Firebase ke project Google Cloud dan layanan web, Anda siap menambahkan kode ke layanan web agar layanan web dapat mengautentikasi pengguna.

Sebelumnya
Menangani data
Berikutnya
Mengautentikasi pengguna