FB Login API 臉書的免費登入機制 (讓網站可以使用FB的帳號快速登入)

FB Login API 是 Facebook 提供的一種 API（應用程式介面），允許網站將 Facebook 的認證系統整合到他們自己的網站或應用程式中。用戶可以使用他們的 Facebook 帳號與密碼登入網站或應用程式，而不必建立獨立的帳戶，大幅減少註冊時間，這有助於提高使用者體驗並降低登入門檻，讓用戶能快速購物或使用網站服務。

網站整合Facebook Login API 有以下幾項好處：

  1. 快速登入：用戶可以使用 Facebook 帳戶快速登入網站或應用程式，而無需輸入多餘的登入訊息。
  2. 用戶驗證：API 可以確認用戶的身份，進而確保帳戶的安全性。
  3. 提供個人資料：API 可以讓網站或應用程式獲取用戶的基本資料，例如名字、電子郵件地址、生日等，以提供個人化體驗。
  4. 提升可信度：Facebook 是一個高度信任的社交平台，使用 Facebook 登入 API 可以幫助網站或應用程式提高用戶的信任度。
  5. 收集數據：API 可以讓網站或應用程式收集關於用戶行為的數據，以改善產品或服務。

可能的問題如下：

  1. 限制使用：Facebook 的政策有時可能限制使用 API 的方式，導致無法如預期地使用。
  2. 技術限制：API 可能存在技術上的限制，例如功能不足、性能差等，導致網站或應用程式無法達到最佳效果。
  3. 隱私問題：使用 Facebook Login API 可能會暴露用戶的個人資料，導致隱私問題。

如何實作：
1. 網頁上需要一個FB的登入按鈕（請技術人員參考）

  <button class="button4 col-6" onClick="login_fb();return false;"><i class="fab fa-facebook-square"></i> Facebook 帳號登入 </button>


2. 用戶點擊按鈕後會跳出FB登入視窗

3. 用戶如果有輸入正確的FB帳號密碼會再導回自家網站，這時自家網站可以得到用戶id、名字、電子郵件地址、生日等　跟自家資料庫做比對，看此用戶是否已經存在！如果不存在就創建新的用戶代號，如果存在就引導進入會員登入頁面！有很多種變通方式。

前端的程式碼如下（請技術人員參考）：

<script>
function login_fb(){
   FB.login(function(response) {
   checkLoginState();
   }, {scope: 'public_profile,email'});
}
function statusChangeCallback(response) {
   if (response.status === 'connected') {  //正常狀況
      loginAPI();
   } else if (response.status === 'not_authorized') {  //未授權登入　自行處理
      alert('not_authorized');
   } else {  //其它狀況　自行處理
      alert(response.status);
   }
}
function checkLoginState() {
   FB.getLoginStatus(function(response) {
   statusChangeCallback(response);
   });
}
window.fbAsyncInit = function() {
   FB.init({
   appId      : 'XXXXXXXXXXXXXXXXX',
   xfbml      : true,  // parse social plugins on this page
   version    : 'v2.12' // use version 2.1
   });
};
// Load the SDK asynchronously
(function(d, s, id){
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement(s); js.id = id;
   js.src = "//connect.facebook.net/en_US/sdk.js";
   fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function loginAPI() {
      FB.api('/me', 'GET', {"fields":"id,name,email,birthday,gender"},
  function(response) {
      alert(response.name+'您已成功登入');　//登入成功 自行後續處理
      window.location.href= 'http://www.xxx.com';
  }
);
}
</script>

分享這篇文章的網址這篇文章的網址(可分享到FB、LINE)：

用LINE分享給朋友:


這篇文章的QR CODE:(用手機掃我)