顯示具有 Android Studio & Facebook SDK 標籤的文章。 顯示所有文章
顯示具有 Android Studio & Facebook SDK 標籤的文章。 顯示所有文章

2018年4月27日 星期五

20180502 Facebook 的登入與基本權限

I 前置作業(Android Studio 設定 + Facebook SDK)

1.使用 Maven 來下載設定相關函式庫

build.gradle(專案)
程式碼:
repositories {
       jcenter()
}

build.gradle(app) 
程式碼:
implementation 'com.facebook.android:facebook-login:[4,5)' 

如下圖所示:

2.設定應用程式,以便得到應用程式編號並設定在 string.xml 

如下圖所示:

3.將應用程式與您的套件名稱和預設類別建立連結並填入每台電腦的開發金鑰

至 Facebook 開發者網站,選取已經建立好的應用程式,如還沒建立可先行建立一個
如下圖所示:
至文件開啟新手指南 Android SDK
如下圖所示:
找到快速入門點擊進入。
如下圖所示:
尋找已經建立好的專案,點擊並進入。
如下圖所示:
輸入「包裝名稱」與「預設活動類別名稱」,可至 Android Studio 查看。
如下圖所示:
至 Android Studio 內的 java 檔查看「包裝名稱」與「預設活動類別名稱」。
如下圖所示:
按下「下一步」後,會出現以下對話框,提示驗證發生問題,請暫時忽略,請直接選取「使用此封裝名稱」,原因為在建立專案時,使用com.example...的關係。
如下圖所示:
輸入金鑰雜湊,如是 Windows 作業系統,請至命令提示字元取得金鑰。
如下圖所示:
於命令提示字元輸入以下程式碼
程式碼:
keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64
如下圖所示:
此時會要求輸入金鑰儲存庫密碼,請返回至 Android Studio 取得。
如下圖所示:
依照以下指示取得金鑰儲存庫密碼。
如下圖所示:
輸入金鑰儲存庫密碼後,按下 Enter ,會出現金鑰雜湊,請複製。
如下圖所示:
返回至 Facebook 開發者網頁的快速入門,將金鑰雜湊填入後,點擊下一步,即可順利將 Facebook SDK 新增到專案。
如下圖所示:

II 新增登入按鈕

1.AndroidManifest.xml 檔案-在application 元素後方加入

uses-permission 元素
如下圖所示:
facebook 應用程式編號
使用 facebook 程式
chrome 頁籤(TAB) 
等活動(activity)與篩選器(filter)
如下圖所示:

2.在 layout 檔中擺放登入按鈕

程式碼:
<com.facebook.login.widget.LoginButton 
 android:id="@+id/login_button"         android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_gravity="center_horizontal" 
/> 
如下圖所示:

3.在 MainActivity.java 或是任何 activity 完成以下程式

先設定好要使用的欄位
程式碼:
LoginButton loginButton;
CallbackManager callbackManager;
// FB 要用的常見欄位

在 OnCreate 中進行初始化
程式碼:
callbackManager = CallbackManager.Factory.create();
loginButton = (LoginButton) findViewById(R.id.login_button);
loginButton.setReadPermissions("email"); 

如下圖所示:
按下登入按鈕 loginButton 時必須考慮登入的結果:成功或失敗(或是無法預期的錯誤..),所以要註冊回呼(callback)的機制(一般來說也是在 onCreate 時進行) 由於相關程式可能很長,所以寫在registerFacebook()方法 
如下圖所示:
建立onActivityResult 方法來呼叫回呼結果(CODE-Override Method) 

所有與FB 有關的activity 應該都要透過callbackManager 來紀錄回呼權限,所以都要上述onActivityResult 的方法 

如下圖所示:

4.在專案中檢查是否登入成功或是目前登入狀態

一旦登入成功,FB應用程式會透過上圖的『LoginResult loginResult』註冊一個SharedPreference,loginResult 裡會有註冊的狀態和新增或取消的相關權限

5.客製化登入按鈕(補充)

如果要客製化登入按鈕,就使用普通的 Button 或是 ImageButton 等。
如下圖所示:
有些權限只需要讀取,如
Arrays.asList("public_profile") // 公開的個人檔案 Arrays.asList("user_status") // 使用者狀態 
Arrays.asList("email ") // 使用者email 通常也是帳號呼叫方式
LoginManager.getInstance().logInWithReadPermissions(Activity 的名稱.this, Arrays.asList("email"));

有些需要寫入或是 publish 
LoginManager.getInstance().logInWithPublishPermissions(fragmentOrActivity, Arrays.asList("publish_actions"));

取得目前同意的所有權限
AccessToken.getCurrentAccessToken().getPermissions(); 
取得目前拒絕的所有權限
AccessToken.getCurrentAccessToken().getDeclinedPermissions();

如下圖所示:

6.建立測試人員

此時返回至 Facebook 開發人員網頁,並前往應用程式專案頁面。注意!你需要 fbid 或 username。
如下圖所示:

7.結果





2018年4月13日 星期五

20180418 Android Studio & Facebook SDK

一、建立一個專案然後使用Facebook SDK

1.前往 Android Studio | 新增專案(New Project) | 最低 SDK (Minimum SDK)

※開啟「Android Studio」,並於右下角「設定按鈕」選取「SDK Manager」。
 ※確定SDK的版本為所需的最低版本,設定好後按下「OK」。

2.選擇 API 15: Android 4.0.3 或更新版本,然後建立新專案。

※新增一個Android Studio專案
※設定好後,按下「Next」。
※設定API 15: Android 4.0.3 或更新版本,按下「Next」。
※選取簡單的「Empty Activity」,按下「Next」。
※確認好名稱後,按下「Finish」。


3.建立完專案後,進行 Facebook SDK 設定。



※將「Android」結構的視角切換到「Project」。
※切換至「Project」之後,開啟「build.gradle」檔案,其目錄為「A4216108_FB」=>「app」=>「build.gradle」。
※於「dependencies」程式碼前方加入以下程式碼
repositories{
    mavenCentral()
}
※在「dependencies」加入 Facebook SDK 最新版本的編譯相依性。注意 sdk:[4,5 表示目前 Facebook 的開發套件版本!這一部份以後會隨時更新。請於「dependencies」程式碼內加入以下程式碼
implementation 'com.facebook.android:facebook-android-sdk:[4,5)'
※完成以上步驟,Android Studio 上方會出現 SYNC NOW 的同步按鈕,請按下它存檔。
※接下來將「Project」結構的視角切換到「Android」。
※開啟MainActivity.java檔,並在開頭處匯入以下程式碼。
import com.facebook.FacebookSdk;
※將全部檔案存檔。
※建置專案。


二、申請 Facebook 應用程式編號

至以下網址申請應用程式編號:
https://developers.facebook.com/quickstarts/?platform=android


※如第一次使用,則會出現以下畫面,點擊註冊(可先行登入Facebook方便流程操作)。
※看到以下畫面,點擊下一步
※如沒有預設的 Facebook 手機號碼,請設定並驗證。
※在命名「應用程式名稱」時,請不要輸入與 Facebook 公司所有相關的命名,否則無法進行下一步。
※筆者因為按了下一步按鈕,網頁一直沒有回應,因而重新整理網頁。看到以下畫面後,點擊「建立應用程式」。提醒如果網頁沒有載入以下頁面,可以打上以下的網址,進入至此頁面。
※在命名「應用程式名稱」時,請不要輸入與 Facebook 公司所有相關的命名,否則無法進行下一步。設定好後按下「建立應用程式編號」。
※此時會看到安全驗證對話框,輸入驗證碼,並送出。
※進入至以下「開發者主控台」頁面,網頁上方會顯示「應用程式編號」,同時網址後方的號碼也是「應用程式編號」。如果進入「快速入門」頁面,可輸入以下網址:
https://developers.facebook.com/apps
點擊存在的專案,方可查看專案的「應用程式編號」。


三、回到 Android Studio,加入 Facebook 應用程式編號

將剛剛申請好的FB APP ID 加入到專案,將新增的權限加入(或更新)Manifect檔案。


※開啟「strings.xml」檔案,加入一個新字串,名稱是 facebook_app_id,值為剛才 Facebook 建立的「應用程式編號」。
※開啟「AndroidManifest.xml」檔案。
※新增網路權限:要用 Facebook 當然需要網路功能。請新增以下程式碼。
※在標籤<application>中新增 meta-data標籤。
※[option]如果你要發送圖片或是影片或分享,還必須宣告 FacebookContentProvider 將應用程式編號附加到 authorities 值的結尾。
例如:如果你的 Facebook 應用程式編號為 1234,則宣告的格式如下:
<provider android:authorities="com.facebook.app.FacebookContentProvider1234"
            android:name="com.facebook.FacebookContentProvider"

            android:exported="true"/>

四、回到 Facebook 開發者快速入門頁面,繼續完成 SDK 設定


※選取選單列的「文件」,點擊「新手指南 - Android SDK」
※找到「Android 快速入門」按鈕,點擊進入頁面。
※選擇現有應用程式,或輸入新應用程式的名稱。這裡選擇剛才已經建立好的專案。
※將頁面移至最下方,會看到「Tell us about your Android project」,請填入 Android Studio 內的「包裝名稱」與「預設活動類別名稱」,並且按下「下一步」。
※Android Studio 內的「包裝名稱」與「預設活動類別名稱」,位置如下圖。
※按下「下一步」後,會出現以下對話框,提示驗證發生問題,請暫時忽略,請直接選取「使用此封裝名稱」,原因為在建立專案時,使用com.example...的關係。
※點取「Show how to generate a release key hash」。
※當我們要上架這個 APP,需要讓 Android 進行驗證,這時候需要開發環境的開發金鑰,這時就必須找到金鑰來完成接下來的步驟。如果電腦為 Windows 作業系統,請將「Windows 的指令碼」的指令碼複製。
官方指令碼如下:
keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore YOUR_RELEASE_KEY_PATH | openssl sha1 -binary | openssl base64
Windows 的指令碼如下:
keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64
※將剛才複製的「Windows 的指令碼」貼至「命令提示字元」內。提醒如果安裝 Android Studio 都是使用預設路徑,則以下程式碼可執行。
※此時會顯現提示「輸入金鑰儲存密碼」,請回到 Android Studio 查看密碼。
※在 Android Studio 中的右方點選「Gradle」選項。
※在「Gradle」目錄中找到名為「signingReport」的檔案,點取開啟。
※此時於 Android Studio 右下角處點選「Gradle Console」。
※在右方目錄的左上方點選重新整理所有的Gradle projects。
※在下方「Gradle Console」的對話框內找到對應的 Key SHA1(android 用),並且複製密碼。
※回到命令提示視窗,將密碼貼上,按下「Enter」。
※將會出現一連串金鑰,此金鑰為 hashes key(FB 用),複製此金鑰。
※將金鑰貼入下方欄位中,進入下一步。注意!每一台電腦都不一樣,所以必須找出當下使用的電腦的Key SHA1(Android 用)和 hashes(FB 用)。
※完成頁面如下。