[隨手小記一下] 在Android 上開發Facebook 登入

Phoebe Huang
13 min readSep 12, 2021

--

相信大家在成為頂尖工程師之路上都會遇到客戶要求需要在應用程式上製作Facebook登入、Instagram 登入、取得社交媒體數據,隨著Facebook 不斷擴張,甚至成為第一大社交媒體,早在2012年就併購了Instagram,這對使用者來說是件好事(??)Instagram 在早期就曾有過使用者使用條款的爭議,而 Facebook 近年致力於保護使用者資料,API也是時常在做更新

但是…….這可苦了我們軟體工程師 QQQ,若要使用Instagram API 就需要先從Facebook 登入下手, 登入開發完成後,若是需要取得較高權限的資料則需要事先向Facebook 提出應用程式審核(即便在開發階段也是),也因此如果有Facebook 和Instagram 開發的需求的話,大家要有較長的開發前置作業準備

那我們就開始這篇文章的主題,這篇文章會完成申請及設定Facebook 開發者帳號並建立一個應用程式,讓我們能夠在Android APP 實作登入並取得使用者登入的Facebook 帳號的Email,因為大部分都是在設定開發者帳號以及設定應用程式,圖片會稍微多一點,請大家見諒

[建立開發人員帳號]

首先進入到 Facebook Developer ,點擊右上角登入

登入您的 Facebook 帳號,若沒有或是您想使用另一個Facebook帳號來作為開發人員帳號就新建立一個,在登入開發者帳號的同時會需要填寫一些資料,例如您開發的角色、目的等等,就選最符合您的選項:

[建立應用程式]

接著點擊右上角的我的應用程式,我們要先在帳戶內建立一個應用程式待會再APP中才能與此做連結:

點選建立應用程式:

接下來選擇您的應用程式類型,如果只是單純要建立Facebook 登入以及提供給 IG 的一般使用者使用的話,選擇消費者即可
因為我接下來的開發會是需要使用到 IG 圖形 API 來做商家數據讀取分析,所以選擇 企業商家 類型的應用程式:

填寫應用程式基本資料,名稱及聯絡方式:

接著到應用程式設定頁面的基本資料完成所有資料的填寫:

應用程式網域、隱私政策網址、服務條款網址可以都填寫同一個,只要能夠是讓你的應用程式使用者前往的網站即可,可能是你公司的網站或是你自己私人架設的網站都可以

[完成個人驗證]

接著滑到下方有一個比較麻煩的審核,Facebook為了要確定我們不是機器人開發人員,因此最基本的驗證一定要通過個人驗證,不過這個驗證也沒有想像中困難,需要準備的是身分證的正反面,我實際執行過上傳身分證正反面照片,過不到一天就可以通過個人驗證了!!!加油!!!

[新增 Facebook 登入商品]

接著我們點選左方導覽列-新增商品,加入Facebook 登入:

Facebook 這邊設計的蠻友善的,針對各種不同的登入平台均有提供詳細流程來輔助各位開發者,但還是有些比較容易誤會的地方我稍微提一下~首先選擇Android

選擇 Android 平台

再來第一步是下載Facebook Android SDK ,這步驟如果你是使用Maven或是Gradle來做函式庫的同步就可以不用下載,直接到第二步在Maven或Gradle 加入Facebook 函式庫

第二步我們打開要加入Facebook 登入的Android 專案,在app 模組層的build.gradle 的dependencies 加入:

implementation 'com.facebook.android:facebook-android-sdk:[8,9)'

另外在專案的build.gradle 加入

repositories {
.....

mavenCentral()
}

在MainActivity 匯入函式庫:

import com.facebook.FacebookSdk;
import com.facebook.appevents.AppEventsLogger;

接著第三步讓Facebook SDK 知道如何與我們的APP 連結,因此需要填寫我們的Package Name 以及 預設的開啟Activity

[新增開發金鑰雜湊]

第四步也是比較麻煩的地方,因為目前還在開發階段,我比較建議的是直接使用下方程式碼來確認我們APP專案的開發金鑰雜湊,這樣是最不會出錯的!!!

將下列程式碼加入到MainActivity ,並在 OnCreate呼叫執行:

private void checkKey() {
try {
PackageInfo info = getPackageManager().getPackageInfo(
"your package name", //Insert your own package name.
PackageManager.GET_SIGNATURES);
for (Signature signature : info.signatures) {
MessageDigest md = MessageDigest.getInstance("SHA");
md.update(signature.toByteArray());
Log.d("KeyHash:", Base64.encodeToString(md.digest(), Base64.DEFAULT));
}
} catch (PackageManager.NameNotFoundException ignored) {

} catch (NoSuchAlgorithmException ignored) {

}
}

在 logcat 會看到 keyhash ,後面的字串就是我們的開發金鑰雜湊

將其貼上下方密鑰雜湊欄位中:

接下來的步驟都很單純了!到第五步將 單一登入 啟用

程式碼部分我們待會權限設定完後再實作,這樣就能夠直接測試了!!

[取得權限與功能]

若想要使用 Facebook api 需要設定蠻多權限,並且大部分都需要提交應用程式審核的,而Facebook 登入是最基本官方要求的功能實作,因此我們可以不需要提交審核就能夠取得使用者部分基本資料,例如 email、大頭照…

現在到應用程式審查 > 權限與功能 ,搜尋 public_profile、email並取得這兩項的進階存取權,雖然說是基本資料,不過要存取還是要來設定,我也不是很清楚為什麼要這樣子??

現在打開專案 APP 在 onCreate 加入:

FacebookSdk.sdkInitialize(getApplicationContext());
AppEventsLogger.activateApp(this);

callbackManager = CallbackManager.Factory.create();

LoginManager.getInstance().registerCallback(callbackManager,
new FacebookCallback<LoginResult>() {
@Override
public void onSuccess(LoginResult loginResult) {
// App code

Log.d(TAG, "Check Result Token : " + loginResult.getAccessToken().getToken());
Log.d(TAG, "Check Result User Id : " + loginResult.getAccessToken().getUserId());
Log.d(TAG, "Check Result Application Id : " + loginResult.getAccessToken().getApplicationId());

Log.d(TAG, "Check Result Permission : " + loginResult.getAccessToken().getPermissions().toString());
for(String str : loginResult.getAccessToken().getPermissions()) {
Log.d(TAG, "Check Result Permission : " + str);
}
}

@Override
public void onCancel() {
// App code
}

@Override
public void onError(FacebookException exception) {
// App code
}
});

loginButton = (LoginButton) findViewById(R.id.login_button);
loginButton.setReadPermissions(Arrays.asList("email", "public_profile"));
// If using in a fragment
// loginButton.setFragment(this);

重寫 MainActivity 的 onActivityResult,以便將登入結果傳至LoginManager

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

在 MainActivity 的 layout 加入 Facebook 客製化按鈕:

<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"
android:layout_marginTop="30dp"
android:layout_marginBottom="30dp" />

/app/res/values/strings.xml 加入:

<string name="facebook_app_id">your_application_id</string> 
<string name="fb_login_protocol_scheme">fb242735211193392</string>

/app/manifest/AndroidManifest.xml 加入:

<uses-permission android:name="android.permission.INTERNET"/>

application 標籤底下新增meta-data, Facebook 相關的 activity:

<meta-data 
android:name="com.facebook.sdk.ApplicationId"
android:value="@string/facebook_app_id"/>
<activity
android:name="com.facebook.FacebookActivity"
android:configChanges=
"keyboard|keyboardHidden|screenLayout|screenSize|orientation"
android:label="@string/app_name" />
<activity
android:name="com.facebook.CustomTabActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="@string/fb_login_protocol_scheme" />
</intent-filter>
</activity>

最後執行專案應該會看到APP正中間有一個熟悉的Facebook登入按鈕,按下去進到同意權限會到APP之後,可以看到 Log 印出登入的 token,就可以拿著token 繼續開發拉!!!

順帶一提Facebook 的 token 有分長期和短期,可以用短期token 去換取長期token 避免使用者一直被登出造成使用經驗不佳,詳細設定可以到 這個連結去看看

因為最近Facebook 政策又改變了,如果到應用程式主控台看到這條藍藍的需要填寫資料使用情形,就完成他,裡面只有兩項簡單的問題~~

喜歡我的文章的人也記得幫我按個拍手、分享,覺得很不錯的可以幫我拍個50下!
也要快點追蹤我的 FB粉絲專頁 — 飛比尋常的程式設計世界 ,不會太頻繁出現在你的塗鴉牆騷擾你,好文章生產需要一點時間,有錯誤或想討論的都歡迎留言給我唷!那就下次見拉!

--

--

Phoebe Huang
Phoebe Huang

Written by Phoebe Huang

A software engineer from Taiwan, use free time to learn more about computer science.

No responses yet