使用facebook帳號登入自己的網站

1.申請一個facebook帳號

2.點選開發人員

在頁面的最底下可找到

注意：成為開發人員需要經過手機認證(若未通過認證可能會被鎖帳號)

3.點選應用程式

在畫面最上方可找到

4.點選建立新的應用程式

只輸入App Name(授權時會顯示的標題)即可，也都可以在之後修改

5.輸入使用者認證後要連結的網址(你網站的網址)

成功後顯示

6.讓使用者連結到facebook登入授權頁面

facebook登入授權方法很多，但可以也使用連結的方式進入授權頁面

參考格式範例

格式1
https://www.facebook.com/dialog/permissions.request
?app_id=你的appId(步驟5第2張圖)
&display=page
&next=認證後連結的目標(步驟5第1張圖)
&type=user_agent
&perms=要求的權限(例:email,user_likes)
&fbconnect=1

格式2
https://graph.facebook.com/oauth/authorize
?client_id=你的appId(步驟5第2張圖)
&redirect_uri=認證後連結的目標(步驟5第1張圖)
&response_type=token
&type=user_agent
&display=page
&scope=要求的權限(例:email,user_likes)

權限參數參考

Permissions Reference

認證後回傳連結參考

認證後連結的目標#access_token=通行碼&expires_in=5184000&code=不知是啥

參考方式(javascrip)

    function loadFbSdk(d,cb,fCb){
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) {if(cb)cb();return;}
       
        js = d.createElement('script'); js.id = id; js.async = true;
        window.fbAsyncInit = cb;
        js.onerror = fCb;
        js.src = 'https://connect.facebook.net/zh_TW/all.js';
        ref.parentNode.insertBefore(js, ref);
    };

function init(){
       FB.init({
            appId : '你的appId', // App ID
            status : true, // check login status
            cookie : true, // enable cookies to allow the server to access the session
            oauth : true, // enable OAuth 2.0
            xfbml : true // parse XFBML
        });
        FB.getLoginStatus(function (response) {
            if (response.authResponse) {
                //登入成功
                FB.api('/me', function (response2) {
                           //取得玩家資料
                });
            } else {
                //登入失敗
                loginFail();
            }
        });
    };
  function loginFail(){
        alert('facebook登入失敗...');
    };
  loadFbSdk(document,init,loginFail);

參考資料

http://developers.facebook.com/docs/
http://developers.facebook.com/docs/reference/javascript/