2013-09-04

以 Facebook 登入網站

許久沒有做 Facebook 相關的功能了, 記錄一下。

window.fbAsyncInit 是 Facebook JS SDK 載入後執行。
FB.getLoginStatus 判斷用戶目前對 App 的狀況。
FB.login 做授權登入。

JS SDK 和 PHP SDK 一起用時, 記得要將 FB.init 的 status cookie 設定為 true。


<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  </head>

<body>
  <div id="fb-root"></div>
  <script>
  window.fbAsyncInit = function() {
      FB.init({
        appId      : 'APP_ID',
        channelUrl : '//YOUR_DOMAIN/channel.html',
        status     : true,
        cookie     : true,
        xfbml      : true
      });

      FB.getLoginStatus(function(response) {
          /*
            // 已授權
            { "authResponse":
                { "accessToken":"...",
                  "userID":"...",
                  "expiresIn":5540,
                  "signedRequest":"..."
                },
             "status":"connected"
            }

            // 登入但未授權
            {"authResponse":null,"status":"not_authorized"} 

            // 沒登入
            {"authResponse":null,"status":"unknown"} 
          */
          if (response.status === 'connected') {
              FB.api('/me', function(me_response) {
                 console.log( me_response );
                  // id, name, first_name, last_name, link, username, gender, timezone, locale, verified, updated_time
                  // $("#for_user_info").html( me_response.name + " 您好~");
                  $("#for_user_info").html( JSON.stringify(me_response));
              });
          } else if (response.status === 'not_authorized') {
              $("#for_user_info").html( "請允許 App 要求!");
              doAuthenticateApp();
          } else {
              $("#for_user_info").html( "請登入 Facebook 並允許 App 要求!");
              doAuthenticateApp();
          }
      });
  };
  (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/zh_TW/all.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

    function doAuthenticateApp(){
        FB.login(loginStatusHandler, {
            scope: 'read_stream,publish_stream'
        });
    }

    function loginStatusHandler(response) {
        switch( response.status ) {
          case "connected":       // 已授權
            window.location.reload();
            break;
          case "not_authorized":  // 已登入,未授權
            break;
          case "unknown":         // 未登入
          default:
        }
    }
  </script>

  <div id="for_user_info"></div>
  <button onclick="doAuthenticateApp()">doAuthenticateApp</button>
</body>
</html>

沒有留言:

FB 留言