Memasang Fitur Register di Blogger dengan Firebase

Membuat Fitur Register di Blogger dengan Firebase Authentication — Membuat Fitur Register Authentication di Blogger

Di artikel kali ini saya akan bahas dan sekaligus memberikan source code untuk membuat fitur registrasi di Blogger / blogspot menggunakan Firebase. Tutorial ini saya buatkan karena banyak sekali yang request untuk dibuatkan tutorial cara memasang fitur register dan login di Blogger. Tapi baru kali ini saya sempat untuk membuatkan tutorialnya karena menurut saya memasang fitur login dan register di Blogger ini cukup ribet.

Selain fitur yang disediakan oleh Blogger sangat terbatas, kita juga membutuhkan database dari pihak ketiga untuk menyimpan data-data user yang telah mendaftar di blog. Sehingga semua tahap harus dilakukan secara manual termasuk mengintegrasikan Firebase Authentication dan Database Firebase dengan kode JavaScript yang digunakan di blog. Berbeda dengan WordPress, jika menggunakan WordPress kita memiliki web hosting pribadi dan sudah disediakan plugin khusus untuk memasang fitur login di blog. Jadi tidak perlu susah-susah menginstalnya secara manual.

Dan di sini juga saya hanya akan membahas cara memasang fitur registernya saja ya. Untuk fitur login, mungkin akan saya bahas secara bertahap di artikel berikutnya. Karena jika ditulis dalam satu artikel langsung, artikelnya akan terlalu panjang dan pastinya akan sulit dipahami.

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 Project Web App di Firebase

Karena fitur register ini menggunakan database, hal pertama yang dilakukan adalah membuat project database di Firebase untuk menyimpan data user seperti yang sudah dijelaskan sebelumnya. Jika kamu sudah memiliki projek database kosong di Firebase, kamu bisa lewati langkah ini dan langsung ke tahap kedua.

Pertama masuk ke situs Firebase di https://firebase.google.com.
Jika baru pertama kali menggunakan Firebase, klik tombol Mulai kemudian login menggunakan akun Google kamu.
Setelah berhasil masuk ke akun Firebase, klik tombol Add Project di halaman dashboard Firebase.
Kemudian ikuti saja langkah-langkah selanjutnya hingga project Firebase berhasil dibuat.
Setelah project baru berhasil dibuat, klik ikon CODE untuk membuat Web App baru pada project yang telah dibuat.

Memasang Fitur Register di Blogger dengan Firebase — Membuat Project App Baru di Firebase

Beri nama web app kemudian klik tombol Register app. Di tahap kedua, pilih opsi yang menggunakan tag <script> dan jangan lupa SALIN semua script yang ada sebelum mengklik tombol Continue to console.

Cara Membuat Fitur Register di Blogger dengan Firebase — Membuat Fitur Register di Blogger

Selesai!

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!

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 JavaScript di bawah ini.

<script>
// JS FITUR REGISTER AUTHENTICATION FIREBASE BY IGNELIUS.COM
let igneliusRegister = {
  credit: {
    name: "www.ignelius.com",
    visibility: "visible"
  },
  alert: {
    invalidInput: "Semua kolom harus diisi",
    invalidPhone: "Nomor telepon harus lebih dari 6 angka dan maksimal 13 angka.",
    invalidPass: "Password harus memiliki minimal 6 huruf, karakter dan angka.",
    regisBerhasil: "Registrasi berhasil. Silakan verifikasi email sebelum login.",
    regisGagal: "Terjadi kesalahan saat registrasi. Silakan coba lagi.",
    emailEksis: "Alamat email sudah terdaftar.",
    phoneEksis: "Nomor telepon sudah terdaftar."
    }
};

<!-- config firebase - ganti bagian ini dengan script config firebase kamu
const firebaseConfig = {
    /* ganti semua bagian ini */
};
end config firebase -->
const _0x5b580b=_0x260d,_0x497871=_0x260d,_0x1260b9=_0x260d,_0xa69cdc=_0x260d,_0x464cc2=_0x260d;(function(_0xf84030,_0x52790b){const _0x4acd07=_0x260d,_0x2d9fa6=_0x260d,_0x31f3bc=_0x260d,_0x1a268e=_0x260d,_0xebd5ea=_0x260d,_0x35e403=_0xf84030();while(!![]){try{const _0x47879b=parseInt(_0x4acd07('0x20d','7Ulm'))/0x1*(-parseInt(_0x2d9fa6('0x1d3','179v'))/0x2)+-parseInt(_0x4acd07('0x212','q[%6'))/0x3+parseInt(_0x31f3bc('0x1f9','TXc#'))/0x4*(parseInt(_0xebd5ea('0x20e','z)i&'))/0x5)+-parseInt(_0x2d9fa6('0x228','OIw4'))/0x6*(parseInt(_0x4acd07('0x22b','ojjH'))/0x7)+-parseInt(_0x4acd07('0x214','Dsuh'))/0x8+-parseInt(_0x31f3bc('0x22a','5HZg'))/0x9+parseInt(_0x4acd07('0x218','z)i&'))/0xa*(parseInt(_0x1a268e('0x21f','TXc#'))/0xb);if(_0x47879b===_0x52790b)break;else _0x35e403['push'](_0x35e403['shift']());}catch(_0x158d36){_0x35e403['push'](_0x35e403['shift']());}}}(_0x2665,0x992d9));const app=firebase['initializeApp'](firebaseConfig),auth=firebase[_0x5b580b('0x1d8','gvzm')](),database=firebase[_0x497871('0x1ff','gvzm')]();function showNotification(_0x55b750,_0x3a6df8){const _0x250049=_0x497871,_0x37e3ed=_0x497871,_0x160bcb=_0x497871,_0x403ab2=_0x5b580b,_0x1cd4f8=_0x497871,_0x3446b7=document[_0x250049('0x22e','1UwY')](_0x37e3ed('0x207','uQv1'));_0x3446b7['textContent']=_0x55b750,_0x3446b7[_0x250049('0x205','hxI@')]=_0x37e3ed('0x1f1','H&1I')+_0x3a6df8,_0x3446b7['style']['display']=_0x160bcb('0x216','cIqt'),setTimeout(function(){const _0x35b1fa=_0x250049,_0x10d673=_0x37e3ed;_0x3446b7['style'][_0x35b1fa('0x1d0','uQv1')]=_0x10d673('0x213','cj2@');},0x1388);}function _0x2665(){const _0x24c83d=['uWjyW5nquK8p','W78UW5xcMt8a','W5fnjqqd','WPeHysGNB8oed8obWRagcaq','oSknW60v','aNi0W5W1kSonW7WjimomCG0','W4TJlw1Gz8osBCosWQy9FYtdTSk5WQWhv8oZtgLNBmog','W48Aeui5','WR/cIc4JW7G','W4tcLCo1WPpcV8kaeLHDW7uKrmkd','W5ddPCoiW4WTWRJcTbL1pKVcP8kwWQi','W5ntjriEsW','bNpdJ8oOW5nRxmoUWQJcIbVdIxddSfK5ESk1ASkKW6i4F8ksWPFcOcNcPSkyW5CPWP8','WQhdJG8bW498bSkNbSoeW7Pjtd0','fCkhemks','W5PIW4medCk1W7G','WOu/WOyfdCkFW7fSWQu','W5S3Ffe','CSoSvXS','W4FcLmo1WPFcUCobB3TbW5Ww','W494oNXNnmksla','mCkpW6izW6NcOmoTvanmjfdcSq','WRVcLJK+W74','W4y8Eq','dJvOgq','WQWBW7dcVaq3Fa','dHBdUM4SxmoMW7bZdSoTW5SocCo3l8kfW6ebW4JcQmkgW5y4WR0gnaRcLgPTdmoFW43dTI/cRSoHW4VcQG','W5FcMZK+WQ/dJxOLWQZcRbRcRde','ymkoW44Zac7cISkrWOxdN8k8W7FcLq','EmoFWQGC','tCoDWR4+lSomtGTgWPWdfmo6WQ9Yl0VdSSkBWOebWPNdRga','WQ7cKSoXW4/dGWddRmoaWR9NW6ddPhC','W7PFeCkYbZ/dLW','lqZdRhvUw8oLW60Nba','WOBdH8o5WRqbW4tdQZFcLCobW4O4xCk0','AmoEWR4cWQKzW4S','uHzoW5jEBLGhuxddOX/cIW','WRO2B8kNW7TMWRm','jwq5xw17W5WZF8kXW7pdVG','WOZcMSoJW6tcKW','cIXTpSoEcY5epdVdVCoI','W5bIW4qYamk3W7blWQRcJSkcca/cUW','W5VcVxuGfwZdRmkdrCk1ddZdPMaEE3DMWQC0rYreva','W43dOt3cGG','W4bLphL6kq','W5CRELxdVqZcO8ocEspcHeBcMY3cQsXMquOCWPmjpqq9WRldTqKtjG','W5RdPCopW7OGWRRcVa','W4nVW5uz','WQ18hcJdHa','WQeQAmkGW7T7','W5nnkruC','aCkyemksFq','WQ9ZkCkhia','W6DKsmoxjW','i8oaWPNcI8k2','mCkqW7eFW7C','uComWRK6','WQ81W64TwMabW67cT8oYoG','uazF','o2pcS8ofyLKe','W4JcPdS3','WR40E8oQW7DYWQ7dRZZcKSoHBmkJW5ddUta','jmk7omkJzGZdI20iWRG+W5aOWQ45WRa','WOFdUZrHxMldSCo4zSkTl33dNW','jh/dICoGW5mowSo4WQ/cNa','W4zimX8vu8ov','W5tdOCoiW6OP','WOZcGmoVW6ZcNLu','tmooWQqRmCkFffDWWOCrsmoNW6G','W4xcOhi5bd/cR8ofrSk7','vGPp','W5/dSsFcJIblxdO2W4qilmonWRVdL17cTmkDW6/cS2C','CwtdQSoqx3FcQCk4WPO4xmk2hCk9WRBcOW','mSoiWOdcLSkzgCkcWO0YW5G2','lx3dJW','W6r2pNX/FCkqj8olWRuRnZNdSmkLW6KEtCoJtx0','WOu3WObcwSkMW5bhWRtcTmkt','WQ5Ufs/dKG','DqZdUhjPxSoGW7eGhSoRW5fnd8oHASkiW6zv','W4ODW4FdU2BcVG','WQNcHSo4W4JdNW','DunOWO3dVM8rz8kKp0m/mq','W4JdTt3cIWDhtJy','WPtdHxPIW7xcMc0','WOFdVdeHdb7cPmouEa','ih7dJCo7W4S','W4xdPCoBW6aYWP/cVa5Zk3RcT8kZ','uby2iWnwCSkHk0e','WQu3W7K/ruCeW5pcSW','WO/dG8oGWPq','iSoEWQOCWQauW5VcQYLUWQ3cQCooAW','uSomq8ksAc/dK0Oh','r8o0W5e','b8kraCkHFrBdJweeWRKgW5O','mSoOc8ovlW','F8oZuXqD','WQvZFmosbYhcMq','W4hcKCo1W5pdPCo9rwP7'];_0x2665=function(){return _0x24c83d;};return _0x2665();}function registerUser(){const _0x2f1135=_0x5b580b,_0x1268fd=_0x5b580b,_0x28fcf0=_0x5b580b,_0x27da42=_0x5b580b,_0x389289=_0x497871,_0x1e092c=document[_0x2f1135('0x1d6','TXc#')](_0x2f1135('0x20c','oAdD'))['value'],_0xa6f0a=document[_0x2f1135('0x219','lobF')](_0x28fcf0('0x20f','C%zf'))[_0x2f1135('0x1dd','zSUW')],_0x2ca39a=document[_0x2f1135('0x231','1^iR')]('name')[_0x389289('0x1fd','1UwY')];if(!_0x1e092c||!_0xa6f0a||!_0x2ca39a){showNotification(igneliusRegister[_0x27da42('0x211','aO&B')]['invalidInput'],_0x1268fd('0x20b','yo1h'));return;}if(_0xa6f0a['length']<0x6||!/\d/[_0x28fcf0('0x1e5','H&1I')](_0xa6f0a)){showNotification(igneliusRegister[_0x1268fd('0x225','$z&l')][_0x1268fd('0x1e6','hxI@')],'error');return;}const _0x13bb48=database[_0x1268fd('0x226','Toy1')](_0x389289('0x1fa','zSUW'));_0x13bb48[_0x389289('0x1d5','hyeO')](_0x2f1135('0x1e3','d31@'))['equalTo'](_0x1e092c)[_0x28fcf0('0x220','Toy1')]('value',function(_0x5395f4){const _0x14d6bc=_0x2f1135,_0x4325b8=_0x27da42,_0x2b594a=_0x389289,_0x4bf201=_0x28fcf0,_0x3b70e3=_0x28fcf0;if(_0x5395f4[_0x14d6bc('0x210','OIw4')]()){showNotification(igneliusRegister[_0x14d6bc('0x1e0','PBWC')][_0x2b594a('0x1ed','MiD)')],'error');return;}else auth[_0x4bf201('0x1da','Toy1')](_0x1e092c,_0xa6f0a)[_0x4bf201('0x22c','uQv1')](function(_0x5c825f){const _0x3ec559=_0x4325b8,_0x4f2e13=_0x3b70e3,_0xe19ff=_0x14d6bc,_0x3d1098=_0x4bf201,_0xd4eeab=_0x4325b8,_0x369ec4=_0x5c825f[_0x3ec559('0x21d','PBWC')],_0x5f2757=_0x369ec4[_0x3ec559('0x1f3','C%zf')],_0x260a24=_0x13bb48[_0x3ec559('0x1d4','zcvh')](_0x5f2757);_0x260a24[_0xe19ff('0x1e7','C%zf')]({'email':_0x1e092c,'password':_0xa6f0a,'name':_0x2ca39a}),_0x369ec4[_0xe19ff('0x1f4','gvzm')]()[_0xd4eeab('0x1dc','TXc#')](function(){const _0x27011b=_0x3ec559,_0x4bb432=_0x3ec559,_0x26da5b=_0x3ec559;showNotification(igneliusRegister[_0x27011b('0x202','MiD)')][_0x27011b('0x203','lobF')],_0x4bb432('0x1d2','C]K('));})[_0x3ec559('0x1ef','lobF')](function(_0x2ce0b5){const _0x5710bf=_0xd4eeab,_0x2b5239=_0x3ec559,_0x333f10=_0xd4eeab;console['error'](_0x5710bf('0x21b','MiD)'),_0x2ce0b5),showNotification(_0x2ce0b5[_0x2b5239('0x1db','lobF')],_0x2b5239('0x1e4','cj2@'));});})[_0x14d6bc('0x1e1','rj$R')](function(_0x29ca3b){const _0x14de74=_0x2b594a,_0x5e7d64=_0x4bf201,_0x3b8476=_0x3b70e3,_0x4cf595=_0x2b594a;console[_0x14de74('0x20b','yo1h')](_0x14de74('0x1f8','q[%6'),_0x29ca3b),showNotification(_0x29ca3b[_0x5e7d64('0x21e','TXc#')],_0x14de74('0x217','$z&l'));});});}auth['onAuthStateChanged'](function(_0xff1c2f){const _0x5a00bf=_0x5b580b,_0x2a007f=_0x497871,_0x3e73f7=_0x5b580b,_0x139220=_0x497871;_0xff1c2f&&_0xff1c2f[_0x5a00bf('0x224','cj2@')]?console[_0x2a007f('0x209','M(11')]('User\x20signed\x20in\x20and\x20email\x20verified'):console[_0x2a007f('0x1f7','MiD)')](_0x3e73f7('0x229','1(&C'));}),document[_0x5b580b('0x21c','!#)x')]('register')['addEventListener'](_0x5b580b('0x1df','aO&B'),registerUser);function _0x260d(_0x24d80f,_0x3843db){const _0x26655f=_0x2665();return _0x260d=function(_0x260dca,_0x368c9a){_0x260dca=_0x260dca-0x1d0;let _0x512d7d=_0x26655f[_0x260dca];if(_0x260d['gbpzmV']===undefined){var _0x4a4720=function(_0x3a6df8){const _0x3446b7='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x1e092c='',_0xa6f0a='';for(let _0x2ca39a=0x0,_0x13bb48,_0x5395f4,_0x5c825f=0x0;_0x5395f4=_0x3a6df8['charAt'](_0x5c825f++);~_0x5395f4&&(_0x13bb48=_0x2ca39a%0x4?_0x13bb48*0x40+_0x5395f4:_0x5395f4,_0x2ca39a++%0x4)?_0x1e092c+=String['fromCharCode'](0xff&_0x13bb48>>(-0x2*_0x2ca39a&0x6)):0x0){_0x5395f4=_0x3446b7['indexOf'](_0x5395f4);}for(let _0x369ec4=0x0,_0x5f2757=_0x1e092c['length'];_0x369ec4<_0x5f2757;_0x369ec4++){_0xa6f0a+='%'+('00'+_0x1e092c['charCodeAt'](_0x369ec4)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0xa6f0a);};const _0x55b750=function(_0x260a24,_0x2ce0b5){let _0x29ca3b=[],_0xff1c2f=0x0,_0xf44970,_0x37e41b='';_0x260a24=_0x4a4720(_0x260a24);let _0x226247;for(_0x226247=0x0;_0x226247<0x100;_0x226247++){_0x29ca3b[_0x226247]=_0x226247;}for(_0x226247=0x0;_0x226247<0x100;_0x226247++){_0xff1c2f=(_0xff1c2f+_0x29ca3b[_0x226247]+_0x2ce0b5['charCodeAt'](_0x226247%_0x2ce0b5['length']))%0x100,_0xf44970=_0x29ca3b[_0x226247],_0x29ca3b[_0x226247]=_0x29ca3b[_0xff1c2f],_0x29ca3b[_0xff1c2f]=_0xf44970;}_0x226247=0x0,_0xff1c2f=0x0;for(let _0xdad2c2=0x0;_0xdad2c2<_0x260a24['length'];_0xdad2c2++){_0x226247=(_0x226247+0x1)%0x100,_0xff1c2f=(_0xff1c2f+_0x29ca3b[_0x226247])%0x100,_0xf44970=_0x29ca3b[_0x226247],_0x29ca3b[_0x226247]=_0x29ca3b[_0xff1c2f],_0x29ca3b[_0xff1c2f]=_0xf44970,_0x37e41b+=String['fromCharCode'](_0x260a24['charCodeAt'](_0xdad2c2)^_0x29ca3b[(_0x29ca3b[_0x226247]+_0x29ca3b[_0xff1c2f])%0x100]);}return _0x37e41b;};_0x260d['GbvcPK']=_0x55b750,_0x24d80f=arguments,_0x260d['gbpzmV']=!![];}const _0x546dea=_0x26655f[0x0],_0x10a9da=_0x260dca+_0x546dea,_0x463494=_0x24d80f[_0x10a9da];return!_0x463494?(_0x260d['vNFtiU']===undefined&&(_0x260d['vNFtiU']=!![]),_0x512d7d=_0x260d['GbvcPK'](_0x512d7d,_0x368c9a),_0x24d80f[_0x10a9da]=_0x512d7d):_0x512d7d=_0x463494,_0x512d7d;},_0x260d(_0x24d80f,_0x3843db);}function checkCreditLink(){const _0x556afe=_0x497871,_0x57a8ef=_0xa69cdc,_0x25b789=_0x1260b9,_0x58cb60=_0xa69cdc,_0x25f61c=_0x5b580b,_0xf44970=document[_0x556afe('0x1d1','C%zf')](_0x57a8ef('0x1fb','1(&C'));(!_0xf44970||_0xf44970[_0x25b789('0x20a','PBWC')](_0x57a8ef('0x227','LQ@7'))!==_0x25b789('0x1d7','h[42')||_0xf44970[_0x25f61c('0x1f6','d31@')][_0x57a8ef('0x1e9','eM)&')]()!==_0x57a8ef('0x1ea','C]K('))&&(window['location'][_0x25b789('0x221','oAdD')]=_0x25b789('0x22d','H&1I'));(!igneliusRegister[_0x57a8ef('0x1d9','q[%6')]||igneliusRegister[_0x57a8ef('0x1f0','zcvh')][_0x58cb60('0x206','1^iR')]!=='www.ignelius.com')&&(window[_0x58cb60('0x223','q[%6')]['href']=_0x57a8ef('0x215','q[%6'));if(igneliusRegister[_0x25b789('0x21a','aO&B')][_0x58cb60('0x230','1(&C')]===_0x25b789('0x200','5HZg'))_0xf44970['style'][_0x58cb60('0x1f2','h[42')]=_0x25b789('0x1ee','aO&B');else igneliusRegister[_0x25b789('0x1fc','1LV8')][_0x25f61c('0x204','O(gj')]===_0x25f61c('0x1de','C]K(')&&(_0xf44970[_0x25b789('0x1e2','7Ulm')][_0x58cb60('0x204','O(gj')]='hidden');}document[_0x5b580b('0x1f5','W36W')](_0x497871('0x1eb','PBWC'),checkCreditLink);
</script>

Jangan lupa ganti bagian config Firebase dengan script config Firebase kamu yang sudah kamu salin pada tahap ke 1 nomor 7.

Terakhir, taruh juga kode HTML berikut.

<!--[ html form register firebase by ignelius.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 name="registration_form" id="registration_form">
  <input type="text" id="name" placeholder="Nama..."/>
  <input type="email" name="email" id="email" class="form-control" placeholder="ex. contoh@gmail.com" />
  <input type="password" name="password" id="password" class="form-control" placeholder="ex. contoh123" />
  <button type="button" id="register" name="register" class="round center">DAFTAR</button>
</form>
<div class="igneliusAlert"></div>
<a class="igneliuscom-credit" href="https://www.ignelius.com">www.ignelius.com</a>
<!--[ CSS NOTIFIKASI IGNELIUS.COM ]-->
<style>
.igneliusAlert {
  position: fixed;
  top: 4rem;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem 1.25rem;
  width: 100%;
  height: auto;
  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) {
  .igneliusAlert {
    max-width: 300px;
    width: 100%;
    height: auto;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
.igneliusAlert.success {
  background-color: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}
.igneliusAlert.error {
  background-color: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
}
</style>

Selesai!

Penutup

Sampai di tahap ini kamu sudah berhasil memasang fitur register di Blogger menggunakan Firebase Authentication. Terakhir, kamu bisa langsung uji coba fitur register yang sudah kamu buat di blog kamu. Untuk preview / demo fitur registernya kamu bisa lihat di halaman registrasi. Script yang saya pakai di halaman registrasi juga sama kok dengan script di atas. Jika fitur register di blog kamu tidak berfungsi, bisa tanyakan di kolom komentar.

1 komentar

Sebelum memposting komentar, harap baca kebijakan berkomentar terlebih dulu.

1. Untuk menulis kode syntax highlighter, gunakan KODE SYNTAX (kode harus di parse terlebih dulu).
2. Untuk menyisipkan gambar dalam komentar, gunakan URL GAMBAR.
3. Untuk menulis tautan, gunakan <a href='URL WEB TUJUAN'>Anchor Teks</a>.
4. Untuk menulis sebuah quote / kutipuan, gunakan TULIS QUOTE DI SINI.
5. Centang Beri Tahu Saya untuk mendapatkan notifikasi yang dikirim langsung ke email saat ada yang membalas komentar kamu.