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

<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)" type="email" required />
    <input class="input-field" id="login_password" name="password" placeholder="Password" type="password" required />
    <button class="submit-button" id="login" name="login" type="button">LOGIN</button>
    <a href="#" id="forgot-password-link">Lupa Password?</a>
  </div>
</form>

<div class="egiaganAlert"></div>
<a class="egiagancom-credit" href="https://www.egiagan.com">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 async defer>
/*<![CDATA[*/
// Inisialisasi objek egiaganLogin untuk login
let egiaganLogin = {
  credit: {
    name: "www.egiagan.com",
    visibility: "visible"
  },
  profileUrl: "/Profil.html",  // Menyimpan URL halaman profil
  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.",
  }
};

// Firebase Configuration
const firebaseConfig = {
  apiKey: "AIzaSyA7pxyhI6whw5mCp9q6rRNgoSawNTmDqV0",
  authDomain: "projek-kamu-f30c7.firebaseapp.com",
  projectId: "projek-kamu-f30c7",
  storageBucket: "projek-kamu-f30c7.firebasestorage.app",
  messagingSenderId: "573409404905",
  appId: "1:573409404905:web:2d4ca6078ac6395a3b8d78"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

(function(_0x2a89d7,_0x42362b){function _0x11b696(_0x17f9fe,_0x1b8d3e,_0x28a67c,_0x183ecf){return _0x3ee9(_0x28a67c- -0x2c5,_0x17f9fe);}const _0x379619=_0x2a89d7();function _0x65f05d(_0x4d032e,_0x29e25f,_0x24c5e7,_0x909028){return _0x3ee9(_0x909028- -0x71,_0x24c5e7);}while(!![]){try{const _0x3bf4e4=-parseInt(_0x11b696(-0x64,-0xa0,-0x65,-0x51))/(-0x9d2+-0x33e*0x1+0xd11)*(-parseInt(_0x65f05d(0x202,0x206,0x206,0x1c6))/(0x147c+0x1b6*-0x4+-0x2ba*0x5))+parseInt(_0x11b696(-0x72,-0x95,-0x68,-0x88))/(0x5*-0xbe+-0x85d*0x3+0x1cd0)*(parseInt(_0x11b696(-0xb9,-0x77,-0x79,-0xb2))/(-0x332*-0xb+-0x9*0x349+-0x39*0x19))+-parseInt(_0x11b696(-0x105,-0xd6,-0xd3,-0xad))/(-0x1aaa+-0x2*-0x220+0x166f)*(parseInt(_0x65f05d(0x1af,0x1e5,0x1ef,0x1e3))/(-0x183*-0xb+0x501+-0x159c))+parseInt(_0x11b696(-0x90,-0x76,-0x72,-0x98))/(0x2018+0x61b+-0x262c)+parseInt(_0x11b696(-0xb7,-0x9e,-0xbf,-0xc6))/(-0xfa1*0x1+-0x1f17+-0x8*-0x5d8)*(-parseInt(_0x65f05d(0x1cc,0x1cd,0x175,0x190))/(0x24b1+-0x213b+-0x36d))+-parseInt(_0x65f05d(0x155,0x14b,0x1c8,0x185))/(0x1*0x21dd+-0x4ee*0x6+-0x43f*0x1)+parseInt(_0x65f05d(0x150,0x19d,0x171,0x17c))/(0xb*-0x2cf+-0xe3*0x5+-0x713*-0x5)*(parseInt(_0x11b696(-0x53,-0x70,-0x76,-0x3b))/(-0x9*0x2d3+0x1549*0x1+0xd6*0x5));if(_0x3bf4e4===_0x42362b)break;else _0x379619['push'](_0x379619['shift']());}catch(_0x27c3b1){_0x379619['push'](_0x379619['shift']());}}}(_0x5c6f,0x8149+-0x1*-0xb1115+-0x38166));const _0x26c291=(function(){const _0x4da99f={};_0x4da99f['wWXdX']=function(_0x21f56a,_0x4153b2){return _0x21f56a===_0x4153b2;},_0x4da99f[_0x4f8d99(0x5be,0x5c1,0x5a3,0x5d2)]='UqZqi',_0x4da99f[_0x4f8d99(0x583,0x5b1,0x55a,0x59b)]=function(_0x58273a,_0xaf0324){return _0x58273a!==_0xaf0324;},_0x4da99f[_0x3562b3(0x5c5,0x600,0x5c5,0x5eb)]='mzSfd';function _0x4f8d99(_0x3f580a,_0x58d62a,_0x577f02,_0x496921){return _0x3ee9(_0x496921-0x3a8,_0x3f580a);}function _0x3562b3(_0x1b3b56,_0x41491c,_0x3b37b0,_0x4fcdb2){return _0x3ee9(_0x1b3b56-0x374,_0x3b37b0);}const _0x2b9bae=_0x4da99f;let _0x4327e6=!![];return function(_0x131c24,_0x5304ff){function _0x51530b(_0xbb13e0,_0x1b051c,_0x1ac8a1,_0x109e37){return _0x3562b3(_0x109e37- -0x3c0,_0x1b051c-0x116,_0x1ac8a1,_0x109e37-0x176);}const _0x4cbc2a={'yCxOc':function(_0x1754b6,_0x1cc5b4){function _0x3f03e4(_0x2798c8,_0x3394b5,_0xa8abd9,_0xdae201){return _0x3ee9(_0xa8abd9- -0x172,_0xdae201);}return _0x2b9bae[_0x3f03e4(0x88,0xf2,0xbd,0xf7)](_0x1754b6,_0x1cc5b4);},'jrUhm':_0x2b9bae[_0x51530b(0x20e,0x1a5,0x1c4,0x1de)]};function _0xb988a6(_0xc511ed,_0x5aa4ed,_0x5056e0,_0x53158a){return _0x4f8d99(_0x5aa4ed,_0x5aa4ed-0x9c,_0x5056e0-0x1e5,_0x53158a- -0x648);}if(_0x2b9bae[_0x51530b(0x1de,0x1de,0x197,0x1a7)](_0x2b9bae[_0xb988a6(-0x30,-0x20,-0x8c,-0x4f)],_0x2b9bae[_0xb988a6(-0x15,-0x8f,-0x26,-0x4f)])){if(_0x42581d){const _0x5134f3=_0x1a0d04[_0x51530b(0x25e,0x216,0x1f8,0x22b)](_0x5e5b17,arguments);return _0x53c5cb=null,_0x5134f3;}}else{const _0x550b5d=_0x4327e6?function(){function _0x155aff(_0x16cc5c,_0x2ef55c,_0xe7a650,_0xcb0963){return _0xb988a6(_0x16cc5c-0x11a,_0x2ef55c,_0xe7a650-0xc5,_0x16cc5c-0x79);}function _0x4fc3e1(_0x5ad55d,_0x5249b4,_0x1a402b,_0x2fe19a){return _0x51530b(_0x5ad55d-0xb7,_0x5249b4-0xa9,_0x2fe19a,_0x5249b4- -0x26e);}if(_0x5304ff){if(_0x4cbc2a[_0x155aff(-0x15,-0x59,-0x3,-0x5d)](_0x4fc3e1(-0xbb,-0x7b,-0x8a,-0x7e),_0x4cbc2a[_0x4fc3e1(-0x5a,-0x86,-0xcb,-0xa4)])){if(_0x1a54a0){const _0x43a151=_0x1fe115[_0x4fc3e1(-0x4f,-0x43,-0x5d,-0x17)](_0x14fbdb,arguments);return _0x4fbfac=null,_0x43a151;}}else{const _0x505679=_0x5304ff['apply'](_0x131c24,arguments);return _0x5304ff=null,_0x505679;}}}:function(){};return _0x4327e6=![],_0x550b5d;}};}()),_0x28f22d=_0x26c291(this,function(){function _0x374f79(_0x130dcd,_0x172a86,_0x49c751,_0x4ff77f){return _0x3ee9(_0x172a86- -0x2,_0x4ff77f);}function _0x49b5b5(_0x27d523,_0x4fa094,_0x3d2a2a,_0x4281b8){return _0x3ee9(_0x4281b8- -0x2d,_0x4fa094);}return _0x28f22d[_0x374f79(0x252,0x25f,0x29b,0x238)]()['search'](_0x374f79(0x235,0x223,0x235,0x21a)+'+$')[_0x49b5b5(0x212,0x230,0x24c,0x234)]()['constructo'+'r'](_0x28f22d)[_0x374f79(0x26d,0x241,0x23f,0x220)](_0x49b5b5(0x202,0x1fe,0x230,0x1f8)+'+$');});_0x28f22d();const _0x43d735=(function(){function _0x2f62e9(_0xfd8b01,_0x1732c3,_0x2893c7,_0x3895fb){return _0x3ee9(_0xfd8b01-0x296,_0x3895fb);}const _0x22039b={};_0x22039b[_0x2f62e9(0x502,0x4f2,0x549,0x535)]=_0x2f3ccb(0x39d,0x360,0x367,0x364),_0x22039b[_0x2f3ccb(0x3ba,0x38b,0x3a4,0x3c5)]=function(_0x2727d8,_0x3fc5eb){return _0x2727d8===_0x3fc5eb;},_0x22039b['FrsOx']='haoyz',_0x22039b[_0x2f3ccb(0x3b0,0x3f6,0x3ca,0x3b7)]=_0x2f62e9(0x4eb,0x519,0x518,0x4bc);const _0x3e3ca8=_0x22039b;function _0x2f3ccb(_0x108e8a,_0x3bb168,_0x50be58,_0xf8a76d){return _0x3ee9(_0x108e8a-0x19a,_0x50be58);}let _0x93dbaa=!![];return function(_0xd59cf,_0x1a7a1b){function _0x1c348b(_0x54844a,_0x3d195f,_0x229334,_0x4f6cff){return _0x2f3ccb(_0x4f6cff- -0x2a,_0x3d195f-0xb5,_0x54844a,_0x4f6cff-0x5a);}function _0x31c5a9(_0x1e0761,_0x52f190,_0x222027,_0x367e61){return _0x2f3ccb(_0x52f190-0x170,_0x52f190-0xaf,_0x222027,_0x367e61-0x1a);}if(_0x3e3ca8[_0x31c5a9(0x50d,0x52a,0x517,0x570)](_0x3e3ca8[_0x1c348b(0x3bb,0x406,0x401,0x3cf)],_0x3e3ca8[_0x1c348b(0x3a5,0x36d,0x3a2,0x386)])){const _0xbced2c=_0x3629ce[_0x31c5a9(0x55e,0x581,0x593,0x5ba)](_0x39facd,arguments);return _0xfcff46=null,_0xbced2c;}else{const _0x3df1f0=_0x93dbaa?function(){function _0x5bc2f8(_0x462b12,_0x204714,_0x519bbb,_0x113069){return _0x1c348b(_0x204714,_0x204714-0x29,_0x519bbb-0x13e,_0x113069- -0x48e);}function _0x212386(_0x11eb73,_0x543bc0,_0x41e675,_0x2750f1){return _0x1c348b(_0x11eb73,_0x543bc0-0x98,_0x41e675-0xd5,_0x543bc0- -0xf0);}if(_0x3e3ca8[_0x5bc2f8(-0x85,-0x71,-0xb0,-0xb2)]!==_0x3e3ca8['HPyxK']){const _0x40075a=_0x3ee918[_0x5bc2f8(-0x139,-0x119,-0xfe,-0x112)+'r'][_0x5bc2f8(-0xda,-0xdf,-0x11c,-0x10a)]['bind'](_0x318f8c),_0x4b7442=_0x2019e5[_0x523050],_0x2c43fe=_0x575e86[_0x4b7442]||_0x40075a;_0x40075a[_0x5bc2f8(-0xdc,-0xbb,-0x119,-0xee)]=_0x733a21[_0x212386(0x31a,0x2ed,0x2e4,0x2c3)](_0x32c438),_0x40075a['toString']=_0x2c43fe[_0x5bc2f8(-0xf9,-0xdd,-0xa9,-0xbd)][_0x212386(0x2e5,0x2ed,0x2c4,0x2f3)](_0x2c43fe),_0x377fa2[_0x4b7442]=_0x40075a;}else{if(_0x1a7a1b){const _0x1f4e15=_0x1a7a1b[_0x5bc2f8(-0x69,-0x61,-0x78,-0xa7)](_0xd59cf,arguments);return _0x1a7a1b=null,_0x1f4e15;}}}:function(){};return _0x93dbaa=![],_0x3df1f0;}};}());function _0x5adf3f(_0x43415d,_0x253f9d,_0x3f8650,_0xc96729){return _0x3ee9(_0x43415d-0x3e,_0x253f9d);}const _0x421158=_0x43d735(this,function(){const _0x51eeee={'Evjvo':function(_0x536fa5){return _0x536fa5();},'eRtbj':function(_0x160fbf,_0x233d21){return _0x160fbf(_0x233d21);},'bRoRG':function(_0x1e9e35,_0x4ba73b){return _0x1e9e35+_0x4ba73b;},'ksOww':_0x4ec646(0x37e,0x36d,0x347,0x365)+'nction()\x20','qbTva':_0x4ec646(0x35f,0x3d3,0x3a8,0x38f)+_0x4ec646(0x3a1,0x3cd,0x3ba,0x3b3)+'rn\x20this\x22)('+'\x20)','sDKUG':'log','NGJyQ':'warn','LxXOF':_0x1f98c1(0x5fa,0x5ae,0x5df,0x5ee),'MJSsw':_0x1f98c1(0x5dd,0x5d5,0x5c1,0x5be),'BwATp':_0x4ec646(0x326,0x31f,0x321,0x33a),'ClvPQ':_0x4ec646(0x354,0x392,0x3c5,0x387),'evVWw':function(_0x4bb7b0,_0x3ef0a5){return _0x4bb7b0<_0x3ef0a5;},'aBtxZ':_0x1f98c1(0x5d8,0x5f4,0x60a,0x5c5)};function _0x4ec646(_0x5b4580,_0x1cc576,_0x1d0d08,_0x4f08c4){return _0x3ee9(_0x4f08c4-0x14b,_0x1cc576);}let _0x1a84b6;try{const _0x5d79b0=_0x51eeee['eRtbj'](Function,_0x51eeee[_0x1f98c1(0x5cf,0x59a,0x5a0,0x5c3)](_0x51eeee[_0x4ec646(0x382,0x316,0x343,0x355)]+_0x51eeee[_0x1f98c1(0x5fb,0x5b4,0x5b2,0x5b7)],');'));_0x1a84b6=_0x51eeee['Evjvo'](_0x5d79b0);}catch(_0x51235f){_0x1a84b6=window;}const _0x9c2dea=_0x1a84b6[_0x4ec646(0x327,0x365,0x343,0x343)]=_0x1a84b6[_0x4ec646(0x38a,0x329,0x355,0x343)]||{};function _0x1f98c1(_0x36fdfd,_0x5161a0,_0x3ab48e,_0x512f84){return _0x3ee9(_0x512f84-0x37d,_0x3ab48e);}const _0xcd8d12=[_0x51eeee['sDKUG'],_0x51eeee[_0x1f98c1(0x5ce,0x5ed,0x603,0x5e4)],_0x51eeee['LxXOF'],_0x51eeee[_0x1f98c1(0x52c,0x58f,0x530,0x56e)],_0x4ec646(0x347,0x366,0x3ad,0x36c),_0x51eeee[_0x1f98c1(0x597,0x55f,0x5da,0x592)],_0x51eeee[_0x4ec646(0x382,0x3d2,0x368,0x3af)]];for(let _0x341815=-0x2047+0x1832+0x815;_0x51eeee[_0x1f98c1(0x591,0x586,0x57a,0x571)](_0x341815,_0xcd8d12[_0x1f98c1(0x5ba,0x59b,0x5f0,0x5db)]);_0x341815++){if(_0x1f98c1(0x5f0,0x5c1,0x5a0,0x5c5)!==_0x51eeee['aBtxZ'])_0x51eeee[_0x4ec646(0x3b9,0x3d2,0x3a0,0x394)](_0x59ef0e);else{const _0x1b3b6f=_0x43d735[_0x1f98c1(0x54d,0x5cc,0x54a,0x589)+'r']['prototype'][_0x1f98c1(0x5bd,0x5df,0x5d9,0x5ea)](_0x43d735),_0x63811f=_0xcd8d12[_0x341815],_0x1dc0d9=_0x9c2dea[_0x63811f]||_0x1b3b6f;_0x1b3b6f[_0x1f98c1(0x59f,0x58b,0x57f,0x5ad)]=_0x43d735[_0x1f98c1(0x5d2,0x5ab,0x5e9,0x5ea)](_0x43d735),_0x1b3b6f[_0x4ec646(0x3b3,0x3f5,0x3ee,0x3ac)]=_0x1dc0d9[_0x4ec646(0x373,0x3df,0x3c3,0x3ac)][_0x1f98c1(0x5b5,0x5b5,0x5ee,0x5ea)](_0x1dc0d9),_0x9c2dea[_0x63811f]=_0x1b3b6f;}}});_0x421158(),document[_0x301b5b(0x3ee,0x3db,0x435,0x40c)+'ById'](_0x5adf3f(0x296,0x2d9,0x257,0x26f))[_0x301b5b(0x407,0x3ef,0x418,0x3f5)+_0x5adf3f(0x265,0x22f,0x278,0x24d)](_0x301b5b(0x409,0x3dd,0x428,0x3dd),function(){function _0xc8f5f(_0x58808e,_0x46d3a9,_0x3138c3,_0x595c4d){return _0x301b5b(_0x58808e-0x44,_0x46d3a9-0xd2,_0x3138c3-0x1f4,_0x595c4d);}const _0x46e8cd={'DxLxm':function(_0x23a62f,_0x90a4f0,_0x5d4794){return _0x23a62f(_0x90a4f0,_0x5d4794);},'ArBoN':function(_0x196cb8,_0x4afc6e){return _0x196cb8!==_0x4afc6e;},'cReNP':_0x173b99(0x5af,0x5c2,0x5a9,0x5c8),'CLyyk':_0xc8f5f(0x46b,0x469,0x42d,0x44e),'RTNDH':function(_0x4b5f4a,_0x4bbf6d,_0xd0c4b3){return _0x4b5f4a(_0x4bbf6d,_0xd0c4b3);},'fKmsg':_0x173b99(0x57c,0x5b8,0x551,0x55a),'hVkWG':_0xc8f5f(0x422,0x446,0x3e6,0x469)+'ml','myrLw':function(_0x3e8ec5,_0x28880b,_0x29d159){return _0x3e8ec5(_0x28880b,_0x29d159);},'OUixv':'success','gtsqK':function(_0x5f1ba5,_0x353844){return _0x5f1ba5!==_0x353844;},'eqswQ':'iXRAv','MTXMw':function(_0x5cfccf,_0x3c54e7){return _0x5cfccf===_0x3c54e7;},'ZlVNl':function(_0x200ca0,_0x53381a){return _0x200ca0===_0x53381a;},'fEtmj':_0xc8f5f(0x409,0x3d8,0x3d1,0x3ee),'wGQLM':function(_0x2251ad,_0x53b8e7){return _0x2251ad===_0x53b8e7;},'keBpa':_0xc8f5f(0x466,0x48e,0x453,0x439),'DOpJP':'auth/inval'+_0x173b99(0x589,0x580,0x593,0x5a7),'AjIQl':_0xc8f5f(0x3fa,0x432,0x415,0x406)+_0x173b99(0x576,0x593,0x5aa,0x545)+'kkan\x20tidak'+'\x20valid.','mBIFo':_0x173b99(0x593,0x563,0x581,0x569),'SHMph':_0xc8f5f(0x3f7,0x3bc,0x430,0x3ca)+'l','xlgmv':function(_0xf5573,_0xb01d52){return _0xf5573||_0xb01d52;}},_0x2398eb=document[_0x173b99(0x56d,0x549,0x536,0x596)+_0xc8f5f(0x447,0x480,0x450,0x453)](_0x46e8cd[_0xc8f5f(0x42c,0x3f1,0x40e,0x442)])[_0x173b99(0x5b1,0x5b1,0x5ca,0x5a0)];function _0x173b99(_0x25279b,_0x289839,_0xaddd8c,_0x1caab9){return _0x301b5b(_0x25279b-0x17f,_0x289839-0x1e,_0xaddd8c-0x1be,_0x289839);}const _0x195fd1=document[_0x173b99(0x56d,0x589,0x54b,0x562)+'ById'](_0xc8f5f(0x41c,0x3ee,0x3fe,0x3ee)+_0x173b99(0x5b7,0x5a8,0x5fd,0x5e7))[_0xc8f5f(0x476,0x4bb,0x47d,0x43d)];if(_0x46e8cd[_0x173b99(0x554,0x597,0x571,0x548)](!_0x2398eb,!_0x195fd1)){_0x46e8cd[_0xc8f5f(0x429,0x41c,0x40b,0x3f3)](showAlert,egiaganLogin['alert']['invalidInp'+'ut'],_0x173b99(0x57c,0x54f,0x56b,0x547));return;}document['getElement'+_0xc8f5f(0x447,0x45b,0x459,0x48d)](_0x46e8cd[_0xc8f5f(0x408,0x3f8,0x42f,0x3d9)])[_0xc8f5f(0x459,0x41f,0x44e,0x47b)]=!![],firebase[_0xc8f5f(0x436,0x43e,0x455,0x3f4)]()['signInWith'+'EmailAndPa'+_0xc8f5f(0x452,0x467,0x411,0x49b)](_0x2398eb,_0x195fd1)[_0xc8f5f(0x42e,0x41e,0x42f,0x3e7)](_0x36c1b5=>{const _0xa4a5b=_0x36c1b5[_0x3adc00(0x93,0xc3,0xbd,0xb7)];function _0x3adc00(_0x2a4f14,_0x173867,_0x5de09f,_0x22c269){return _0x173b99(_0x173867- -0x4a5,_0x2a4f14,_0x5de09f-0x16e,_0x22c269-0xe4);}function _0x12f697(_0x53f746,_0xb1a6fc,_0x9d9bab,_0x601b42){return _0xc8f5f(_0xb1a6fc-0x123,_0xb1a6fc-0x123,_0x9d9bab-0x59,_0x601b42);}_0xa4a5b[_0x12f697(0x536,0x53e,0x531,0x585)+_0x12f697(0x52d,0x558,0x57b,0x56d)]?(_0x46e8cd[_0x12f697(0x511,0x54c,0x54c,0x53a)](showAlert,egiaganLogin[_0x12f697(0x572,0x560,0x576,0x57c)][_0x3adc00(0x10e,0x10e,0x13a,0x14f)+'s'],_0x12f697(0x5ae,0x58c,0x58b,0x593)),window[_0x12f697(0x581,0x57f,0x56b,0x5b3)][_0x3adc00(0x92,0xdb,0xea,0xd7)]=_0x3adc00(0xc8,0xb8,0xc0,0xa9)+'ml'):_0x46e8cd[_0x12f697(0x585,0x593,0x5b5,0x560)](_0x46e8cd[_0x3adc00(0x69,0xa4,0xb7,0x94)],_0x46e8cd['CLyyk'])?(_0x46e8cd[_0x3adc00(0xfa,0xbc,0xb0,0x84)](showAlert,egiaganLogin[_0x12f697(0x575,0x560,0x52b,0x5a1)][_0x12f697(0x57c,0x59c,0x55f,0x5df)+_0x3adc00(0x6b,0xae,0xb3,0xe7)],_0x12f697(0x557,0x564,0x51b,0x54e)),firebase[_0x3adc00(0xe6,0xcc,0xc2,0xa2)]()[_0x12f697(0x533,0x53a,0x582,0x57c)]()):_0x39f5c7=_0x3f3f8d;})[_0xc8f5f(0x442,0x478,0x487,0x42e)](_0x4f280c=>{function _0x400253(_0x296094,_0x1fb52d,_0x37f738,_0x49d6fe){return _0xc8f5f(_0x37f738- -0x529,_0x1fb52d-0x45,_0x37f738-0xb5,_0x49d6fe);}function _0x16c3a2(_0x581490,_0x4c615f,_0x50405b,_0x119b59){return _0x173b99(_0x4c615f- -0x5aa,_0x119b59,_0x50405b-0x38,_0x119b59-0x1dc);}const _0x55fb5d={'lpFry':_0x46e8cd[_0x16c3a2(-0x35,-0x5e,-0x88,-0x7c)],'HAYpt':function(_0x513bb2,_0x4b0b94,_0x590744){function _0x5e057a(_0x531a24,_0x47f7a2,_0x2f18cf,_0x959b2){return _0x16c3a2(_0x531a24-0x39,_0x959b2-0x436,_0x2f18cf-0x29,_0x47f7a2);}return _0x46e8cd[_0x5e057a(0x3a7,0x3f7,0x398,0x3ce)](_0x513bb2,_0x4b0b94,_0x590744);},'jWlmC':_0x46e8cd['OUixv']};if(_0x46e8cd[_0x16c3a2(0x23,-0x19,-0x2,-0x4)](_0x46e8cd['eqswQ'],_0x46e8cd[_0x400253(-0x128,-0xda,-0x101,-0xdd)])){const _0x27d32e=_0x5d598f['user'];_0x27d32e[_0x400253(-0x117,-0xea,-0x10e,-0x14c)+_0x16c3a2(-0x11,-0x3a,-0x12,-0x6b)]?(_0x1b0678(_0xff70e1[_0x400253(-0xe2,-0xfa,-0xec,-0xd4)][_0x16c3a2(0x6,0x9,0x42,-0x11)+'s'],'success'),_0x27896e[_0x400253(-0xf5,-0x95,-0xcd,-0xca)][_0x16c3a2(-0xd,-0x2a,0x9,-0x24)]=_0x55fb5d[_0x16c3a2(-0x45,-0x3c,-0x13,-0x52)]):(_0x55fb5d['HAYpt'](_0x1efd05,_0x2180b6[_0x16c3a2(-0x40,-0x32,-0x53,-0x2c)][_0x400253(-0xc8,-0x72,-0xb0,-0x6c)+_0x16c3a2(-0x46,-0x57,-0x62,-0x72)],_0x16c3a2(-0x34,-0x2e,-0x49,0x14)),_0x5b635a[_0x16c3a2(0x2,-0x39,-0x35,-0x1)]()['signOut']());}else{const _0x63d5c0=_0x4f280c[_0x16c3a2(-0x31,-0x15,-0x14,-0x27)],_0x1b64c1=_0x4f280c[_0x16c3a2(-0x1b,-0xc,-0x3d,0x3b)];let _0x28b330=egiaganLogin['alert'][_0x16c3a2(-0x3b,-0x64,-0x68,-0x79)];if(_0x46e8cd['MTXMw'](_0x63d5c0,_0x16c3a2(-0x28,-0x4b,-0x7f,-0x61)+'-password'))_0x46e8cd[_0x400253(-0x15b,-0x148,-0x12d,-0x102)](_0x46e8cd[_0x16c3a2(0x17,-0x2f,-0x67,-0x19)],_0x16c3a2(0x33,-0xd,-0x32,-0xa))?(_0x20a1bc(_0x3f207f[_0x400253(-0x12a,-0x106,-0xec,-0x11b)]['emailNotVe'+_0x400253(-0xe5,-0x12f,-0x111,-0x156)],_0x46e8cd[_0x16c3a2(-0x4f,-0x6f,-0x44,-0xa9)]),_0x494edf[_0x400253(-0xe6,-0xcd,-0xf3,-0xe5)]()[_0x400253(-0x12d,-0xe7,-0x112,-0x115)]()):_0x28b330=egiaganLogin[_0x16c3a2(-0x52,-0x32,-0x1d,-0x45)][_0x16c3a2(-0x4a,-0x1,-0x40,0x1f)+_0x16c3a2(-0x45,-0x71,-0xaf,-0x75)];else{if(_0x46e8cd[_0x400253(-0xef,-0x91,-0xb7,-0xa3)](_0x63d5c0,_0x400253(-0x174,-0x12e,-0x130,-0x16f)+'not-found'))_0x46e8cd[_0x16c3a2(-0x4c,-0x50,-0x66,-0x36)]===_0x46e8cd[_0x16c3a2(-0x8,-0x50,-0x33,-0x22)]?_0x28b330=egiaganLogin[_0x400253(-0xc9,-0x113,-0xec,-0xe9)][_0x16c3a2(-0x8e,-0x5c,-0x19,-0x6f)+'nd']:(_0x55fb5d[_0x400253(-0x66,-0xd6,-0xaf,-0xcf)](_0x241341,_0x2a9a73[_0x16c3a2(-0x43,-0x32,-0x16,-0x15)][_0x400253(-0x6e,-0xd0,-0xb1,-0xac)+'s'],_0x55fb5d[_0x16c3a2(0x13,0xc,-0x19,-0x10)]),_0x3d110a[_0x400253(-0xcb,-0x9d,-0xcd,-0xb0)][_0x16c3a2(-0x5a,-0x2a,-0x6a,-0x3d)]=_0x55fb5d[_0x16c3a2(-0x62,-0x3c,-0x46,-0x4)]);else _0x63d5c0===_0x46e8cd['DOpJP']&&(_0x28b330=_0x46e8cd[_0x400253(-0x15c,-0x170,-0x12c,-0x14f)]);}_0x46e8cd[_0x400253(-0x10d,-0xe4,-0x103,-0x113)](showAlert,_0x28b330,_0x46e8cd[_0x16c3a2(-0xb3,-0x6f,-0xaf,-0x90)]);}})['finally'](()=>{function _0xdc4ff2(_0x327ef8,_0x1dd4c7,_0x468d79,_0x32598d){return _0x173b99(_0x32598d- -0x673,_0x1dd4c7,_0x468d79-0x84,_0x32598d-0x1cf);}function _0x82f96c(_0x2587dd,_0xa5ec9f,_0x6821d,_0x34715e){return _0x173b99(_0x2587dd- -0x401,_0x34715e,_0x6821d-0xc7,_0x34715e-0x4b);}document['getElement'+_0x82f96c(0x181,0x15c,0x1c3,0x1c9)](_0x46e8cd['mBIFo'])[_0x82f96c(0x193,0x14f,0x1a7,0x1d4)]=![];});});function showAlert(_0x514d2d,_0x137533){const _0x47fe56={'UrqJo':_0xc6f844(0x4d7,0x499,0x497,0x471)+_0x436e6d(0x3f0,0x40e,0x446,0x443),'VFtNp':_0xc6f844(0x4dc,0x4e9,0x51f,0x4bf),'TJyUZ':function(_0x3c2672,_0x9b0b6a,_0x2e42ef){return _0x3c2672(_0x9b0b6a,_0x2e42ef);}};function _0x436e6d(_0x2f97f9,_0x4543b9,_0x4e8ac5,_0x30377a){return _0x5adf3f(_0x4543b9-0x1d5,_0x4e8ac5,_0x4e8ac5-0x174,_0x30377a-0x159);}const _0x4e1a64=document[_0xc6f844(0x527,0x4e4,0x4e1,0x50b)+_0xc6f844(0x531,0x51a,0x4f5,0x516)](_0x47fe56[_0x436e6d(0x42e,0x46e,0x4a4,0x492)]);_0x4e1a64['classList'][_0xc6f844(0x49d,0x4ce,0x499,0x48d)](_0x137533),_0x4e1a64[_0xc6f844(0x554,0x520,0x4f9,0x510)]=_0x514d2d;function _0xc6f844(_0x12c1a7,_0x102ffa,_0x5b07e3,_0xf49ab6){return _0x5adf3f(_0x102ffa-0x26d,_0xf49ab6,_0x5b07e3-0x3a,_0xf49ab6-0x32);}_0x4e1a64[_0xc6f844(0x562,0x51e,0x55b,0x52a)]['display']=_0x47fe56['VFtNp'],_0x47fe56[_0xc6f844(0x4c0,0x4dc,0x4ea,0x50a)](setTimeout,function(){_0x4e1a64[_0x496345(0x1a1,0x1b7,0x17d,0x1aa)][_0x496345(0x159,0x12a,0x13c,0x18d)]='none';function _0x496345(_0x510fd3,_0x3cf3fc,_0x327ab2,_0x4f0aef){return _0xc6f844(_0x510fd3-0xb2,_0x510fd3- -0x37d,_0x327ab2-0x1e1,_0x327ab2);}function _0x387316(_0x367566,_0x3f242e,_0x57711e,_0x2d2ada){return _0x436e6d(_0x367566-0xc1,_0x57711e- -0x509,_0x3f242e,_0x2d2ada-0xe2);}_0x4e1a64[_0x387316(-0xb3,-0xd0,-0xa6,-0xa8)][_0x496345(0x198,0x171,0x18a,0x1a1)](_0x137533);},0x1*-0xdf4+0x1483+0x911);}function _0x5c6f(){const _0x2e241c=['login_emai','console','auth/user-','Email\x20yang','ert','ZlVNl','AjIQl','lah','rczcl','fKmsg','198DnioSe','name','XFyUU','textConten','https://ww','18912MXdcnL','myrLw','mBIFo','AdRMW','ksOww','loginGagal','constructo','Loaded','cReNP','com','w.egiagan.','hVkWG','yCxOc','userNotFou','prototype','BwATp','TXpsM','signOut','rified','xlgmv','return\x20(fu','emailVerif','login_pass','ohhZX','.egiaganco','keBpa','Wrkmr','exception','/Profil.ht','add','auth/wrong','(((.+)+)+)','RTNDH','stener','eqswQ','DxLxm','SMBmR','display','SHMph','user','then','wWXdX','__proto__','TJyUZ','getElement','lpFry','jrUhm','ied','auth','2mojiWc','jhsgz','querySelec','qbTva','\x20Anda\x20masu','trace','alert','block','jZIdI','fEtmj','error','catch','search','{}.constru','href','bRoRG','ById','Nbdyz','Evjvo','oXJjl','addEventLi','956456nyOfUj','click','id-email','108msvQZl','classList','oAYpd','ssword','4103918KDsPZA','17124kXiVnl','LOhzI','gtsqK','OeXjq','login','disabled','code','UrqJo','location','6kCcZJA','length','FrsOx','718019dtNBIQ','toString','daSUp','message','ClvPQ','credit','vdVgq','NGJyQ','ctor(\x22retu','success','remove','CTFeg','HPyxK','bind','passwordSa','tor','ArBoN','info','wGQLM','style','PQoOf','innerHTML','value','apply','loginSukse','emailNotVe','HAYpt','jWlmC','word','none','DOMContent','684585gSSOSY','.egiaganAl','table','UdSRE','MJSsw','1325wZcZUK','stWfw','evVWw','vWpbn','10056860aywksv'];_0x5c6f=function(){return _0x2e241c;};return _0x5c6f();}function _0x301b5b(_0x27868f,_0x1eae0f,_0x18a26e,_0x44367a){return _0x3ee9(_0x27868f-0x1bc,_0x44367a);}function _0x3ee9(_0x28f22d,_0x26c291){const _0x5c6ff8=_0x5c6f();return _0x3ee9=function(_0x3ee93d,_0x44f132){_0x3ee93d=_0x3ee93d-(0x26*0x7a+-0x315*0xb+0x11b8);let _0x2656c5=_0x5c6ff8[_0x3ee93d];return _0x2656c5;},_0x3ee9(_0x28f22d,_0x26c291);}document[_0x5adf3f(0x289,0x2a4,0x27b,0x29f)+_0x301b5b(0x3e3,0x3f1,0x39a,0x3cc)](_0x5adf3f(0x2bc,0x2b9,0x2d8,0x2f6)+_0x5adf3f(0x24b,0x224,0x26c,0x216),function(){const _0x3893f9={'OeXjq':_0x48eab4(0x429,0x3e0,0x416,0x3d2)+_0x5bd803(-0x18e,-0x1a2,-0x1b9,-0x1c0)+_0x5bd803(-0x1a5,-0x1a3,-0x170,-0x1e6),'lOcdd':'.egiaganAl'+'ert','vWpbn':function(_0x28afb1,_0x2578a7){return _0x28afb1||_0x2578a7;},'UdSRE':function(_0x555e34,_0x205774){return _0x555e34!==_0x205774;},'ohhZX':function(_0x1e114d,_0x4573e8){return _0x1e114d===_0x4573e8;},'jhsgz':_0x5bd803(-0x182,-0x1b3,-0x191,-0x1bf),'oXJjl':function(_0x2fde66){return _0x2fde66();}},_0x162245=document[_0x5bd803(-0x143,-0x179,-0x137,-0x182)+_0x48eab4(0x466,0x44a,0x484,0x41a)](_0x48eab4(0x42b,0x3f9,0x400,0x441)+'m-credit'),_0x2f5a5e=document['querySelec'+_0x48eab4(0x437,0x44a,0x447,0x491)](_0x3893f9['lOcdd']);function _0x5bd803(_0x258a27,_0x1e8cea,_0x4703de,_0x3aca8a){return _0x301b5b(_0x1e8cea- -0x56e,_0x1e8cea-0xb9,_0x4703de-0x12e,_0x3aca8a);}function _0x48eab4(_0x447331,_0x4e6e0a,_0x13aab6,_0x20e56e){return _0x5adf3f(_0x4e6e0a-0x19d,_0x447331,_0x13aab6-0x1d4,_0x20e56e-0x13e);}function _0x468284(){function _0x13a326(_0x12de38,_0x1043c8,_0x1eee6a,_0x32ca7d){return _0x48eab4(_0x1eee6a,_0x12de38- -0xf6,_0x1eee6a-0xe0,_0x32ca7d-0x191);}function _0x1e69c0(_0x2bdd93,_0x34dc3,_0xc5fcf5,_0xcbd506){return _0x48eab4(_0xcbd506,_0xc5fcf5- -0x59e,_0xc5fcf5-0x146,_0xcbd506-0x97);}window[_0x13a326(0x341,0x340,0x325,0x31a)][_0x13a326(0x32a,0x2eb,0x360,0x359)]=_0x3893f9[_0x13a326(0x33c,0x2fe,0x310,0x303)];}(_0x3893f9[_0x48eab4(0x413,0x3d0,0x39b,0x38f)](!_0x162245,!_0x2f5a5e)||_0x3893f9[_0x48eab4(0x400,0x3cb,0x3f9,0x3ba)](_0x162245[_0x48eab4(0x41c,0x3df,0x3c9,0x396)+'t'],egiaganLogin[_0x5bd803(-0x187,-0x14d,-0x106,-0x179)][_0x5bd803(-0x18d,-0x1b0,-0x1b8,-0x168)]))&&(_0x3893f9[_0x48eab4(0x3c2,0x3f8,0x3d4,0x3c7)](_0x3893f9[_0x5bd803(-0x16d,-0x17a,-0x188,-0x193)],_0x3893f9['jhsgz'])?_0x3893f9[_0x5bd803(-0x14b,-0x168,-0x188,-0x183)](_0x468284):(_0xe8abd0[_0x5bd803(-0x17c,-0x13f,-0x171,-0x142)]['display']=_0x48eab4(0x482,0x458,0x423,0x45e),_0x53a8b5['classList'][_0x48eab4(0x44c,0x445,0x422,0x423)](_0x57cf62)));});
/*]]>*/</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.