iOS APP 使用 Facebook 第三方登入

Anny
8 min readNov 29, 2020

--

現在很多的 APP 登入方式都會開放使用FB或者Google 帳號,不用再麻煩的註冊新帳號。

第三方登入成為一個趨勢,尤其在手遊APP上,這樣可以讓玩家避免忘記帳號及密碼,也能增加用戶的留存機率。

所以~今天來看看如何使用 Facebook 作為第三方登入 — Facebook Login。

讓我們來實作 FB 登入功能吧!!!

本篇內容包含:

  • 註冊 App 並搭配 Facebook 使用
  • 使用 SPM 安裝 Facebook iOS SDK
  • 在 AppDelegate 與 SceneDelegate加入 FB 相關程式
  • 加入 Facebook 登入程式碼

FB iOS SDK 的官方文件,今天就是按照步驟來實際執行啦~~~

1. 選擇應用程式或建立新的應用程式

當然第一步驟要先登入 Facebook 啦。

再來,點選 “我的應用程式” 來新增應用程式,為了在 iOS App 加入 FB 登入功能,我們得先在 FB 開發網站上建立一個對應的 App。

接著 創建應用程式的名稱,這裡要注意喔~不能輸入有關fb的文字,否則會出錯,像下面那張圖。

2. 註冊應用程式並設成可搭配 Facebook 使用

註冊完後,要來設定應用程式,才能使用 Facebook 登入。

在 App 下方的 “設定” 中選擇 “基本資料”

接著滑到頁面底部,點選 “新增平台” 新增 iOS 設定區塊

設定” 中選擇 “基本資料” 新增平台
新增 iOS 設定區塊

設定 iOS 區塊

輸入 iOS App 的套件識別碼也就是 Bundle ID ,並且啟用應用程式的單一登入。

套件識別碼,在 Xcode 專案的 General 頁面查詢,找到套件識別碼。

然後!!!重要!!!請注意!!!
專案名稱不能為 FacebookLogin,因為後續import 也是 FacebookLogin。
Xcode一直報錯說找不到這個套件QQ,試了很多次,一開始以為是我版本有問題,因為剛更新成 Xcode 12.2 版本,試了很多次QQ,改個名字就對了。

在 Xcode 查詢 套件識別碼
輸入套件識別碼,並且開啟單一登入。

如果你是直接在 Fackbook 官方文件,也可以直接做到以上功能喔!

https://developers.facebook.com/docs/facebook-login/ios/

3. 設定開發環境 — 利用 SPM 安裝 Facebook iOS SDK

想在 App 加入 FB 登入功能,必須先將 Facebook iOS SDK 加到 Xcode 專案。
使用 Swift 套件管理工具(SPM)
注意!!!僅適用於 Xcode 11.2 以上版本喔。
除了 SPM 也可以使用Cocoapods 安裝,加入 pod FacebookLogin。

  1. 在 Xcode 中,點擊 File -> Swift Packages -> Add Package Dependency。

2. 新增套件時輸入 Facebook iOS SDK 的 GitHub 網址:https://github.com/facebook/facebook-ios-sdk

3. 在 Version中,選擇 Up to Next Major。

4. 勾選 FacebookLogin

完成套件的安裝後長這樣, Swift Package Dependencies 增加了 Facebook。

4. 在 Xcode 專案設定 Facebook 相關資訊

接下來要在專案裡設定 FB 的資訊,才能來實作一些 FB 的功能。

這裡的設定方式有兩種~~~兩種都會實際操作給大家看。

第一種 — XML 程式碼設定Info.plist

使用 XML 程式碼來設定資訊屬性清單檔案,也就是Info.plist。

點選 Info.plist 右鍵 -> Open As -> Source Code,就可以用 XML 編輯囉!

Fackbook 官方文件,可以在這裡複製好喔~~~就不用自己打了><

設定好後會就會呈現這樣

第二種 — 手動設定Info.plist

到 Info 頁面,URL Types 點選下面 “+” 來新增 URL Type。
這步驟也就是上面程式碼 標註1號的部分!

新增 URL Type

URL Schemes 輸入應用程式 ID,記得要在 ID 前面加上 fb 喔。

第二和三步驟就在Info 頁面加入 FacebookAppID 和 FacebookDisplayName。

在自己的應用程式中可以查詢 ID。

第四步驟是新增型別 array 的 LSApplicationQueriesSchemes。
可以全部都加入,也可以只加入fbapi、fb-messenger-share-api、fbauth2 、fbshareextension,這樣才能使用 FB 的相關 App。

5. 在 AppDelegate 與SceneDelegate加入 FB 相關程式

AppDelegate

首先 import FacebookCore ,才能使用 FB 的相關程式。

接著 在 application(_:didFinishLaunchingWithOptions:)裡執行上述程式碼,這樣一來可以達到,在一啟動App 就完成了 FB 的設定。

再來新增一個func,application(_:open:options:),如果切換到 FB後,要再從 FB 切換回原本的 App 時會呼叫這個func。

完整程式碼

AppDelegate.swift 程式碼

SceneDelegate

如果你的 APP 版本在 iOS 13 以上,還需要在 SceneDelegate 加入程式碼。

一樣要 import FacebookCore 喔!

SceneDelegate.swift 程式碼

6. Facebook 登入程式碼

做完前面那一堆設定之後!終於要進入今天的重頭戲啦!!!

首先 import FacebookLogin

生成 FBLoginButton,設定一下Button位置在正中心點,接著將Button加入view中。

來看看成果吧!

今天先到這裡囉~~~

之後再來實作其他更多 Facebook 登入之後的操作,讀取使用者FB profile 資訊,檢查目前的登入狀態等等…

最後一樣附上 Github 給大家參考~~~

--

--