![Membuat Fitur Register di Blogger dengan Firebase Authentication Membuat Fitur Register di Blogger dengan Firebase Authentication](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiivfGzUIT5XAQDIwpMjGuqdFFrSvJihULUbxy_FnGdVM6cKZYcQg3jOvpYEpPLyCuXPx0_VyrTKF6ZjN-NxMQwR-FvT4rc7lFLkcCWIwawaHxmm_EnNSfO93beDYVpe9owJQIHFxi62lN8ijJ-3ij-CK2ryGNS5YQWnimtyCNedEMmbTEi0KCpl2qZIB4/s0/membuat-fitur-register-firebase-di-blogger.png)
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.
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.
- 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 tombolContinue to console
. - Selesai!
![Memasang Fitur Register di Blogger dengan Firebase Memasang Fitur Register di Blogger dengan Firebase](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8dRehPng4Z7yLJn39tCOBMy6fyyPA7SE9uO0ATEbM_GjQbZGzugp4rx98y0oc0s_1aCmryFodzGHtrPwpeQQiZkUGN0ul2i8r7C_QxvnRVOdL0dOTqjFzLfotZY1WDnLemrrGilxjI6axDXCBm2emO3BpbXc8QJ5Xr0vxs39IBpfYVj_h2BHkaoWVVfg/s0/cara-memasang-fitur-register-blogger.png)
![Cara Membuat Fitur Register di Blogger dengan Firebase](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtFXKE70QbRN-Lx3awH3GtgUEBPp7TtstCItJwX6yubmJvXF0-HzdgfUMGa4k1_3amkgFdHtAl5sUiQzDcdKbTsTO0Hsij-YVu_jgOHVesykA0HJnJuUA2FE422HJlssQt6b4Kf4tofIaDHZctOgIqYldWplSUd1D3qG1Lm7nKogJOb5bYOiGlZ1fNDn0/s0/cara-membuat-fitur-register-blogger-dengan-firebase.png)
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
. - 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. - Selesai!
![Memasang Fitur Register Authentication di Blogger Memasang Fitur Register Authentication di Blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAdLAQ_FUcYbCUvo-nQunLiupVeFgAf1Pmd8Bz7uUNqksaJsvN4CogCiqoGFfY1oA2oOEwTejsuLVS2bdfQamOEmqr1gjLxUGYWKQUr-Luf67Dk6T8Bn0LwgPqOxpUG-Hns6Y-1O1e_BxzDlZRg0dMv4ISVpYQ-Yn4ba9bPWZhTsrF5VNSh1yT1LAB8P0/s0/memasang-fitur-registrasi-authentication-di-blogger.jpg)
{
"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.
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 tombolGet 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 klikSave
. - Setelah itu masuk ke tab bagian
Settings
Authorized domains
. Setelah itu klikAdd domain
lalu tambahkan domain blog kamu.
![Cara Memasang Fitur Register di Blogger dengan Firebase Cara Memasang Fitur Register di Blogger dengan Firebase](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjARQYnVRoKPO322maEksvRZ7HBGtfEvamc-bszcUKP2KUNXBc-CVviYy-2wCwq_biE_t2e_Kq7rRNKowxgzI3Oyya3OoNWgTMWCp_XsRN4EvBMAtaDAa_HhH46qt-tcUttBKlW-fSdgeAeXzPkuE5jLwRb_cI4JWs8LswZxgM07svmSmIynTnKjGM_TZY/s0/membuat-fitur-register-firebase-di-blogger.jpg)
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.
- Terakhir, taruh juga kode HTML berikut.
- Selesai!
<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.
<!--[ 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>
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