關二哥的資工開物: Android與FireBase(四)FB登入功能實作

在完成Email登入後
發現註冊並沒有經過審核！（即用戶使用非法email也可以註冊登入）
當然我們可以自己寫個驗證信功能

但那太複雜了，而且需要在後端實現，使用者體驗也會降低

當今各大社群ˋ影音等多媒體網站，
早就改榜定TwitterˋFBˋgoogle帳號
用戶只需要"一鍵"就能搞定註冊 / 登入

而且使用各Provider的帳戶授權
安全性、資訊、便利性都大大提高
省去自己維護紀錄，開發又快速，何樂而不為~

以下我們將完成三大部份：
FB授權、FireBase授權、主程式撰寫

FB開發者請求連結

1.前往FB開發者的網站（需要用個人FB登入）

1.1　建立應用程式：
　　- 輸入你想連的App名稱
　- 網站會自動連結你FB的信箱填入

1.2　跳過不須安裝

1.3　連結 Facebook SDK　
　　- SDK選擇"Maven"(Maven功能不多做解釋，有興趣可另行搜尋)
- 在專案的build.gradle檔案，加入repositories {mavenCentral()}
- 在dependencies{}加入compile 'com.facebook.android:facebook-login:[4,5)'

1.4　編輯您的 Manifest
　　- 在app/src/main/res/values/strings.xml內，加入facebook_app_id跟scheme

　　- 在Manifest.xml內，加入<uses-permission android:name="android.permission.INTERNET"/>
　　給予連線網路能力
　　- 在 application標籤下，加入meta-data 跟FB的activity(必須加在MainActivity前！！！)

1.5　將應用程式與您的套件名稱和預設類別建立連結
　　-套件名稱，參考其格式，可以在Manifest的package找到
　　-activity同理，套件後加上MainActivity

1.6　提供您應用程式的「開發金鑰雜湊」和「發行金鑰雜湊」
　　-在Andriod Studio內找到Terminal終端機視窗
　　-輸入　keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -　binary | openssl base64　

　　　便會產生一串金鑰，複製貼上於網頁中即可。
　　（如果出現問題，根據系統建議，安裝缺少的套件工具，再試一次即可）

1.7　可跳過

1.8　新增「Facebook 登入」按鈕
　　-在main_layout.xml的UI檔案內，找個地方加入LoginButton元件（FB提供的登入按鈕）

至此我們可以歸納，以個人權限，告訴FB說我們想要一個App程式，需要登入
然後在App專案內，連結了SDK套件，設定了FB給的App Id，也告訴FB我們的key，
最後新增按鈕。

接著要在FireBase內開啟FB登入功能，並輸入登入功能的code！

FireBase授權連結

1.先在FB開發網站內選擇剛新增的程式，可以看到連結的App Id 跟金鑰

2.來到FireBase內，選擇Authentication->登入方式->facebook->啟用

3.把步驟1的Id跟金鑰輸入後，複製 OAuth 重新導向 URI

4.把步驟3的URI，貼到步驟1網站->FaceBook登入->設定->OAuth 重新導向 URI->儲存

如此便完成了FireBase與FB程式與App的連結

主程式撰寫

最後當然是在App內寫入我們要的登入頁面
參考FireBase提供的官方方法
前置1～5步驟，我們都已設定好了，只需要直接進入coding

1-1.我們另外宣告一個faceBookLogin()的方法，把第一段中
　// Initialize Facebook Login button程式碼貼入
（此段功能：找到UI元件，並宣告callBack物件，取得登入成功或失敗結果）
(記得要在onCreate()時呼叫此函式，才會運行)
（handleFacebookAccessToken方法，在步驟4才會寫到）

1-2.複製貼上protected void onActivityResult(int requestCode, int resultCode, Intent data) 方法

2.在onCreate內，貼上

private FirebaseAuth mAuth;
mAuth = FirebaseAuth.getInstance();

3.複製貼上public void onStart()方法

4.複製貼上private void handleFacebookAccessToken(AccessToken token)方法，
　此函式提供登入成功/失敗後，回傳結果的處理方式（步驟1-1函式會呼叫到）。

5.updateUI(null);　方法要自己寫，看是更新元件、顯示文字訊息、或跳轉都可以
（以下為參考，登入後取得user，顯示姓名與Email）

以上，我們便完成了所有步驟！　可以用FB登入囉～
畫面上即會顯示出登入者的FB姓名跟Email!
FireBase內也會新增使用者喔！

至於使用者的判別，可以用uid，其餘相關功能
可在其他相關網站有所說明。
而此App登入後，就會記住使用者的授權了（因為onStart與onCreate已做紀錄)
想要登出時，只要呼叫　FirebaseAuth.getInstance().signOut();

之後我們再探討google帳號的登入功能吧！

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

1.如果遇到　loginButton無法運作時

在onCreate加入FacebookSdk.sdkInitialize方法即可解決

@Overrideprotected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    FacebookSdk.sdkInitialize(getApplicationContext());    setContentView(R.layout.activity_main);}

2.如果遇到app hash key不符時

這是因為裝置上的FB App產生的bug

只要在FB developer的網站內，設定加入動態產生的hash key就好

private void _hashKey(){
    try {
        PackageInfo info = getPackageManager().getPackageInfo(
                "com.firebase.naylor.g2bfirst",                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 e) {

    } catch (NoSuchAlgorithmException e) {

    }
}

在logcat搜尋KeyHash，複製貼上到FB developer的程式設定內即可。
（這些code是動態產生hash key，發生bug時，會與上頭在終端機輸入指令
產生不同hash key，而此時須以動態產生的為主！）　參考解決來源