Cara Membuat Fitur Login Dengan Facebook Di Blogspot

 Apa Itu Login Auth / Authentication ?

Login authentication adalah proses verifikasi identitas pengguna didalam sebuah website maupun aplikasi untuk memastikan bahwa orang yang mencoba mengakses sistem atau layanan adalah orang yang sebenarnya dan memiliki otorisasi untuk melakukannya. Ini melibatkan penggunaan kombinasi kredensial unik, seperti nama pengguna dan kata sandi, atau metode otentikasi lainnya, seperti pemindaian sidik jari atau pengenalan wajah, untuk mengamankan akses ke suatu platform atau aplikasi.

Salah satunya yang paling digunakan oleh developer saat menerapkan fitur login didalam website maupun aplikasi yaitu dengan fitur:

1. Login Dengan Google 

2. Login Dengan Facebook 

3. Login dengan username dan password 

Pada artikel kali ini saya akan memberikan tutorial cara membuatnya. Sebelum lanjut mari kita ketahui dahulu manfaat membuat fitur login Authentication didalam website maupun aplikasi.

Manfaat Fitur Login Authentication 

Manfaat dari login authentication adalah:

1. Keamanan: Mencegah akses yang tidak sah atau tidak diotorisasi ke sistem atau layanan, melindungi data sensitif dan privasi pengguna.

2. Identifikasi: Memastikan bahwa pengguna yang mengakses sistem adalah orang yang sebenarnya dan memiliki hak akses yang sesuai.

3. Akuntabilitas: Memungkinkan untuk melacak aktivitas pengguna secara individu, yang membantu dalam investigasi insiden keamanan atau masalah lainnya.

4. Kontrol akses: Memberikan kontrol atas hak akses pengguna, termasuk level akses dan fungsi yang dapat diakses dalam suatu sistem atau aplikasi.

5. Perlindungan terhadap pencurian identitas: Mencegah pencurian identitas dengan memverifikasi kredensial pengguna sebelum memberikan akses ke akun atau data sensitif.

Dengan demikian, login authentication adalah langkah penting dalam menjaga keamanan dan privasi informasi dalam lingkungan digital.

Cara Membuat Fitur Login Dengan Facebook Di Blogspot 

Untuk membuat fitur login didalam blog kamu yang dibuat dari blogger. Sayangnya blogger belum memiliki fitur yang memadai . Namun anda jangan berkecil hati, karena anda masih bisa membuat fitur login di Blogger anda dengan menggunakan html javascript yang akan saya bagikan di bawah ini.

Cara Membuat Fitur Login Di Blogspot 

1. Silahkan anda copy dan paste code javascript di bawah ini tepat di atas code </body> pada template blogspot anda.

<script>
  // Initialize the Facebook SDK with your app ID
  FB.init({
 appId      : 'Your-App-ID',
    cookie     : true,
    xfbml      : true,
    version    : &#39;v19.0&#39;
  });
// Check if the user is already logged in on page load
  window.onload = function() {
 if(localStorage.getItem(&#39;accessToken&#39;)) {
      fetchUserInfo();
    }
  }
  // Function to handle Facebook login
  function loginWithFacebook() {
    FB.login(function(response) {
     if (response.authResponse) {
        // User successfully authorized your app
console.log(&#39;Access Token: &#39; + response.authResponse.accessToken);
        // Save access token to localStorage        localStorage.setItem(&#39;accessToken&#39;, response.authResponse.accessToken);
        // Call function to fetch and display user info
        fetchUserInfo();
      } else {
        // User cancelled login or did not fully authorize
        console.log(&#39;User cancelled login or did not fully authorize.&#39;);
}
    }, {scope: &#39;email&#39;});
  }
  // Function to fetch and display user info
  function fetchUserInfo() {
    FB.api(&#39;/me&#39;, {fields: &#39;name, picture.width(150).height(150)&#39;}, function(response) {
      // Display user name and picture
     document.getElementById(&#39;userInfo&#39;).innerHTML = `
        <p>Welcome, ${response.name}!</p>
        <img alt='${response.name}&apos;s Profile Picture' src='${response.picture.data.url}'/>
      `;
// Show logout button and hide login button      document.getElementById(&#39;fb-login-container&#39;).style.display = &#39;none&#39;;     document.getElementById(&#39;logoutButton&#39;).style.display = &#39;block&#39;;
    });
  }
  // Function to handle logout
 function logout() {
    // Clear access token from localStorage  localStorage.removeItem(&#39;accessToken&#39;);
// Perform logout through Facebook SDK
    FB.logout(function(response) {
      // Redirect or perform any other actions after logout
      // For example, redirect to the homepage
      window.location.href = &#39;/&#39;;
    });
  }
</script>

2. Langkah berikutnya silahkan anda copy code Script dibawah tepat di antara code <head> Dan </head> di template blogspot anda.

<script src='https://connect.facebook.net/en_US/sdk.js'/>

3. Langkah berikutnya silahkan anda copy code dibawah ini dan anda bisa memasangkannya dimanapun pada blogspot anda.

<div id='userInfo'/>
<button id='logoutButton' onclick='logout()' style='display: flex;'>Logout</button>
<button onclick='loginWithFacebook()' style='background-color: #3b5998;        color: white;        border: none;        padding: 10px 20px;        font-size: 16px;        border-radius: 5px;        cursor: pointer;'>Login</button>

CATATAN :

Pada langkah pertama teks Your-App-ID

silakan ubah dengan code id

aplikasi Facebook yang sudah

Dibuat.

Untuk cara membuatnya

anda bisa mengunjungi url

developers.facebook.com/