Android-使用Firebase Auth UI實現Facebook登入

Vincent Zheng

Published in

新手工程師的程式教室

7 min readMar 3, 2019

透過FB帳號在App註冊是常見的功能。Facebook提供的函式庫，可以取得使用者的個人檔案、朋友名單等資料，但相關程式過於複雜。若純粹只想實現註冊、登入的功能，那麼本文介紹的Firebase Auth UI是個好選擇。

一、建立Facebook應用程式專案

首先前往FB的開發者工具首頁，建立一個應用程式專案
https://developers.facebook.com/

自行取一個應用程式名稱後，按下「建立應用程式編號」即可。完成後，在「選擇情境」的畫面點選「整合Facebook登入」，再按確認，這樣就能開通登入的功能。

開發者工具的更多功能可以前往該頁畫面左邊的產品頁面查看。

二、在Firebase啟用第三方登入

準備一個Firebase專案，並前往Authentication畫面的「登入方式」頁籤。這邊有Firebase所支援的第三方登入管道，我們先啟用Facebook。

這裡還有三個欄位，關於前兩個，請回到Facebook開發者工具。在「設定→基本資料」畫面，可以找到自己的「應用程式編號」與「應用程式密鑰」。將它們填入Firebase中對應的欄位。

再往下還有一個「OAuth重新導向URI」欄位，先複製起來再按儲存。接著回到開發者工具，從畫面左邊前往「Facebook登入→設定」。在「用戶端OAuth設定」的區塊，填入剛剛的URI，並儲存。

完成前面兩節的步驟，已經將Firebase與Facebook連結在一起了，有點像交換信物的感覺。之後加進Firebase專案的應用程式，都能享有後台處理FB登入的服務。

三、在Facebook加入Android平台應用程式

請準備一個要實作FB登入的Android App程式專案。

回到開發者工具，在「設定→基本資料」畫面，最下方有個「新增平台」按鈕，請選擇Android。接著會出現新的區塊，需要填寫一些資料。

Google Play套件名稱：Android程式專案的套件名稱，也就是AndroidManifest.xml中的package屬性，例如com.vincent.firebasedemo
級別名稱：Android App中會被導向登入畫面的Activity之套件名稱，例如com.vincent.firebasedemo.MainActivity

第三個欄位是金鑰雜湊，請到https://sourceforge.net/projects/openssl/下載OpenSSL工具，它可以用來產生金鑰雜湊。

解壓縮後，開啟命令提示字元或終端機，進入裡面的bin資料夾，執行指令。

※ Windows用戶
keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64※ Mac用戶
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

接著隨意輸入密碼，會得到一串文字，結尾是等於符號。

將它填入開發者工具的金鑰雜湊欄位中，最後按下儲存變更。

四、準備函式庫與資源

開啟在上一節準備的Android App程式專案，將它加入到Firebase專案中。之後在Gradle檔匯入需要的函式庫，筆者所使用的如下：

// Firebase核心
implementation 'com.google.firebase:firebase-core:16.0.6'// Firebase Authentication (帳號驗證模組)
implementation 'com.google.firebase:firebase-auth:16.1.0'// Firebase Auth UI (第三方登入畫面模組)
implementation 'com.firebaseui:firebase-ui-auth:4.2.1'// Facebook軟體開發套件
implementation 'com.facebook.android:facebook-android-sdk:4.40.0'

在字串資源檔（strings.xml）添加兩項應用程式編號：

<!--供Firebase第三方登入畫面模組使用-->
<string name="facebook_application_id">2291570764422514</string><!--供Facebook登入模組使用-->
<string name="facebook_app_id">2291570764422514</string>

在AndroidManifest.xml中，宣告網路存取權限與Facebook的metadata：

<uses-permission android:name="android.permission.INTERNET" /><application ...>    <meta-data
        android:name="com.facebook.sdk.ApplicationId"
        android:value="@string/facebook_app_id"
        tools:replace="android:value"/>

      <activity ...>
          ...
      </activity></application>