Android:Facebook Login API (v2.0)

08 January 2012

(此篇為舊版的2.0 SDK,不建議使用了!請看這篇使用最新的3.0 SDK)


前面有介紹過怎麼在網站上,導入Facebook Login
這篇要介紹如何在Android 裝置上,實作Facebook Login!!

第一步】
首先先來到FB Developer後台,並點選Create New App(右上角),

【第二步】
下載Facebook SDK

【第三步】
這步驟主要是在你的project中,include Facebook的lib,這裡大概分兩種方式,
第一種,就是在你已經create好的project上,點右鍵→點properties→選擇Android,
然後最下方有一個Library,然後就可以點選add,再去第二步驟下載的Facebook SDK中找到lib即可。
第二種就是在第二步驟下載的SDK中,
找到  SDK\\facebook\src,
底下應該有一個com資料夾,把資料夾拉進去你的project即可,
(我比較喜歡第二種)
第二種的,你拉進去以後,會看到下面的畫面!(圖一)






【第四步】
先去下載OpenSSL,因為待會會用到它來encode hash key,
下載以後解壓縮出來。

【第五步】
記得之前有教過大家,怎麼用keytool產生key吧?(在教學map的時候有講到)
這裡一樣得利用keytool工具,
大家先打開cmd,
並且切換目錄至你的java sdk資料夾底下的bin!!! (是java sdk唷)
底下就會有一個keytool.exe


【第六步】
先看到下面的指令範例以及說明,

指令範例:
keytool -exportcert -alias your_key_alias -keystore path_of_keystore | path_of_OpenSSL sha1 -binary |  path_of_OpenSSL  base64

指令說明:
your_key_alias :是你key的alias
path_of_keystore :是你keystore的位置,如果這裡你是用.android底下預設的debug.keystore,那如果你Export Sign一個Android App時,是用另一把keystore,到時候如果上傳至market,你的FB登入可能就不能使用,所以必須用同一把,以Android App為主。
(但是!!!! 如果你是在本機開發測試,尚未上傳至market之前,大部分人應該都是直接點選eclipse上的綠色箭頭,然後部屬到Android裝置上吧? 如果是這樣,你的key,還是得用.android底下的預設keystore,因為按下Eclipse上的綠色箭頭,就是用預設的keystore打包的!!! 也就是說你得有兩把keysotre,一把是測試用,一把是正式上線用)
path_of_OpenSSL :剛剛下載的OpenSSL位置


真實指令(這是我的喔,你複製貼上是沒用的,要改成自己的)
keytool -exportcert -alias helloKen -keystore E:\myProject\M@C\key.keystore | C:\openssl-0.9.8h-1-bin\bin\openssl sha1 -binary | C:\openssl-0.9.8h-1-bin\bin\openssl base64

完成上面以後,你應該會得到2個key,一個是測試用,一個是正式上線時用的!




【第七步】
去Facebook Developer後台,輸入上面的2把key,
如下圖中的紅色框框,請於Native Android App中填入喔(圖二)




【第八步】
開始寫程式了!!
首先必須加入一個permission,
如下
<uses-permission android:name="android.permission.INTERNET"/>

接著宣告一個Facebook的物件!
且必須是global的喔!
如下:
Facebook facebook = new Facebook("YOUR_APP_ID");


下面就是登入的code,看你要寫在哪,例如:按下按鈕去登入(btn.setOnClickListener),或者一進畫面就登入(onCreate)
facebook.authorize(this, new DialogListener() {  
@Override
public void onComplete(Bundle values) {} //登入成功會返回至此method

@Override
public void onFacebookError(FacebookError error) {}

@Override
public void onError(DialogError e) {}

@Override
public void onCancel() {}
});





最後還有一個步驟!因為上面的code會去trigger一個視窗出來,也就是換畫面,
執行完,還會再返回,所以在原本的Actitivy中的onActivityResult中,必須加入下段code,

@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);

facebook.authorizeCallback(requestCode, resultCode, data);
}





這樣就完成了一個在Android上實作Facebook Login!

















read more »


Android EditText remove focus

06 January 2012

只要頁面中有用到EditText 的,
只要跑到那個頁面,一定會被自動focus,也就是說鍵盤會自動彈開!
要取消focus,只要在你layout中的root element加上下面兩個屬性,
(root element就是最外圍的那個element,預設都是LinearLayout)


android:focusable="true"
android:focusableInTouchMode="true"





read more »


實作Facebook Login 【新版】

05 January 2012

今天發現前陣子有使用到Facebook登入的案子,
突然掛了! 不能使用Facebook登入了....
去查了一下,原來Facebook API改版....
老實說,我覺得這樣機制很差....應該也保留舊有機制,而不是連通知都沒有就改版了!

Ok, fine! 其實也沒有太大差別!
主要是改一些參數名稱!
至於前面的註冊手續都相同! 可以來前一篇看!


至於coding實作如下,
一樣得嵌入js檔,
<script src="http://connect.facebook.net/en_US/all.js"></script>

接著一樣要init,但是多了一個參數,就是oauth,以及從以前的response.session改成response.authResponse
<script>
//先做init的動作,輸入自己的app id
FB.init({
appId:'你自己的app id',
cookie:true,
status:true,
xfbml:true,
oauth : true // 多了這個參數
});




//下面是實作一個登入的function
function fnLoginFb(){
FB.login(function(response) {
//先判斷是否已經登入了,如果是,就直接
if (response.authResponse){
FB.api('/me', function(response) {
alert(response.email);
});
//下面是沒有登入時才會做的,會去subscribe一個event,就是去監聽一個login event(也就是說login成功以後,會接收到訊息)
}else{
FB.Event.subscribe('auth.login', function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
alert(response.email);
});
}
});
}

}, {scope:'email'});

}



</script>

然後下面就是實作FB登入的按鈕了!






read more »