2013年3月24日日曜日

FacebookのjavascriptSDKとUIWebViewでの落とし穴

FB.login()を使うとブランクが残る

いくつも関数が用意されているのですが、ログインのために開いたWindowが自動で閉じません。
そのため、白いブランク画面が表示されたままで遷移が止まってしまいます。

ログインは、window.locationとリダイレクトURLを自前設定することで、FBログインののち、用意している画面にリダイレクトさせることができます。



サンプルコード
 


login





  window.fbAsyncInit = function() {
    var stat = "";
    var hostUrl = "http://foo.bar/login.html";
    var appId = "xxxxxxxxxxxxxxx";
    var permission = "user_about_me,user_photos,user_birthday,user_location";

    // init the FB JS SDK
    FB.init({
      appId      : appId, // App ID from the App Dashboard
      status     : true, // check the login status upon init?
      cookie     : true, // set sessions cookies to allow your server to access the session?
      xfbml      : true  // parse XFBML tags on this page?
    });

    // Additional initialization code such as adding Event Listeners goes here
    FB.getLoginStatus(function(resp){
        if(resp.status === 'connected'){
            console.log("already login");
            getData();
            stat = resp.status;
            $("#facebookLogin").text("logout");
        }else if(resp.status === 'not_authorized'){
            console.log("noAuth");
        }else{
            console.log("noLogin");
        };
    });

    function getData(){
        FB.api("/me/", function(resp){
            console.log(resp);
        });
    }

    $("#facebookLogin").click(function(){
        console.log("click");
        if(stat === "connected"){
            console.log("connect");
            FB.logout(function(response) {
                $("#facebookLogin").text("login");
                stat = "";
            });
        }else{
            console.log("not connect");
            window.location = encodeURI("https://m.facebook.com/dialog/oauth?client_id="+appId+"&redirect_uri="+hostUrl+"&response_type=token&scope="+permission);
        }
    });

  };

  (function(d, debug){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/ja_JP/all" + (debug ? "/debug" : "") + ".js";
     ref.parentNode.insertBefore(js, ref);
   }(document, false)); 



参考
JavaScript SDK