Login by email akan membutuhkan konfirmasi dari user dimana link konfirmasi akan di email ke user oleh server dan harus dikonfirmasi oleh user, kemudian user bisa memasuki halaman khusus untuk user.
code ini bisa anda tempatkan di halaman page ataupun post atau di widget javascript dihalaman layout. mohon diperhatikan cara tata letak penempatan kode kode dibawah ini
buat halaman baru/page di blogger dan copy paste kode berikut:
Beri judul page tersebut dan simpan
<div id="userListContainer">
<table id="userListTable">
<thead>
<tr>
<th>User ID</th>
<th>Name</th>
<th>Email</th>
<th>Registration Date</th>
<!-- Tambahkan kolom lain sesuai kebutuhan -->
</tr>
</thead>
<tbody id="userListBody">
<!-- Data pengguna akan ditampilkan di sini -->
</tbody>
</table>
</div>
<script>
// Dapatkan referensi ke elemen tbody di tabel
var userListBody = document.getElementById('userListBody');
// Dapatkan data pengguna saat halaman dimuat
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
// Hapus data sebelumnya jika ada
userListBody.innerHTML = '';
// Tambahkan baris baru untuk setiap pengguna
var newRow = userListBody.insertRow();
newRow.insertCell().textContent = user.uid;
newRow.insertCell().textContent = user.displayName || 'N/A';
newRow.insertCell().textContent = user.email || 'N/A';
// Dapatkan tanggal pertama kali terdaftar
var creationTime = new Date(user.metadata.creationTime);
newRow.insertCell().textContent = creationTime.toDateString();
// Tambahkan kolom lain sesuai kebutuhan
const displayName = user.displayName;
document.getElementById('namaUser').value = displayName;
const email = user.email;
document.getElementById('nomorUser').value = email;
} else {
// Pengguna tidak diotentikasi
userListBody.innerHTML = '<tr><td colspan="4">User not authenticated.Please Login or Register</td></tr>';
}
});
</script>
<style>
/* Gaya untuk tombol Login, Register, dan Logout */
.action-button {
background-color: #ff6529;
color: #fff;
border: none;
padding: 10px 20px;
margin: 5px;
cursor: pointer;
font-weight: bold;
border-radius: 5px;
}
.action-button:hover {
background-color: #c9572a;
}
</style>
<!-- Tombol untuk membuka dialog login -->
<button class="action-button" id="tampilkanLogin">Login</button>
<!-- Tombol untuk membuka dialog register -->
<button class="action-button" id="tampilkanRegister">Register</button>
<br>Atau<br>
<button class="action-button" id="tampilkanGoogle" onclick="signInWithGoogle()">Sign in with Google</button>
<!-- Tombol logout (awalnya tersembunyi) -->
<button class="action-button" id="tampilkanLogout" style="display: none;">Logout</button>
<script>
// Google Sign-In function
function signInWithGoogle() {
const provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider)
.then((result) => {
// This gives you a Google Access Token.
const credential = result.credential;
// The signed-in user info.
const user = result.user;
console.log(user);
}).catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.email;
// The firebase.auth.AuthCredential type that was used.
const credential = error.credential;
console.error(errorMessage);
});
}
// Sign out function
function signOut() {
firebase.auth().signOut().then(() => {
console.log("User signed out successfully");
}).catch((error) => {
console.error("Error signing out:", error);
});
}
</script>
<!-- Tampilkan profil pengguna -->
<div id="profilPengguna" style="display: none;">
<h3>Profil User</h3>
<!-- Tampilkan profil pengguna
/ <p id="namaProfil"></p> -->
<img id="gambarProfil" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGhLSSNu1pkrxUVfXCyEdCgeQZfnwv2F819w&usqp=CAU" alt="Foto Profil" style="max-width: 100px;">
<br/>
<br/>
<input id="namaProfil" name="name" required="required" type="text" readonly/>
<input id="emailProfil" name="email" required="required" type="text" readonly/>
<br/>
<br/>
</br>
</br>
lanjutkan ke pasang lowongan <a href="/p/form-pasang.html">klik disini</a>
<!--<p id="emailProfil"></p> -->
</br>
</br>
</br>
<button class="action-button" id="gantiNamaProfil">Ganti Nama</button>
<button class="action-button" id="gantiFotoProfil">Ganti Foto Profil</button>
</div>
<script>
// Konfigurasi Firebase Anda
// Mendapatkan elemen tombol login
const tombolLogin = document.getElementById('tampilkanLogin');
const tombolGoogle = document.getElementById('tampilkanGoogle');
// Mendapatkan elemen tombol register
const tombolRegister = document.getElementById('tampilkanRegister');
// Mendapatkan elemen tombol logout
const tombolLogout = document.getElementById('tampilkanLogout');
// Menambahkan event listener untuk menghandle klik pada tombol login
tombolLogin.addEventListener('click', () => {
Swal.fire({
title: 'Login',
html:
'<input type="email" id="login-email" class="swal2-input" placeholder="Email">' +
'<input type="password" id="login-password" class="swal2-input" placeholder="Password">',
showCancelButton: true,
confirmButtonText: 'Login',
cancelButtonText: 'Batal',
showCloseButton: false,
preConfirm: () => {
const email = Swal.getPopup().querySelector('#login-email').value;
const password = Swal.getPopup().querySelector('#login-password').value;
// Melakukan proses login dengan Firebase Authentication
return firebase.auth().signInWithEmailAndPassword(email, password)
.then(() => {
if (firebase.auth().currentUser.emailVerified) {
// Login berhasil, tampilkan tombol logout dan profil
tampilkanProfil();
Swal.fire('Login Berhasil', 'Anda berhasil login.', 'success');
} else {
Swal.fire('Login Gagal', 'Anda belum verifikasi email. Silakan cek email Anda dan verifikasi akun Anda.', 'error');
firebase.auth().signOut(); // Logout jika email belum diverifikasi
}
})
.catch((error) => {
Swal.showValidationMessage('Login gagal. Harap periksa kembali email dan password Anda.');
});
}
});
});
// Menambahkan event listener untuk menghandle klik pada tombol register
tombolRegister.addEventListener('click', () => {
Swal.fire({
title: 'Register',
html:
'<input type="text" id="register-name" class="swal2-input" placeholder="Nama">' +
'<input type="email" id="register-email" class="swal2-input" placeholder="Email">' +
'<input type="password" id="register-password" class="swal2-input" placeholder="Password">' +
'<input type="password" id="confirm-password" class="swal2-input" placeholder="Konfirmasi Password">',
showCancelButton: true,
confirmButtonText: 'Register',
cancelButtonText: 'Batal',
showCloseButton: false,
preConfirm: () => {
const name = Swal.getPopup().querySelector('#register-name').value;
const email = Swal.getPopup().querySelector('#register-email').value;
const password = Swal.getPopup().querySelector('#register-password').value;
const confirmPassword = Swal.getPopup().querySelector('#confirm-password').value;
// Validasi konfirmasi password
if (password !== confirmPassword) {
Swal.showValidationMessage('Konfirmasi password tidak cocok.');
return false;
}
// Melakukan proses registrasi dengan Firebase Authentication
return firebase.auth().createUserWithEmailAndPassword(email, password)
.then((userCredential) => {
// Set nama pengguna di profil Firebase
return userCredential.user.updateProfile({
displayName: name
})
.then(() => {
// Kirim email verifikasi
return firebase.auth().currentUser.sendEmailVerification()
.then(() => {
// tampilkanProfil();
firebase.auth().signOut();
tampilkanLoginRegister();
Swal.fire('Registrasi Berhasil', 'Silakan cek email Anda untuk verifikasi akun Anda.', 'success');
})
.catch((error) => {
Swal.fire('Error', 'Gagal mengirim email verifikasi. Silakan coba lagi nanti.', 'error');
});
})
.catch((error) => {
Swal.fire('Error', 'Gagal mengatur nama pengguna.', 'error');
});
})
.catch((error) => {
Swal.showValidationMessage('Registrasi gagal. Harap periksa kembali email dan password Anda.');
});
}
});
});
// Menambahkan event listener untuk menghandle klik pada tombol logout
tombolLogout.addEventListener('click', () => {
firebase.auth().signOut()
.then(() => {
tampilkanLoginRegister();
Swal.fire('Logout Berhasil', 'Anda berhasil logout.', 'success');
})
.catch((error) => {
Swal.fire('Error', 'Gagal logout. Silakan coba lagi nanti.', 'error');
});
});
// Fungsi untuk menampilkan tombol logout dan profil
function tampilkanProfil() {
tombolLogin.style.display = 'none';
tombolRegister.style.display = 'none';
tombolGoogle.style.display = 'none';
tombolLogout.style.display = 'inline-block';
// Mendapatkan informasi profil pengguna
const user = firebase.auth().currentUser;
const displayName = user.displayName;
const email = user.email;
const photoURL = user.photoURL; // URL foto profil (jika ada)
// Menampilkan profil pengguna
//document.getElementById('namaProfil').textContent = 'Nama: ' + displayName;
document.getElementById('namaProfil').value = displayName;
// document.getElementById('emailProfil').textContent = 'Email: ' + email;
document.getElementById('emailProfil').value = email;
if (photoURL) {
document.getElementById('gambarProfil').src = photoURL;
}
document.getElementById('profilPengguna').style.display = 'block';
}
// Fungsi untuk menampilkan tombol login dan register
function tampilkanLoginRegister() {
tombolLogin.style.display = 'inline-block';
tombolRegister.style.display = 'inline-block';
tombolGoogle.style.display = 'inline-block';
tombolLogout.style.display = 'none';
document.getElementById('profilPengguna').style.display = 'none';
}
// Menambahkan event listener untuk tombol "Ganti Nama"
document.getElementById('gantiNamaProfil').addEventListener('click', () => {
const newName = prompt('Masukkan nama baru:');
if (newName !== null && newName.trim() !== '') {
const user = firebase.auth().currentUser;
user.updateProfile({
displayName: newName
}).then(() => {
document.getElementById('namaProfil').textContent = 'Nama: ' + newName;
Swal.fire('Nama Berhasil Diubah', '', 'success');
}).catch((error) => {
Swal.fire('Error', 'Gagal mengubah nama. Silakan coba lagi nanti.', 'error');
});
}
});
// Menambahkan event listener untuk tombol "Ganti Foto Profil"
document.getElementById('gantiFotoProfil').addEventListener('click', () => {
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'image/*';
fileInput.style.display = 'none';
// Trigger input file saat diklik
fileInput.addEventListener('change', unggahFotoProfil);
document.body.appendChild(fileInput);
fileInput.click();
// Hapus elemen input file setelah digunakan
fileInput.remove();
});
// Fungsi untuk mengunggah foto profil
function unggahFotoProfil() {
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'image/*';
fileInput.style.display = 'none';
const user = firebase.auth().currentUser;
// Pastikan ada file yang dipilih
if (fileInput.files.length > 0) {
const file = fileInput.files[0];
const storageRef = firebase.storage().ref('profil/' + user.uid + '/' + file.name);
// Unggah gambar ke Firebase Storage
storageRef.put(file).then((snapshot) => {
snapshot.ref.getDownloadURL().then((downloadURL) => {
// Simpan URL gambar di profil pengguna
user.updateProfile({
photoURL: downloadURL
}).then(() => {
// Tampilkan foto profil yang baru di halaman
document.getElementById('gambarProfil').src = downloadURL;
Swal.fire('Foto Profil Berhasil Diubah', '', 'success');
}).catch((error) => {
Swal.fire('Error', 'Gagal mengatur foto profil. Silakan coba lagi nanti.', 'error');
});
});
});
}
}
// Memeriksa status otentikasi saat halaman dimuat
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
tampilkanProfil();
} else {
tampilkanLoginRegister();
}
});
</script>
Copy paste kode dibawah ini dan tempel di Theme/Custom Edit html dibawah <head>dan simpan
<script src='https://cdn.jsdelivr.net/npm/lightgallery/dist/js/lightgallery.min.js'/>
<script src='https://cdn.jsdelivr.net/npm/lg-thumbnail/dist/lg-thumbnail.min.js'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css' rel='stylesheet'/>
<script src='https://www.gstatic.com/firebasejs/9.0.2/firebase-app-compat.js'/>
<script src='https://www.gstatic.com/firebasejs/9.0.2/firebase-auth-compat.js'/>
<script src='https://cdn.jsdelivr.net/npm/sweetalert2@10'/>
<script src='https://www.gstatic.com/firebasejs/9.6.1/firebase-storage-compat.js'/>
<script src='https://www.gstatic.com/firebasejs/9.6.0/firebase-firestore-compat.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'/>
<script src='//cdn.firebase.com/js/client/2.2.1/firebase.js' type='text/javascript'/>
<!-- Include Firebase SDK -->
<script>
// Masukkan kode firebaseConfig dibawah ini
const firebaseConfig = {
apiKey: "AIzaSy....",
authDomain: "karirid...com",
databaseURL: "https://.....",
projectId: "karir...",
storageBucket: "karir....com",
messagingSenderId: "...",
appId: "1:843...:web:063...",
measurementId: "G-5..."
};
// Inisialisasi Firebase
firebase.initializeApp(firebaseConfig);
// Mendapatkan referensi Firestore
const firestore = firebase.firestore();
// Mendapatkan referensi autentikasi Firebase
const auth = firebase.auth();
const storage = firebase.storage();
</script>
<!-- Include Firebase SDK -->
<script>
// Masukkan kode firebaseConfig dibawah ini
const firebaseConfig = {
apiKey: "AIzaSy....",
authDomain: "karirid...com",
databaseURL: "https://.....",
projectId: "karir...",
storageBucket: "karir....com",
messagingSenderId: "...",
appId: "1:843...:web:063...",
measurementId: "G-5..."
};
Masuk ke Firebase anda dan ke Project anda kemudian pilih menu Authentication Signin Methode di Enable Email dan Google account nya
Ubah Template Authentication agar server dapat mengirim email konfirmasi seperti dibawah
hasil setelah User melakukan login dapat dicek di Authentication User
Lihat Demo
Jika ada pertanyaan silahkan gunakan koment dibawah
Post a Comment