[Facebook] 客製化 facebook 登入

標籤: facebook javascript

如果想要使用 facebook 登入自己做的網站的話,首先我們需要先到 facebook developer 申請一個 app。

接著需要在 app 裡設定要登入的網域:

 

設定好了開始來做 fb 的登入,我們使用 javascript SDK,首先要在頁面上放上這段初始化的程式碼:

FB.init({
  appId      : '{your-app-id}',  //你的 facebook app id
  status     : true,
  xfbml      : true,
  version    : 'v7.0' // 版號,撰寫本文的時候已經到 7.0 版了
});

 

接著在頁面上放上一顆你客製化的 fb 按鈕如下,並在點擊下去的時候使用 facebook 的範例程式碼:

 

FB.login(function(response) {
    if (response.authResponse) {
     //這邊可以做登入成功後要做的事,像我就會把使用者登入狀態存到 session 去
     let userID = response.authResponse.userID; 
     console.log('Welcome!  Fetching your information.... ');
     FB.api('/me', function(response) {
       console.log('Good to see you, ' + response.name + '.');
     });
    } else {
     console.log('User cancelled login or did not fully authorize.');
    }
});

如果有想要要多一點權限的話可以像這樣設定:

FB.login(function(response) {
    // handle the response
}, {
    scope: 'email', 
    return_scopes: true
});

 

要登出的話只要像這樣呼叫 api 就好了

FB.logout(function(response) {
  // user is now logged out
});

 

參考:
facebook login
facebook logout