Halo Semuanya, Kali ini Saya akan membagikan Tutorial Membuat Fitur Autentikasi Dasar di Blogger dengan Menggunakan Firebase. Untuk membuat Fitur Autentikasi, kita akan Menggunakan salah Satu Produk dari Firebase yaitu Firebase Authentication.
Firebase Authentication adalah Produk yang Dimiliki oleh Firebase yang dapat Digunakan untuk membuat Sistem Autentikasi yang mudah Digunakan dan hanya memerlukan Sedikit Baris Kode saja.
Firebase Authentication juga memiliki Banyak Fitur yang Beragam mulai dari Login dengan Email atau Nomor Telepon, Login dengan Akun Pihak ketiga seperti Google, Facebook, Github dan Masih banyak lagi, Firebase Authentication juga memiliki Fitur tambahan seperti Autentikasi Multi Faktor (kadang Disebut Autentikasi dua Langkah) yang dapat Digunakan dengan Mengupgrade ke Firebase Authentication dengan Identity Platform.
Membuat Fitur Autentikasi Dasar di Blogger dengan Menggunakan Firebase
Membuat Project Di Google Firebase
Untuk Memulai, Anda haruf Membuat Satu Project (Projek) Di Google Firebase. Untuk Caranya, Anda dapat Melihatnya Dibawah.
1. Masuk ke Dashboard Google Firebase Menggunakan Akun Google Anda.
2. Lalu Anda dapat Mengeklik Create a Project untuk Membuat Projek baru.
3. Masukkan Nama Project Sesuai Keinginan Anda.
4. Lalu pada Step Google Analytics for you Firebase Project, Klik Lanjutkan (Contiune).
5. Pada Bagian Step Configure Google Analytics, Pilih Akun Google Firebase Anda lalu Klik Create Project.
6. Kemudian Tunggu dan jika Sudah muncul Your new project is ready, Maka sudah Selesai dan klik Contiune.
Postingan Terkait
Membuat Aplikasi Baru
Anda harus Membuat Aplikasi Baru pada Project Google Firebase Anda.
1. Pada Bagian Get started by adding Firebase to your app Klik Aplikasi Web </>
2. Pada Bagian Register app, Masukkan Nama Aplikasi sesuai Keinginan Kalian.
3. Pada Bagian Add Firebase SDK, Anda akan Melihat Kode untuk Penyiapan Aplikasi, Salin Kode pada Bagian const firebaseConfig dan Simpan Kode tersebut Di Notepad atau Tempat Catatan lainnya untuk Digunakan Nanti, Kode yang Disalin akan Terlihat seperti ini:
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIz......",
authDomain: "xxxxxx.firebaseapp.com",
projectId: "xxxxxx",
storageBucket: "xxxxxx.appspot.com",
messagingSenderId: "xxxxxx",
appId: "xxxxxx",
measurementId: "G-xxxxxxxxxx"
};
Menyiapkan Authentication
Untuk menbuat Fitur Autentikasi, Anda harus Menyiapkan Authentication.
1. Pada bagian kiri Dashboard, Pilih Build dan klik Menu Authentication dan klik Tombol Get Started.
2. Setelah itu, Anda akan Dialihkan ke Menu Sign-in method dan Anda dapat Memilih Google pada Bagian Additional providers.
3. Lalu anda dapat Mengaktifkan metode ini dengan Menekan Switch Enable dan untuk Bagian Public-facing name for project Anda dapat memasukkan Nama sesuai Keinginan Anda dan pada bagian Support email for project Anda dapat memilih Email Anda.
4. Setelah Metode Login dengan Akun Google telah Diaktifkan, Anda dapat Lanjut ke Tutorial Berikutnya.
5. Kemudian Pilih Menu Settings dan Pilih Menu Authorized domains pada bagian Domains.
6. Kemudian Klik Tombol Add domain dan masukkan Domain/Subdomain Anda, misalnya www.example.com lalu klik Add untuk Menyimpan Perubahan.
Lanjut ke Dashboard Blogger
1. Buka Dashboard Blogger.
2. Pada Dashboard Blogger, Klik Tema.
3. Kemudian Klik Dan Klik Edit HTML.
4. Cari Bagian <head> Dan Tempel Kode Berikut Tepat Dibawahnya.
<!--[ Firebase App (core SDK) ]-->
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<!--[ Firebase Authentication ]-->
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIz......",
authDomain: "xxxxxx.firebaseapp.com",
projectId: "xxxxxx",
storageBucket: "xxxxxx.appspot.com",
messagingSenderId: "xxxxxx",
appId: "xxxxxx",
measurementId: "G-xxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
</script>Jangan Lupa untuk Mengganti Bagian yang Ditandai, yaitu:
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIz......",
authDomain: "xxxxxx.firebaseapp.com",
projectId: "xxxxxx",
storageBucket: "xxxxxx.appspot.com",
messagingSenderId: "xxxxxx",
appId: "xxxxxx",
measurementId: "G-xxxxxxxxxx"
};
Menjadi Kode yang telah Anda Salin dan Simpan Sebelumnya.
5. Lalu Klik Simpan, Selesai.
Membuat Halaman Baru
1. Masuk ke Dashboard Blogger.
2. Pada Dashboard Blogger, Klik Halaman.
3. Lalu klik Buat Halaman dan Berikan Halaman tersebut Judul Login.
4. Ubah Mode Editor menjadi Tampilan HTML lalu Tempel Kode Berikut.
<button class='google-login-button' id='google-login-button'><img src='https://www.gstatic.com/firebasejs/staging/3.0.0/auth/images/google.svg' style='width:20px;height:20px'><span>Masuk dengan Akun Google</span></button>
<style>
.google-login-button{cursor:pointer;align-items:center;column-gap:8px;display:inline-flex;border:1px solid #e4e3e1;color:inherit;background-color:transparent;padding:10px;opacity:.9;border-radius:5px;margin-bottom:15px;margin-top:-3px;justify-content:center;width:100%}
.google-login-button:hover{opacity:0.9}
</style>
<script>
// Login with Google Code
document.getElementById('google-login-button').addEventListener('click', function() {
var provider = new firebase.auth.GoogleAuthProvider();
auth.signInWithPopup(provider)
.then((result) => {
alert('Anda berhasil Masuk ke Akun Anda');
window.location.href = '/p/profile.html';
}).catch((error) => {
alert('Terjadi Kesalahan saat ingin Masuk ke Akun Google Anda, Coba lagi nanti');
console.error(error);
});
});
</script>5. Setelah itu, Anda dapat Mempublikasikan Halamannya dengan Mengeklik Tombol Publikasikan.
6. Kembali ke Bagian Halaman dan klik Buat Halaman dan Berikan Halaman tersebut Judul Profile.
7. Ubah Mode Editor menjadi Tampilan HTML lalu Tempel Kode Berikut.
<div>
<p><b>Nama:</b> <span id='userName'></span></p>
<p><b>Email:</b> <span id='userEmail'></span></p>
<p><b>User ID:</b> <span id='userId'></span></p>
</div>
<button class='logoutButton' id='logoutButton'>Logout dari Akun</button>
<style>
.logoutButton{cursor:pointer;align-items:center;column-gap:8px;display:inline-flex;border:1px solid #e4e3e1;color:inherit;background-color:transparent;padding:10px;opacity:.9;border-radius:5px}
.logoutButton:hover{opacity:0.9}
</style>
<script>
auth.onAuthStateChanged((user) => {
if (user) {
document.getElementById('userName').textContent = user.displayName;
document.getElementById('userEmail').textContent = user.email;
document.getElementById('userId').textContent = user.uid;
} else {
window.location.href = '/p/login.html';
}
});
document.getElementById('logoutButton').addEventListener('click', function () {
auth.signOut().then(() => {
alert('Anda Berhasil keluar dari Akun Anda!');
window.location.href = '/p/login.html';
}).catch((error) => {
alert('Terjadi Kesalahan saat ingin Logout dari Akun Anda, Coba lagi nanti');
});
});
</script>8. Setelah itu, Anda dapat Mempublikasikan Halamannya dengan Mengeklik Tombol Publikasikan.
Kode Tambahan
Anda dapat Menggunakan Kode Berikut jika Anda ingin Menambahkan Fitur lainnya pada Fitur Autentikasi Anda.
Perbarui Info Akun
Anda dapat Menggunakan Kode ini untuk Memperbarui Info Akun, Misalnya Memperbarui Nama pada Akun.
var user = auth.currentUser;
user.updateProfile({
displayName: 'John Doe'
}).then(() => {
alert('Nama anda Berhasil Diganti');
}).catch((error) => {
alert(error);
});OAuth 2.0 Scope
Untuk mengambil Data tambahan (Layanan yang dimiliki oleh Google) dari Pengguna yang Login dengan Akun Google, misalnya mengambil Data Blogger Pengguna (Hanya untuk Membaca/Melihat Data), Gunakan Scope dengan Kode seperti Dibawah. Lihat semua OAuth 2.0 Scope
Untuk Menggunakan Scope tertentu, Anda mungkin perlu melakukan Verifikasi Layar izin OAuth, Lihat Selengkapnya
provider.addScope('https://www.googleapis.com/auth/blogger.readonly');
Penutup
Jadi Ini Adalah Tutorial untuk Membuat Fitur Autentikasi Dasar di Blogger dengan Menggunakan Firebase. Saya harap Postingan ini dapat membantu anda, Jika ada yang ingin ditanyakan maka tanyakan Di Kolom Komentar.