Cara Mudah Menambahkan Fitur Registrasi di Blogger dengan Firebase

Pada artikel kali ini, saya akan membahas sekaligus membagikan source code untuk menambahkan fitur registrasi di Blogger/Blogspot menggunakan Firebase.

Salah satu kendala utama adalah keterbatasan fitur bawaan Blogger. Oleh karena itu, kita perlu menggunakan database pihak ketiga untuk menyimpan data pengguna yang mendaftar di blog. Semua proses harus dilakukan secara manual, termasuk menghubungkan Firebase Authentication dan Database Firebase dengan kode JavaScript yang digunakan di blog. Ini berbeda dengan WordPress, yang sudah menyediakan plugin khusus untuk fitur login, sehingga pemasangannya jauh lebih mudah dan tidak perlu dilakukan secara manual.

Dalam tutorial ini, saya hanya akan fokus pada cara menambahkan fitur registrasi. Sementara untuk fitur login, akan saya bahas secara terpisah di artikel berikutnya agar lebih mudah dipahami dan tidak terlalu panjang dalam satu pembahasan.

Cara Memasang Fitur Register di Blogger Menggunakan Firebase

Source code fitur register yang akan saya bagikan ini memerlukan database dari Firebase untuk menyimpan data-data user yang telah mendaftar di blog. Nantinya, jika user sudah berhasil melalukan registrasi dan berhasil melalukan VERIFIKASI EMAIL, data user akan dilanjutkan dan disimpan ke database Firebase secara otomatis.

Selan itu, saya juga menambahkan fungsi validasi untuk mencocokkan data yang akan didaftarkan dengan data yang sudah tersimpan di database. Jika email atau nomor telepon pengguna ternyata sudah terdaftar di database, maka user tadi tidak dapat menggunakan data yang sama (simpelnya agar tidak terjadi penggunaan duplikat data). Dan untuk cara pemasangannya akan saya bagi menjadi beberapa tahap supaya memudahkan dalam memahami langkah-langkahnya. Simak dan ikuti tahapnya di bawah ini sampai selesai ya.

Kenapa Harus Ada Verifikasi Email?

Tahap verifikasi email ini bertujuan untuk mencegah adanya spam pendaftaran (mendaftar secara berturut-turut) serta pendaftaran dengan data yang tidak valid dari pengunjung. Jadi jika ada pengunjung yang ingin mendaftar di blog kamu, mereka harus menggunakan data email yang valid karena harus melewati proses verifikasi atau konfirmasi pendaftaran terlebih dahulu.

Membuat Proyek Web App di Firebase

Karena fitur registrasi ini memerlukan database, langkah pertama yang perlu dilakukan adalah membuat proyek Firebase untuk menyimpan data pengguna. Jika kamu sudah memiliki proyek Firebase kosong, kamu bisa melewati langkah ini dan langsung ke tahap berikutnya.

Mendaftarkan App Web di Firebase

Langkah-langkah:

1. Buka Firebase

2. Kunjungi situs Firebase di https://firebase.google.com.

3. Jika ini pertama kalinya menggunakan Firebase, klik tombol "Mulai", lalu masuk menggunakan akun Google kamu.

4. Setelah berhasil masuk ke akun Firebase, klik tombol "Add Project" di halaman dashboard.

5. Ikuti langkah-langkah yang diberikan hingga proyek Firebase berhasil dibuat.

6. Setelah proyek berhasil dibuat, klik ikon "</>" (CODE) untuk membuat app web baru dalam proyek tersebut.

Mendaftarkan App Web di Firebase

Langkah-langkah:

1. Masukkan nama untuk app web sesuai keinginan.

2. Klik tombol "Register app" untuk melanjutkan.

3. Pada tahap kedua, pilih opsi yang menggunakan tag <script>.

4. SALIN semua script yang ditampilkan pada halaman konfigurasi.

5. Script ini berisi API key, authDomain, projectId, dan informasi lain yang diperlukan untuk menghubungkan Firebase ke Blogger.

6. Setelah menyalin script, klik tombol "Continue to console" untuk masuk ke dashboard Firebase.

7. Login dengan Akun Google

Buat Proyek Baru

Ikuti Petunjuk Pembuatan Proyek

1. Tambahkan App Web

Setelah tahap ini selesai, proyek Firebase telah siap digunakan untuk proses registrasi pengguna. Selanjutnya, kita akan membuat Realtime Database untuk menyimpan data pengguna yang terdaftar.

Setelah membuat proyek Firebase, langkah selanjutnya adalah mendaftarkan app web agar dapat digunakan di Blogger.

2. Beri Nama Web App

3. Pilih Opsi Integrasi

4. Salin Konfigurasi Firebase

5. Selesai!

Langkah berikutnya adalah mengintegrasikan script Firebase ke dalam Blogger agar fitur registrasi bisa digunakan.

Sampai tahap ini sudah selesai membuat project dan web app baru di Firebase. Langkah selanjutnya membuat realtime database baru. Untuk caranya, ikuti langkah-langkah pada poin berikut.

Membuat Realtime Database di Firebase

Masih di halaman project sebelumnya, klik menu Build Realtime Database Create Database.

Memasang Fitur Register Authentication di Blogger

Membuat Realtime Database Firebase baru

Untuk lokasi realtime database, gunakan opsi default, United States (us-central1) dan untuk security rules pilih yang Start in locked mode. Kemudian klik tombol Enable.

Kemudian masuk ke tab Rules lalu ganti semua script rules bawaan dengan rules di bawah ini.

{

"rules": {

".read": true,

".write": true

}

Rules ini bisa kamu ganti dan sesuaikan sendiri sesuai kebutuhan kamu dan rules ini juga yang menentukan script berfungsi atau tidak.

Selesai!

Jika Teman-teman bingung lihat pada gambar Alurnya

Lihat Petunjuk Gambar Ini

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Membuat Project Authentication Firebase

Project authentication ini digunakan untuk metode registrasi dan login user. Di sini saya hanya akan contohkan metode register menggunakan email dan password. Jika kamu ingin menambahkan metode lain seperti menggunakan akun Google juga bisa.

Masih di halaman project yang sama, buka menu Build Authentication klik tombol Get started.

Pilih pada tab Sign-in method kemudian pilih Email/Password. Dan jangan lupa aktifkan terlebih dulu kedua pengaturan seperti gambar di bawah ini. Setelah itu klik Save.

Cara Memasang Fitur Register di Blogger dengan Firebase Authentication

Setelah itu masuk ke tab bagian Settings Authorized domains. Setelah itu klik Add domain lalu tambahkan domain blog kamu.

Di poin ini kamu bisa sesuaikan pengaturan pesan email verifikasi yang akan dikirim untuk user. Secara default, semua pesan seperti konfirmasi email dan reset password menggunakan bahasa Inggris. Kamu bisa atur melalui tab Templates.

Memasang Script Register di Blogger

Masuk ke akun Blogger kamu.

Buat halaman baru khusus untuk form registrasi user.

Pindah ke Tampilan HTML.

Setelah itu salin dan tempelkan seluruh kode di bawah ini.

Salin dan tempelkan seluruh skrip yang ada di bawah ini.

Selesai!

Jangan lupa ganti bagian config Firebase dengan script config Firebase kamu yang sudah kamu salin pada tahap Pembuatan Akun Firebase.

HTML
CCS
javascript


    <!-- HTML REGITRASI Form Firebase BY EGIAGAN.COMm -->
<form id=registration_form name=registration_form><div class=form-container><h2>Registrasi Akun</h2><input class=input-field id=name placeholder="Nama Anda"> <input class=input-field id=email placeholder="Email (ex. contoh@gmail.com)"name=email type=email> <input class=input-field id=password placeholder="Password (ex. contoh123)"name=password type=password> <button class=submit-button id=register type=button name=register>DAFTAR</button><div style=margin-top:20px;text-align:center><span>Sudah punya akun?</span><br><button class=submit-button id=login_redirect type=button onclick='window.location.href="/p/login.html"'>LOGIN</button></div></div></form><div class=egiaganAlert></div><a class=egiagancom-credit href=https://www.egiagan.com>www.egiagan.com</a>


    <!-- CCS REGITRASI Form Firebase BY EGIAGAN.COMm -->
<style> 
 h1{display:none} body{font-family:'Arial', sans-serif;padding:0;margin:0;height:100vh;display:grid;place-items:center} h2{text-align:center;font-size:24px;color:#333} .form-container{background-color:#ffffff;padding:30px;border-radius:8px;box-shadow:0 4px 10px rgba(0, 0, 0, 0.1);width:100%;max-width:400px;margin:0 20px} .input-field{width:100%;padding:10px;margin:10px 0;border:1px solid #ddd;border-radius:5px;font-size:16px} .input-field:focus{border-color:#007bff;outline:none} .submit-button{width:100%;padding:12px;background-color:#007bff;color:white;border:none;border-radius:5px;font-size:16px;cursor:pointer} .submit-button:hover{background-color:#0056b3} .submit-button:active{background-color:#004085} .egiaganAlert{position:fixed;top:4rem;left:50%;transform:translate(-50%, -50%);padding:1rem 1.25rem;width:100%;max-width:600px;align-items:center;text-align:center;border:1px solid var(--border);border-radius:7px;background-color:var(--postBg);box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);display:none;animation:0.5s ease-out fadeInDown;z-index:3} @media only screen and (max-width:480px){.egiaganAlert{max-width:90%;width:100%;height:auto}.form-container{padding:20px;max-width:90%}.input-field{padding:12px;font-size:14px}.submit-button{padding:14px;font-size:14px}h2{font-size:20px}} @keyframes fadeInDown{from{opacity:0;transform:translate(-50%, -60%)}to{opacity:1;transform:translate(-50%, -50%)}} .egiaganAlert.success{background-color:#d4edda;color:#155724;border-color:#c3e6cb} .egiaganAlert.error{background-color:#f8d7da;color:#721c24;border-color:#f5c6cb} .egiagancom-credit{text-align:center;display:block;margin-top:20px;font-size:14px;color:#007bff} .egiagancom-credit:hover{text-decoration:underline}
</style>


     <!-- JS BY EGIAGAN.COM -->>
<!-- JS -->
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
// Inisialisasi objek egiaganRegister
let egiaganRegister = {
  credit: {
    name: "www.egiagan.com",
    visibility: "visible"
  },
  alert: {
    invalidInput: "Semua kolom harus diisi",
    regisBerhasil: "Registrasi berhasil. Silakan verifikasi email sebelum login.",
    regisGagal: "Terjadi kesalahan saat registrasi. Silakan coba lagi.",
    emailEksis: "Alamat email sudah terdaftar.",
    emailVerifikasi: "Silakan periksa email Anda dan verifikasi akun Anda untuk melanjutkan."
  },
  profileUrl: "/p/login.html"  // URL halaman login
};
// Ganti mengunakan Firebase kamu
// Firebase Config 
const firebaseConfig = {
  apiKey: "AIzaSyCD5PDwaJIJo4w2orykdTBXfN5-EvidVRo",
  authDomain: "egiagan-28999.firebaseapp.com",
  databaseURL: "https://egiagan-28999.firebaseio.com",
  projectId: "egiagan-28",
  storageBucket: "egiagan-28.firebasestorage.app",
  messagingSenderId: "152487898909",
  appId: "1:152487878909:web:e411fcbf8a867d3cb30fe4"
};
// Inisialisasi Firebase
firebase.initializeApp(firebaseConfig);

function _0x33bf(){const _0x215ecd=['href','block','emailVerifikasi','body','sendEmailVerification','3487820lYrgqA','6863780EDnlzl','numeric','getAttribute','getElementById','set','onAuthStateChanged','style','innerHTML','classList','none','disabled','.egiaganAlert','www.egiagan.com','add','14931HYTMaI','1164182JiIGcp','414213UawuwW','code','DOMContentLoaded','7804752wmzWQn','emailEksis','a.egiagancom-credit','getDate','name','getMonth','20UsFdjn','website','value','textContent','email','addEventListener','getFullYear','location','getHours','1305468RqDpBH','error','user','regisBerhasil','users/','2-digit','8304fokrVU','alert','phone','auth','then','id-ID','register','ref','database','createUserWithEmailAndPassword','click','display','profileUrl','querySelector','invalidInput','uid','padStart','emailVerified','trim'];_0x33bf=function(){return _0x215ecd;};return _0x33bf();}const _0x442fda=_0x2bb6;(function(_0x273c84,_0x265685){const _0x109222=_0x2bb6,_0x101183=_0x273c84();while(!![]){try{const _0x2c50f4=parseInt(_0x109222(0xc8))/0x1+parseInt(_0x109222(0xf6))/0x2+-parseInt(_0x109222(0xf7))/0x3*(parseInt(_0x109222(0xbf))/0x4)+-parseInt(_0x109222(0xe7))/0x5+-parseInt(_0x109222(0xfa))/0x6+parseInt(_0x109222(0xe6))/0x7+parseInt(_0x109222(0xce))/0x8*(parseInt(_0x109222(0xf5))/0x9);if(_0x2c50f4===_0x265685)break;else _0x101183['push'](_0x101183['shift']());}catch(_0x89abca){_0x101183['push'](_0x101183['shift']());}}}(_0x33bf,0xb5a16),document['addEventListener'](_0x442fda(0xf9),function(){const _0xcaa513=_0x442fda,_0xce1bcb=document[_0xcaa513(0xea)](_0xcaa513(0xd4)),_0x4cbab1='https://www.egiagan.com',_0x36c6a5=_0xcaa513(0xf3),_0x351d08='egiagancom-credit';function _0x1b923d(){const _0x349902=_0xcaa513;window['location'][_0x349902(0xe1)]=_0x4cbab1;}function _0x561f92(){const _0x57a710=_0xcaa513,_0x6ed18b=document['querySelector'](_0x57a710(0xfc));if(!_0x6ed18b){_0x1b923d();return;}const _0x2f2536=_0x6ed18b[_0x57a710(0xe9)](_0x57a710(0xe1)),_0x419613=_0x6ed18b[_0x57a710(0xc2)][_0x57a710(0xe0)](),_0x2f9ca8=_0x6ed18b[_0x57a710(0xe9)]('class');(_0x2f2536!==_0x4cbab1||_0x419613!==_0x36c6a5||!_0x2f9ca8['includes'](_0x351d08))&&_0x1b923d();}_0x561f92();const _0x3a469b=new MutationObserver(()=>{_0x561f92();});_0x3a469b['observe'](document[_0xcaa513(0xe4)],{'childList':!![],'subtree':!![],'characterData':!![],'attributes':!![]});_0xce1bcb&&_0xce1bcb[_0xcaa513(0xc4)](_0xcaa513(0xd8),function(){const _0x19f4f8=_0xcaa513,_0x5641ee=document[_0x19f4f8(0xea)](_0x19f4f8(0xfe))['value'][_0x19f4f8(0xe0)](),_0x4b8873=document['getElementById'](_0x19f4f8(0xc3))[_0x19f4f8(0xc1)][_0x19f4f8(0xe0)](),_0x50577a=document[_0x19f4f8(0xea)]('password')[_0x19f4f8(0xc1)],_0x1ecdf6=document[_0x19f4f8(0xea)](_0x19f4f8(0xd0))?.[_0x19f4f8(0xc1)][_0x19f4f8(0xe0)]()||'',_0x5940c9=document[_0x19f4f8(0xea)]('bio')?.[_0x19f4f8(0xc1)][_0x19f4f8(0xe0)]()||'',_0x54d858=document[_0x19f4f8(0xea)](_0x19f4f8(0xc0))?.[_0x19f4f8(0xc1)]['trim']()||'';if(!_0x5641ee||!_0x4b8873||!_0x50577a){_0x19cbd2(egiaganRegister['alert'][_0x19f4f8(0xdc)],'error');return;}_0xce1bcb[_0x19f4f8(0xf1)]=!![],firebase[_0x19f4f8(0xd1)]()[_0x19f4f8(0xd7)](_0x4b8873,_0x50577a)[_0x19f4f8(0xd2)](_0x1982c9=>{const _0x2a33fa=_0x19f4f8,_0x23a97a=_0x1982c9[_0x2a33fa(0xca)];return firebase[_0x2a33fa(0xd6)]()[_0x2a33fa(0xd5)](_0x2a33fa(0xcc)+_0x23a97a[_0x2a33fa(0xdd)])[_0x2a33fa(0xeb)]({'uid':_0x23a97a['uid'],'name':_0x5641ee,'email':_0x4b8873,'status':_0x2a33fa(0xca),'premium':![],'phone':_0x1ecdf6,'bio':_0x5940c9,'website':_0x54d858,'expired':new Date()['toLocaleString'](_0x2a33fa(0xd3),{'day':_0x2a33fa(0xcd),'month':_0x2a33fa(0xcd),'year':_0x2a33fa(0xe8),'hour':'2-digit','minute':_0x2a33fa(0xcd),'second':_0x2a33fa(0xcd)})})['then'](()=>{const _0x1508a5=_0x2a33fa;return _0x23a97a[_0x1508a5(0xe5)]();});})[_0x19f4f8(0xd2)](()=>{const _0x3a3f2a=_0x19f4f8;_0x19cbd2(egiaganRegister['alert'][_0x3a3f2a(0xcb)],'success'),_0x19cbd2(egiaganRegister[_0x3a3f2a(0xcf)][_0x3a3f2a(0xe3)],'success'),setTimeout(()=>{const _0x4b3f1a=_0x3a3f2a;window[_0x4b3f1a(0xc6)]['href']=egiaganRegister[_0x4b3f1a(0xda)];},0xbb8);})['catch'](_0x1e10d3=>{const _0x4cfd35=_0x19f4f8;let _0x57de62=egiaganRegister[_0x4cfd35(0xcf)]['regisGagal'];_0x1e10d3[_0x4cfd35(0xf8)]==='auth/email-already-in-use'&&(_0x57de62=egiaganRegister['alert'][_0x4cfd35(0xfb)]),_0x19cbd2(_0x57de62,_0x4cfd35(0xc9));})['finally'](()=>{const _0x3d61f1=_0x19f4f8;_0xce1bcb[_0x3d61f1(0xf1)]=![];});});function _0x19cbd2(_0x4c1652,_0x52b8e3){const _0x31033d=_0xcaa513,_0x31c183=document[_0x31033d(0xdb)](_0x31033d(0xf2));if(!_0x31c183)return;_0x31c183[_0x31033d(0xef)][_0x31033d(0xf4)](_0x52b8e3),_0x31c183[_0x31033d(0xee)]=_0x4c1652,_0x31c183[_0x31033d(0xed)][_0x31033d(0xd9)]=_0x31033d(0xe2),setTimeout(()=>{const _0x4fdf84=_0x31033d;_0x31c183[_0x4fdf84(0xed)][_0x4fdf84(0xd9)]=_0x4fdf84(0xf0),_0x31c183[_0x4fdf84(0xef)]['remove'](_0x52b8e3);},0xfa0);}}));function _0x2bb6(_0x35aae2,_0x2251ed){const _0x33bfff=_0x33bf();return _0x2bb6=function(_0x2bb657,_0x2d6679){_0x2bb657=_0x2bb657-0xbe;let _0x27694b=_0x33bfff[_0x2bb657];return _0x27694b;},_0x2bb6(_0x35aae2,_0x2251ed);}const now=new Date(),expired=now[_0x442fda(0xc5)]()+'-'+String(now[_0x442fda(0xbe)]()+0x1)[_0x442fda(0xde)](0x2,'0')+'-'+String(now[_0x442fda(0xfd)]())[_0x442fda(0xde)](0x2,'0')+'\x20'+String(now[_0x442fda(0xc7)]())[_0x442fda(0xde)](0x2,'0')+':'+String(now['getMinutes']())[_0x442fda(0xde)](0x2,'0')+':'+String(now['getSeconds']())[_0x442fda(0xde)](0x2,'0');firebase[_0x442fda(0xd1)]()[_0x442fda(0xec)](function(_0x414795){const _0xd3a7e3=_0x442fda;_0x414795&&_0x414795[_0xd3a7e3(0xdf)]&&(window[_0xd3a7e3(0xc6)]['href']=egiaganRegister[_0xd3a7e3(0xda)]);});
</script>

Selesai!

Jangan Menganti Credit Pada Kode Registrasi Firebase Agar Kode Bisa Berjalan dan Tidak Beralih ke www.egiagan.com.

Penutup

Sampai di tahap ini, kamu sudah berhasil memasang fitur registrasi di Blogger menggunakan Firebase Authentication. Sekarang, kamu bisa langsung mencoba fitur registrasi yang telah dibuat di blog kamu.Jika ingin melihat tampilan demo fitur registrasi, kamu bisa mengunjungi halaman registrasi yang telah dibuat. Script yang digunakan di halaman tersebut sama dengan script yang sudah dijelaskan sebelumnya.Jika fitur registrasi di blog kamu tidak berfungsi atau mengalami kendala, jangan ragu untuk bertanya di kolom komentar. Selamat mencoba!

Jika ingin menghapus Cridit cukup berlangan Premium saja dan kode tanpa kridit bisa kamu hapus dan ubah

Cara Untuk Berlangganan Premium produk di blog Egiagan.lihat di sini

Untuk cara melalukan pembelian produk di blog Egiagan, lihat di sini.