Anda perlu berlangganan untuk melihat konten Ini !!!!
Hallo Sobat OkayimDotCom,, Pada Artikel Sebelumnya Saya Sudah Membuat Artikel Tentang Cara Buat Fitur Login Di Blogspot Dengan Firebase Dan Saya Juga Sudah Menyediakan Logingger / SigInSpot ( Fitur Login Untuk Blogger Dan Blogspot ) yang bisa sobat beli hanya dengan harga Rp.50.000 Saja.
Namun Jika Sobat Tidak Punya Uang Untuk Membeli Fitur Loginspot Seperti Demo Di Blog OkayimDotCom. sobat OkayimDotCom bisa download code html javascript Firebase Authentication Untuk Blogspot . Yang akan saya bagikan secara gratis untuk sobat OkayimDotCom.
Cara Pasang Kode Html Javascript Tombol Login Firebase Authentication Di Blogspot.
Sebelum melangkah memasang code javascript Firebase Authentication di blogspot alangkah baiknya sobat membuat proyek Firebase terlebih dahulu seperti arahan yang akan saya berikan.
Cara Buat Proyek Authentication Di Firebase
Untuk membuat proyek Authentication di Firebase, ikuti langkah-langkah berikut:
Langkah 1: Membuat Proyek Firebase
1. Buka Firebase Console:
- Kunjungi [Firebase Console](https://console.firebase.
google.com/).
2. Buat Proyek Baru:
- - Klik "Add project" atau "Tambahkan proyek".
- - Berikan nama untuk proyek Anda.
- - Pilih atau buat akun Google Analytics (opsional).
- - Klik "Create project" atau "Buat proyek".
Langkah 2: Tambahkan Aplikasi ke Proyek Firebase
1. Tambahkan Platform (pilih Web):
- Klik ikon platform (pilih Web) karena kita akan masangkanya di blogspot.
- Ikuti instruksi untuk mendaftarkan aplikasi Anda. Anda perlu memberikan informasi seperti package name untuk Android atau bundle ID untuk iOS.
2. Konfigurasi Aplikasi:
- Untuk web, Anda akan mendapatkan konfigurasi Firebase seperti apiKey, authDomain, dll. Simpan informasi ini karena akan digunakan dalam kode aplikasi Anda.
Langkah 3: Mengaktifkan Authentication
1. Masuk ke Authentication:
- Di Firebase Console, pilih proyek Anda.
- Klik pada "Authentication" di menu sebelah kiri.
- Klik tombol "Get Started" atau "Memulai".
2. Pilih Metode Sign-In:
- Pada tab "Sign-in method", aktifkan metode sign-in yang ingin Anda gunakan (saya sarankan pilih SigIn with Google).
Cara Pasang Javascript Firebase Auth Di Blogger
1. Silahkan sobat copy code javasi di bawah ini dan letakan di antara kode <head> Dan </head> pada html template blogspot sobat.
<!-- Tambahkan Firebase SDK -->
<script src='https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js'/>
<script src='https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js'/>
<script>
// Konfigurasi Firebase
var firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
};
// Inisialisasi Firebase
firebase.initializeApp(firebaseConfig);
</script>
Ganti code yang berwarna merah dengan code Firebase anda
2. Lalu Pasangkan Code JavasJavascript Berikut Di Antara Kode <body> dan </body> pada html template blogger sobat.
<script> var provider = new firebase.auth.GoogleAuthProvider(); document.getElementById('google-login-btn').addEventListener('click', function() { firebase.auth().signInWithPopup(provider) .then((result) => { // Login berhasil var user = result.user; displayUserInfo(user); }).catch((error) => { // Tangani error var errorCode = error.code; var errorMessage = error.message; alert('Error: ' + errorMessage); }); }); function displayUserInfo(user) { document.getElementById('login-container').style.display = 'none'; document.getElementById('user-info').style.display = 'block'; document.getElementById('user-photo').src = user.photoURL; document.getElementById('user-name').textContent = user.displayName; document.getElementById('user-email').textContent = user.email; }function showEditProfile() { document.getElementById('user-info').style.display = 'none'; document.getElementById('edit-profile').style.display = 'block'; } function cancelEdit() { document.getElementById('edit-profile').style.display = 'none'; document.getElementById('user-info').style.display = 'block'; } function saveProfile() { var user = firebase.auth().currentUser; var newName = document.getElementById('edit-name').value; var newPhotoFile = document.getElementById('edit-photo').files[0]; if (newName) { user.updateProfile({ displayName: newName }).then(() => { // Update berhasil alert('Profile updated successfully!'); displayUserInfo(user); cancelEdit(); }).catch((error) => { alert('Error: ' + error.message); }); }if (newPhotoFile) { var reader = new FileReader(); reader.onloadend = function() { user.updateProfile({ photoURL: reader.result }).then(() => { // Update berhasil alert('Profile photo updated successfully!'); displayUserInfo(user); cancelEdit(); }).catch((error) => { alert('Error: ' + error.message); }); } reader.readAsDataURL(newPhotoFile); } } function logout() { firebase.auth().signOut().then(() => { alert('Logout successful!'); document.getElementById('login-container').style.display = 'block'; document.getElementById('user-info').style.display = 'none'; document.getElementById('edit-profile').style.display = 'none'; }).catch((error) => { alert('Error: ' + error.message); }); } firebase.auth().onAuthStateChanged((user) => { if (user) { // Pengguna masukdisplayUserInfo(user); } else { // Pengguna keluar document.getElementById('login-container').style.display = 'block'; document.getElementById('user-info').style.display = 'none'; document.getElementById('edit-profile').style.display = 'none'; } }); </script>
3. Silahkan Anda Pasang Code Html Berikut Dimana Saja Yang Anda Inginkan. Bisa Dipasang Di Halaman Statistik Baru Blogger Anda, Di Dalam Widget Tata Letak, Didalam Navigasi. Semua tergantung kreasi sobat memasangnya.
<div id="login-container"><button id="google-login-btn" class="btn-elegant">Login with Google</button></div><div id="user-info" style="display: none;"><img id="user-photo" src="" alt="User Photo"><p id="user-name"></p><button onclick="showEditProfile()" class="btn-elegant">Edit Profile</button><button onclick="logout()" class="btn-elegant">Logout</button></div><div id="edit-profile" style="display: none;"><input type="text" id="edit-name" placeholder="New Name"><input type="file" id="edit-photo" accept="image/*"><button onclick="saveProfile()" class="btn-elegant">Save</button><button onclick="cancelEdit()" class="btn-elegant">Cancel</button></div>
Jika sudah silahkan sobat lihat hasilnya maka Tampilan Tombol Login Firebase Authentication Untuk Blogger akan berfungsi seperti milik saya. Jika tampilanya masih kaku silahkan sobat percantik tampilanya sendiri ya kalau ingin yang terima jadi ya beli fitur login dengan google di blogspot dengan Firebase Authentication milik OkayimDotCom.
Terima kasih sudah berkunjung semoga artikel ini bermanfaat.