2015年12月30日 星期三

[Qt] JavaScript / Qt 與Facebook Login SDK 使用

在完成這個專案之前,花了很多時間在research Facebook Login SDK,說實話實在是有點難搞懂

畢竟要透過Qt來使用JavaScript,不是這麼多範例可以參考,所以後來就改變策略-------

在html上寫JS然後透過QWebView+QUrl來呼叫網頁達成目的!

需要知道的

1.JavaScript如何轉址

2.JavaScript的FB login SDK流程如何

3.如何取得response與accessToken(最重要!App通行證)

//

第一個網址:

我們需要自動轉址到Facebook Login畫面

第二個網址:

Login成功以後,需要轉址到第二個網址(如果都轉址到第一個網址,會造成無窮迴圈)

取得accessToken

第三個網址:

為了讓Qt取得accessToken我們必須要在網址上面動手腳,

也就是帶accessToken在網址上,因此第二網址再轉址到第三網址


以上為說明
-----------------------------------------------------------------------------------------------------------------------

1.test1.html

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login</title>
<meta charset="UTF-8">
</head>
<body>
<p>測試文字</p>
<script>

var url2 = 'https://www.facebook.com/dialog/oauth?client_id=你的App ID&scope=email,user_birthday&redirect_uri=第二網址';
setTimeout("location.href=url2",1);//轉址目的地,自動轉址秒數
console.log('test2');

</script>
<div id="status">
</div>

</body>
</html>

2.test2.html

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<p>123</p>
<script>

<!--開頭initial-->
var url;


  window.fbAsyncInit = function() {
    // init the FB JS SDK
  FB.init({
    appId      : '你的ID',
    cookie     : true,  // enable cookies to allow the server to access
                        // the session
    xfbml      : true,  // parse social plugins on this page
    version    : 'v2.2' // use version 2.2
  });


  FB.login(function(response) {
  console.log('in FB.login');
    if (response.authResponse) {
     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.');
    }
});

  // This is called with the results from from FB.getLoginStatus().
  function statusChangeCallback(response) {
    console.log('in function: statusChangeCallback');
    console.log(response);
    // The response object is returned with a status field that lets the
    // app know the current login status of the person.
    // Full docs on the response object can be found in the documentation
    // for FB.getLoginStatus().
    if (response.status === 'connected') {
      // Logged into your app and Facebook.
 var uid = response.authResponse.userID;
      var accessToken = response.authResponse.accessToken;
 console.log(accessToken);
 //alert(accessToken);

testAPI(response);
 //document.write(accessToken);
 //testAPI(response);
 document.getElementById('status').innerHTML = 'Entry success';
    } else if (response.status === 'not_authorized') {
      // The person is logged into Facebook, but not your app.
 FB.login();
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this app.';
    } else {
      // The person is not logged into Facebook, so we're not sure if
      // they are logged into this app or not.
 console.log('in unknown');
      document.getElementById('status').innerHTML = 'facebook login failed';
    }
  }

  // This function is called when someone finishes with the Login
  // Button.  See the onlogin handler attached to it in the sample
  // code below.
  function checkLoginState() {
    console.log('in checkLoginState');
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
  }

  FB.getLoginStatus(function(response) {
    console.log('in getLoginStatus');
    statusChangeCallback(response);
  });

  };



  // 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'));

  // Here we run a very simple test of the Graph API after login is
  // successful.  See statusChangeCallback() for when this call is made.

  function testAPI(response) {
  /*
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
    });
*/

var accessToken = response.authResponse.accessToken;
  url = "第三個網址(轉址的)?" + accessToken;
setTimeout("location.href=url",1);
  }

window["checkLoginState()"];
console.log('get login');
</script>



<!--
<script src="http://connect.facebook.net/zh_TW/all.js"></script>
  Below we include the Login Button social plugin. This button uses
  the JavaScript SDK to present a graphical Login button that triggers
  the FB.login() function when clicked.
-->

<!--
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
-->
<div id="status">
</div>

</body>
</html>

3.test3.html

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login</title>
<meta charset="UTF-8">
</head>
<body>
<p>test3</p>
<script>
 //URL
    var url = location.href;
   
    //取得問號之後的值
    var temp = url.split("?");

    //將值再度分開
    var vars = temp[1].split("&");

    //一一顯示出來
    for (var i = 0; i < vars.length; i++) {
     alert(vars[i]);
    };

 

</script>
<div id="status">
</div>

</body>
</html>


可以看到test.html是轉址透過

https://www.facebook.com/dialog/oauth?

+

client_id=你申請的App ID(數字)

+

&scope=email,user_birthday(你要的權限有多少)

+

&redirect_uri=轉址一號站


第二部分則是

facebook SDK

:

// 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'));





大概內容就是三種情況

1.connected : 已經連線,成功登入(取得accessToken)

2.unauthorized: 已經登入,但是沒有允許權限開啟(呼叫login() )

3.unknown:尚未登入(呼叫login() )

如果輸入都正確就會取得accessToken,但這時候要仍然是在網頁上面要怎樣讓Qt去取得呢?

在Qt的QWebView裡面有一個Signal--urlchanged(),這意思是甚麼呢?就是當網址有所變動時(轉

址)會發送信號,因此我們就可以透過這個signal去取得轉址後的網址(當然是有帶accessToken)

如此,就達成目的了!

*******************************************************************************

照這方法做一定會遇到無法轉址的問題

"無法xxxxx,畫布...."之類的錯誤訊息







要把你要轉址的網址(可以超過一個)放在valid OAuth redirect URL這一欄裡面,這樣才能夠正常

運作!

the END

2015年12月1日 星期二

[Qt] Unicode / UTF8 / Big5 轉碼 QTextCodec 各種轉換相關

在寫Qt時候遇到問題實在搞太久了,把他記錄起來以免忘記!

1.不同system的locale會不同(中文windows vs 英文windows),因此搭配

QTextCodec::setCodecForLocale會有所不同,toLocal8bit()亦同

2.Latin1 其實就是ISO 8859-1

3.toLocal8bit()會因為locale而有所不同:

QTextCodec::setCodecForLocale(QTextCodec::codecForName("UTF-8"));

通常會有所不同,但如果是填utf8的話就跟.toUtf8()是一樣的功能囉!

4.QString內部就是Unicode編碼(最大相容於各系統),因此如果要從QString取出東西,通常都會使

用fromUnicode()

--------------------------------------------------------------------------------------------------------------------------

使用QString -->UTF8 則使用toUtf8()即可

使用QString -->Big5 (中文系統) 使用toLocal8bit()即可

使用QString -->Big5(英文系統)   ???? 翻遍網路都沒有找到,這個問題搞了兩天,終於....

使用系統: Windows POS Ready 2009 English version 2 SP3

使用語言: Qt(類C)

首先,必須要了解的是一個中文 =  兩組碼 ,一個英文 = 一組碼,如果要中英混合的話呢?

這邊我利用toUtf8()來分析length判斷目前字元是中文還是英文

(先用QString的mid()切割每一個字元)

中文的解決方法比較麻煩,英文則相較簡單。

  //英文or符號
 QString str2 = str_Trans.mid(i,1);
 QByteArray byte_array = str2.toLatin1();

 unsigned char command_english[str2.length()];
 memcpy(command_english,byte_array,str2.length());

透過toLatin1()就可以把QString轉為QByteArray,再用memcpy copy進去就可以囉!


中文:

 QTextCodec *codec = QTextCodec::codecForName("Big5");
 QByteArray b_array = codec->fromUnicode(str_Trans);

 unsigned char command_chinese[4];
 memcpy(command_chinese,b_array,4);

 for(int i = 0 ; i< sizeof(b_array); i++)
{
     int tmp = (int)command_chinese[i];
     qDebug()<<tmp;
}

透過codec的fromUnicode來轉碼,轉完就變成QByteArray,一樣透過memcpy copy

這邊如果run到沒有安裝Qt的系統(或電腦)一下就會Crash,why ??

一開始上網查,結果查到都是qcncodec4.dll (這是給簡體字的GBK,GB....),繁體必須用

qtwcodec4.dll,放進去創建的Plugins/Codecs裡面,結果!!還是Crash!!

後來把lib檔(.a)跟dll檔(.dll)整個資料夾都Copy進去以後就可以了~



















至於要放在哪邊呢? 放在你的.exe檔同一個資料夾即可


*********************************************************************************

不要再相信網路上加上

QTextCodec::setCodecForCStrings(QTextCodec::codecForName("UTF-8"));
QTextCodec::setCodecForLocale(QTextCodec::codecForName("UTF-8"));
QTextCodec::setCodecForTr(QTextCodec::codecForName("UTF-8"));

類似這種(UTF-8換GBK,GB2312之類的)

就可以跑這種奇怪的解法,好好去了解這些編碼才是實際。

Unicode可以容納最多編碼方式

UTF-8則是unicode的一種表現方式

Latin1是歐美編碼

Big5是繁中

簡體則有許多GBK,GB2312...之類的

CSDN上這篇 也解釋得不錯,可以參考看看

希望下一個遇到Unicode to Big5的人可以順利解決