Cara Menambahkan Fitur Login Authentication Firebase di Blogger

Fitur login authentication sering digunakan pada blog berbasis WordPress yang memiliki self hosting untuk menyimpan data pengguna. Fitur ini sangat bermanfaat, terutama jika blog digunakan untuk keperluan jual beli produk atau sebagai toko online (e-commerce). Dengan adanya login authentication, pengelolaan data pengguna yang ingin bertransaksi melalui blog menjadi lebih praktis. Hal ini semakin penting jika produk yang dijual berupa produk digital yang memerlukan pembaruan secara berkala, karena fitur ini memungkinkan pengelolaan pembaruan produk untuk semua pengguna secara lebih efisien.

Nah, pertanyaannya adalah, apakah memungkinkan untuk menambahkan fitur login authentication di blog yang menggunakan platform Blogger / Blogspot? Jawabannya tentu saja bisa, meskipun prosesnya tidak semudah menginstal plugin di WordPress. Pada artikel kali ini, saya akan membahas sekaligus membagikan cara mengintegrasikan fitur login authentication di Blogger. Fitur ini akan menggunakan layanan authentication serta cloud database gratis dari Firebase, serupa dengan pembahasan sebelumnya mengenai cara menambahkan fitur register autentikasi di blog menggunakan Firebase.

Cara Menambahkan Fitur Login Authentication Firebase di Blogger

Sebelum melanjutkan tutorial mengenai cara menambahkan fitur login authentication Firebase di Blogger, disarankan untuk membaca dan mengikuti terlebih dahulu panduan yang telah dibahas dalam artikel sebelumnya tentang cara menambahkan fitur register authentication Firebase di Blogger. Artikel tersebut mencakup langkah awal seperti pembuatan proyek baru di Firebase, konfigurasi authentication untuk web app, serta pembuatan database Firebase.

Jadi, jika sebelumnya kamu belum mengaktifkan fitur register, sebaiknya baca dan ikuti terlebih dahulu tutorial yang berjudul

Menambahkan fitur registrasi di blogger

. Jika fitur register sudah berhasil diimplementasikan di blog kamu, maka kita bisa melanjutkan dengan menambahkan fitur login authentication Firebase berikut ini.

Buat halaman statis baru di blog kamu.

Masuk ke tab HTML MODE.

Salin dan tempelkan seluruh skrip yang ada di bawah ini.

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

HTML
CCS
javascript


    <!-- HTML Form Login Firebase by egiagan.com -->
<form id=login_form name=login_form><div class=form-container><h2>Login Akun</h2><input class=input-field id=login_email name=email placeholder="Email (ex. contoh@gmail.com)"required type=email> <input class=input-field id=login_password name=password placeholder=Password required type=password> <button class=submit-button id=login type=button name=login>LOGIN</button> <a href=# id=forgot-password-link>Lupa Password?</a><div style=margin-top:20px;text-align:center><span>Belum punya akun?</span><br><button class=submit-button id=register type=button onclick='window.location.href="/p/register.html"'>REGISTER</button></div></div></form><div class=egiaganAlert></div><a href=https://www.egiagan.com class=egiagancom-credit>www.egiagan.com</a>


    <!-- CCS Form Login Firebase by egiagan.com -->
   <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 Form Login Firebase by egiagan.com -->
    <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 async defer>
/*<![CDATA[*/

// Pastikan Firebase sudah dimuat sebelum skrip ini

  // Objek konfigurasi login
  const egiaganLogin = {
    credit: {
      name: "www.egiagan.com",
      visibility: "visible"
    },
    profileUrl: "/p/profil.html",
    alert: {
      invalidInput: "Semua kolom harus diisi",
      loginSukses: "Login berhasil",
      loginGagal: "Terjadi kesalahan. Silakan coba lagi.",
      passwordSalah: "Password salah. Silakan coba lagi.",
      userNotFound: "Akun dengan email ini tidak ditemukan.",
      emailNotVerified: "Email Anda belum diverifikasi. Silakan periksa email Anda untuk verifikasi.",
    }
  };

  // Konfigurasi Firebase

  const firebaseConfig = {
  apiKey: "AIzaSyCD5PDwaJIJo4w2oryFdTBXfN5-EvidVRo",
  authDomain: "egiagan-28.firebaseapp.com",
  databaseURL: "https://egiagan-28.firebaseio.com",
  projectId: "egiagan-28",
  storageBucket: "egiagan-28.firebasestorage.app",
  messagingSenderId: "152487868909",
  appId: "1:152487868909:web:e411fcbf8a867d3cb30fe4"
  };

  // Inisialisasi Firebase hanya jika belum diinisialisasi
  if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
  }

  // Cek apakah user sudah login
  firebase.auth().onAuthStateChanged(function (user) {

    if (user && user.emailVerified) {
      window.location.href = egiaganLogin.profileUrl;
    }
  });

  
/*]]>*/
</script>
<script>
function _0x8acf(){const _0x1bdcbb=['Format\x20email\x20tidak\x20valid.','then','signInWithEmailAndPassword','isConfirmed','Reset\x20Password','Masukkan\x20email\x20Anda\x20untuk\x20menerima\x20link\x20reset\x20password.','/p/profil.html','className','showValidationMessage','auth/wrong-password','flex','35661LCoeaL','Semua\x20kolom\x20harus\x20diisi','class','querySelector','signOut','28696YiYMIm','trim','disabled','contoh@gmail.com','login_email','code','login','preventDefault','href','click','emailVerified','434855vRKgsp','value','email','Email\x20yang\x20Anda\x20masukkan\x20tidak\x20valid.','body','location','catch','textContent','Silakan\x20cek\x20email\x20Anda.','https://www.egiagan.com','style','Gagal!','error','109336qygmfR','Akun\x20dengan\x20email\x20ini\x20tidak\x20ditemukan.','102AUvOzI','auth/user-disabled','fire','344492utzDLR','.egiaganAlert','Kirim','Terjadi\x20kesalahan.','Link\x20Reset\x20Dikirim!','egiagancom-credit','Password\x20salah.\x20Silakan\x20coba\x20lagi.','99JFJVdP','none','addEventListener','Email\x20Anda\x20belum\x20diverifikasi.\x20Silakan\x20periksa\x20email\x20Anda\x20untuk\x20verifikasi.','display','auth','finally','getAttribute','getElementById','Batal','3170250eMfCYc','Email\x20tidak\x20ditemukan.\x20Pastikan\x20sudah\x20terdaftar.','observe','30TkzBor','1239553HQwDqA','success','DOMContentLoaded','auth/invalid-email'];_0x8acf=function(){return _0x1bdcbb;};return _0x8acf();}function _0xddea(_0x4b99ad,_0x499bfa){const _0x8acff4=_0x8acf();return _0xddea=function(_0xddea2f,_0x3ea8fb){_0xddea2f=_0xddea2f-0x109;let _0x59729e=_0x8acff4[_0xddea2f];return _0x59729e;},_0xddea(_0x4b99ad,_0x499bfa);}const _0x1cece4=_0xddea;(function(_0x1cc430,_0x39806e){const _0x267b86=_0xddea,_0x5b2f49=_0x1cc430();while(!![]){try{const _0x8b0ce6=parseInt(_0x267b86(0x130))/0x1+-parseInt(_0x267b86(0x12d))/0x2*(-parseInt(_0x267b86(0x10e))/0x3)+parseInt(_0x267b86(0x12b))/0x4+-parseInt(_0x267b86(0x11e))/0x5*(parseInt(_0x267b86(0x144))/0x6)+parseInt(_0x267b86(0x145))/0x7+parseInt(_0x267b86(0x113))/0x8*(-parseInt(_0x267b86(0x137))/0x9)+-parseInt(_0x267b86(0x141))/0xa;if(_0x8b0ce6===_0x39806e)break;else _0x5b2f49['push'](_0x5b2f49['shift']());}catch(_0x87822c){_0x5b2f49['push'](_0x5b2f49['shift']());}}}(_0x8acf,0x58d1d),document[_0x1cece4(0x139)](_0x1cece4(0x147),()=>{const _0x40f919=_0x1cece4,_0x28111d=document[_0x40f919(0x111)](_0x40f919(0x131)),_0x4aa2e5=document[_0x40f919(0x13f)](_0x40f919(0x119)),_0x1fc90b=document[_0x40f919(0x13f)]('forgot-password-link');function _0x415553(_0x157dbf,_0xe59251){const _0x1b7da9=_0x40f919;if(!_0x28111d)return;_0x28111d[_0x1b7da9(0x125)]=_0x157dbf,_0x28111d[_0x1b7da9(0x10a)]='egiaganAlert\x20'+_0xe59251,_0x28111d[_0x1b7da9(0x128)][_0x1b7da9(0x13b)]=_0x1b7da9(0x10d),setTimeout(()=>{const _0x1b064a=_0x1b7da9;_0x28111d[_0x1b064a(0x128)][_0x1b064a(0x13b)]=_0x1b064a(0x138),_0x28111d['className']='egiaganAlert';},0xfa0);}_0x1fc90b&&_0x1fc90b[_0x40f919(0x139)]('click',function(_0x1eb1bb){const _0x39119a=_0x40f919;_0x1eb1bb[_0x39119a(0x11a)](),Swal['fire']({'title':_0x39119a(0x14d),'text':_0x39119a(0x14e),'input':_0x39119a(0x120),'inputPlaceholder':_0x39119a(0x116),'showCancelButton':!![],'confirmButtonText':_0x39119a(0x132),'cancelButtonText':_0x39119a(0x140),'preConfirm':_0x410296=>{const _0x2fd875=_0x39119a;return!_0x410296&&Swal[_0x2fd875(0x10b)]('Email\x20tidak\x20boleh\x20kosong!'),_0x410296;}})[_0x39119a(0x14a)](_0x7fc2d2=>{const _0x147ec5=_0x39119a;if(_0x7fc2d2[_0x147ec5(0x14c)]){const _0x46039a=_0x7fc2d2[_0x147ec5(0x11f)];firebase['auth']()['sendPasswordResetEmail'](_0x46039a)[_0x147ec5(0x14a)](()=>{const _0x554a1d=_0x147ec5;Swal[_0x554a1d(0x12f)]({'icon':_0x554a1d(0x146),'title':_0x554a1d(0x134),'text':_0x554a1d(0x126),'confirmButtonText':'OK'})['then'](()=>{const _0x2ec454=_0x554a1d;window['location'][_0x2ec454(0x11b)]='/p/login.html';});})[_0x147ec5(0x124)](_0xfe05d=>{const _0x57e6a1=_0x147ec5;let _0x29e837=_0x57e6a1(0x133);if(_0xfe05d[_0x57e6a1(0x118)]==='auth/user-not-found')_0x29e837=_0x57e6a1(0x142);else _0xfe05d[_0x57e6a1(0x118)]===_0x57e6a1(0x148)&&(_0x29e837=_0x57e6a1(0x149));Swal[_0x57e6a1(0x12f)]({'icon':_0x57e6a1(0x12a),'title':_0x57e6a1(0x129),'text':_0x29e837});});}});}),_0x4aa2e5&&_0x4aa2e5[_0x40f919(0x139)](_0x40f919(0x11c),()=>{const _0x571080=_0x40f919,_0x178b64=document[_0x571080(0x13f)](_0x571080(0x117))['value']['trim'](),_0x32f9c7=document['getElementById']('login_password')[_0x571080(0x11f)];if(!_0x178b64||!_0x32f9c7){_0x415553(_0x571080(0x10f),_0x571080(0x12a));return;}_0x4aa2e5[_0x571080(0x115)]=!![],firebase[_0x571080(0x13c)]()[_0x571080(0x14b)](_0x178b64,_0x32f9c7)[_0x571080(0x14a)](({user:_0x36be11})=>{const _0x48ea96=_0x571080;_0x36be11[_0x48ea96(0x11d)]?(_0x415553('Login\x20berhasil',_0x48ea96(0x146)),setTimeout(()=>window['location'][_0x48ea96(0x11b)]=_0x48ea96(0x109),0x5dc)):(_0x415553(_0x48ea96(0x13a),_0x48ea96(0x12a)),firebase[_0x48ea96(0x13c)]()[_0x48ea96(0x112)]());})[_0x571080(0x124)](_0x16e644=>{const _0x103860=_0x571080;let _0x282450;switch(_0x16e644[_0x103860(0x118)]){case _0x103860(0x10c):_0x282450=_0x103860(0x136);break;case'auth/user-not-found':_0x282450=_0x103860(0x12c);break;case _0x103860(0x148):_0x282450=_0x103860(0x121);break;case _0x103860(0x12e):_0x282450='Akun\x20Anda\x20telah\x20dinonaktifkan.';break;default:_0x282450='Terjadi\x20kesalahan.\x20Silakan\x20coba\x20lagi.';}_0x415553(_0x282450,_0x103860(0x12a));})[_0x571080(0x13d)](()=>{const _0x455f36=_0x571080;_0x4aa2e5[_0x455f36(0x115)]=![];});});}),document[_0x1cece4(0x139)](_0x1cece4(0x147),function(){const _0x483a81=_0x1cece4,_0x22b160=_0x483a81(0x127),_0x116b28='www.egiagan.com',_0x11ffd6=_0x483a81(0x135);function _0x4cd5ce(){const _0x572776=_0x483a81;window[_0x572776(0x123)]['href']=_0x22b160;}function _0x50ba35(){const _0x1e0f4f=_0x483a81,_0x3a972c=document[_0x1e0f4f(0x111)]('a.egiagancom-credit');if(!_0x3a972c){_0x4cd5ce();return;}const _0x1206df=_0x3a972c[_0x1e0f4f(0x13e)](_0x1e0f4f(0x11b)),_0x538e8f=_0x3a972c[_0x1e0f4f(0x125)][_0x1e0f4f(0x114)](),_0x357d06=_0x3a972c['getAttribute'](_0x1e0f4f(0x110));if(_0x1206df!==_0x22b160||_0x538e8f!==_0x116b28||!_0x357d06['includes'](_0x11ffd6)){_0x4cd5ce();return;}}_0x50ba35();const _0x5b1981=new MutationObserver(()=>{_0x50ba35();});_0x5b1981[_0x483a81(0x143)](document[_0x483a81(0x122)],{'childList':!![],'subtree':!![],'characterData':!![],'attributes':!![]});}));
</script>

Selesai!

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

Fitur Tambahan pada Login Authentication Firebase

Pada JavaScript login-logout authentication Firebase di atas, saya juga telah menambahkan fitur permintaan reset password untuk pengguna yang lupa kata sandinya. Untuk mereset password, pengguna cukup mengklik tombol "Lupa Password?" lalu memasukkan alamat email yang terdaftar. Jika email yang dimasukkan valid dan sudah terdaftar di database, Firebase akan mengirimkan email konfirmasi berisi tautan untuk mengatur ulang kata sandi.

Fitur reset kata sandi mungkin tidak akan berfungsi jika konfigurasi script rules di Firebase tidak diatur dengan benar (lihat pada poin kedua dan langkah ketiga). Pastikan bahwa aturan database di Firebase sudah ditulis dengan benar agar fitur ini berjalan dengan baik.

Selain itu, saya juga menambahkan fitur validasi email pengguna. Jika email pengguna belum diverifikasi, mereka tidak akan bisa login. Namun, setelah proses verifikasi selesai, pengguna dapat menggunakan email tersebut untuk mengakses akun mereka.

Mengapa Tidak Menggunakan Login dengan Akun Google?

Karena artikel ini merupakan kelanjutan dari pembahasan sebelumnya, di mana metode autentikasi yang digunakan adalah Email dan Password, bukan login menggunakan Akun Google. Jika ingin menambahkan opsi login dengan Akun Google, kamu harus mengaktifkan metode tersebut di provider authentication Firebase dan melakukan penyesuaian pada JavaScript. Ke depannya, saya berencana untuk memperbarui artikel ini dan menambahkan metode login menggunakan Akun Google. Jadi, nantikan pembaruannya!

Kesimpulan

Itulah tutorial tentang cara membuat fitur login autentikasi di Blogger menggunakan Firebase. Script yang saya bagikan di atas merupakan implementasi login-logout dasar. Kamu bisa mengembangkan fungsionalitasnya sesuai kebutuhan, misalnya dengan membuat halaman khusus yang memuat informasi pribadi pengguna atau data transaksi pembelian mereka. Jika ingin lebih spesifik, kamu juga bisa menambahkan sistem autentikasi untuk memberikan akses eksklusif bagi pengguna premium. Sesuaikan dan kreasikan sesuai dengan kebutuhan dan kreativitasmu!

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