利用 Firebase Authentication 來實現使用 Facebook 登入的功能

11 min readFeb 12, 2017

在先前的文章曾介紹過使用 Firebase 來實現註冊帳號和登入的功能，該篇文章則要延續上一篇並加入也可使用 Facebook 來登入的功能。所以在學習使用 Facebook 登入前，法蘭克希望可以先學習上一篇使用 Email 的方式登入後再來學習使用 Facebook 的登入，如此會更清楚、明瞭。

在開始學習前，想必大家應該都會和法蘭克同樣有一個疑問？那就是使用 Firebase 整合 Facebook 登入是不是就不需要使用到 Facebook 的 SDK 呢？答案是否定的，仍舊是需要安裝 Facebook 的 SDK 至 Xcode 裡的，只是在實作登入時是使用 Firebase 所提供的 API。程式碼同使用 Email 登錄一樣是相當簡潔且易懂的，在法蘭克看來只是需要更多的時間來配置和設定專案如此而己。

前置作業：

已學習使用 Firebase 來實現註冊帳號和登入的功能，因今日的講解會延續上一個專案。
在上一個專案的畫面上加入「使用 FB 登入」的按鈕。

3. 了解如何利用 cocoaPods 載入第三方的套件，請參考法蘭克之前的文章。

【IOS - 透過cocoaPods來管理第三方的套件】

當我們開發專案時，免不了需要引用到第三方的套件，最常遇到的問題就是當套件更新時我們就得必須重新引用，這對我們開發者來說是一件相當耗時的工作，且還有可能誤刪其它套件的風險在，但若使用CocoaPods 來替我們管理這些套件，就能免去諸如此…

medium.com

若前置作業都準備完成後，先來看一下今天實作完成的功能影片。

在開始今天的重頭戲之前，先來說明今日講解的大綱：

至 Facebook 開發者後台建立一個新的 App
到 Firebase 後台配置使用 Facebook 登入的設定
利用 cocoaPods 載入 Facebook 的 SDK
配置 Xcode 專案下的 Info.plist 文檔
在專案內加入使用 Facebook 登入的程式碼
至 Facebook 後台取得測試帳號
利用取得的測試帳號測試登入和登出的功能

1. 至 Facebook 開發者後台建立一個新的 App

1.1 使用 Facebook 帳號登錄 Facebook 開發者後台

1.2 建立一個新的應用程式編號

顯示名稱：同上一篇 UseFirebaseToLogin

聯絡電子郵件：任意填入皆可，預設會帶入註冊 Facebook 時的 Email

類別：任一類皆可

1.3 新增 Facebook 登入的產品

登錄後，選擇左側選單+新增產品 → Facebook 登入(開始使用)

1.3 至主控板選擇 iOS 平台

左側選單主控板 → 選擇平台 → iOS

備註：接著會教你如何使用 Facebook SDK，這邊直接一直下一步即可，因我們使用的是 Firebase 的 SDK

1.4 新增平台

1.5 設置平台的 bundle ID 同 Xcode 的 bundle ID

2. 到 Firebase 後台配置使用 Facebook 登入的設定

2.1 登入 Firebase 後台啟用 Facebook 驗證方式

左側選單 Authentication → Facebook → 啟用

2.2 至 Facebook 後台主控版查找應用程式 ID 和密鑰回填至 Firebase

應用程式 ID => Facebook 的應用程式編號

應用程式密鑰 => Facebook 的應用程式密鑰

2.3 將 Firebase 的 OAuth URI 回填到 Facebook 後台

該設定主要是 Facebook 驗證完後，要通知 Firebase 所需的連結

Facebook登入設定 → 有效的 OAuth 重新導向 URI

3. 利用 cocoaPods 載入 Facebook 的 SDK

3.1 打開先前專案的 podfile 並加入以下指令

pod ‘Bolts’pod ‘FBSDKCoreKit’pod ‘FBSDKLoginKit’

3.2 打開終端機將路徑切換至專案下，關閉 Xcode 後執行 pod install

4. 配置 Xcode 專案下的 Info.plist 文檔

這個配置的用意是透過 Facebook 的 App ID 和專案作關聯，好讓 Facebook 知道說該專案有使用到你們的 SDK。

4.1 登入 Facebook 後台找到 App ID 和應用程式名稱

4.2 回到 Xcode 並找到專案下的 Info.plist 點擊右鍵 → Open As → Source Code

4.3 在 Info.plist 加入以下程式碼

4.4 將在 Facebook 後台找到的 App ID 和應用程式名稱配置到 Info.plist

CFBundleURLSchemes => fb{你的 App ID}

FacebookAppID => 你的 App ID

FacebookDisplayName => 你的應用程式名稱

以上已完成所有的配置了，接下來請打開前一篇文章的專案，開始加入一些程式碼來實作使用 FB 登入的功能了。

5. 在專案內加入使用 Facebook 登入的程式碼

5.1 在 AppDelegate.swift 引入 Facebook 的 SDK

import FBSDKCoreKit

5.2 初始化 Firebase 使用 Facebook 登入的程式碼

FBSDKApplicationDelegate.sharedInstance().application(application, didFinishLaunchingWithOptions: launchOptions)

5.3 實作當 Facebook 完成驗證工作後，將畫面導回應用程式的 protocol

在 AppDelegate.swift 加入以下 func

func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {let handled = FBSDKApplicationDelegate.sharedInstance().application(app, open: url, options: options)return handled}

如同我們在一開始看到的「實作完成的功能影片」，在影片中點擊使用 FB 登入，則會開啟 Facebook 的驗證畫面，這邊情況會有兩種，一種是使用者沒有安裝 Facebook 的應用程式，第二種則是有安裝 Facebook 的應用程式，前者會使用 Safari 開啟驗證畫面，後者則會用 Facebook App 開啟驗證畫面，不管是使用第一種或是第二種，最終驗證完成後還是會導回我們的 App，這段程式碼就是當驗證完成後所會觸發的 Delegate，必須實作它才能在驗證完成後成功的導回我們的 App。

5.4 打開首頁也就是 ViewController.swift 並引入 Facebook SDK 的登入工具