Xcode-APP加入FB(第三方)登入功能
目錄
⦿ 第三方登入
⦿ Meta
⦿ 瞭解 plist
⦿ 建立應用程式
⦿ 快速入門
⦿ 設定 Info.plist
⦿ Keychain Sharing
⦿ Advanced Access
⦿ SPM
⦿ AppDelegate & SceneDelegate
⦿ UI 及登入邏輯
⦿ 恢復存取權限、開始檢查第三方登入
Three-Party Login，當你建置了一個應用程式並在 App Store 上架了，如果人家不認識這個 APP，你又設定了繁瑣的註冊登入流程，會減少別人使用 APP 的意願，那麼，有個好方法來增加 APP 的流量——採用第三方登入。
Facebook、Google 的使用者非常多吧？如果 APP 的登入註冊，可以用 Facebook 的登入來取代，就起碼減少繁瑣的註冊了，這篇文章帶你一步步實作 FB 的登入註冊功能吧！
繼續閱讀｜回目錄Meta
首先，你得進到 Meta 的 developers 的官網，在上方頁籤，我的應用程式的地方點進去，可以看到如下：
由於你尚未建置應用程式，在這裡會是空的，不過可以看到幾項重要訊息。
- FacebookDisplayName：我的是 Demo_003。
- FacebookAppID：我的是 4************65。
- 類型：consumer。
瞭解plist
前段即是在 Info.plist 中的重要資訊，如下：
plist，property list，屬性列表，用來存放用戶設置及應用程式的一些重要資訊，如果直接從 plist 中複製貼到文件檔會得到如下：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<string>4************65</string>
<string>Demo_003</string>
</plist>我們可以看到 plist 中 key value 的 value 呈現 XML 形式的列表，關於 Storyboard 中的 XML 可參考之前的一篇文章，事實上，現在直接檢閱 plist 的 source code，對著 Info.plist 右鍵如下：
Info => Open As => Source Code，我們就可以看到 XML 的原樣，如果想轉換回來，記得再 Info => Open As => Property List 即可。
為了要加入 FB 登入功能，在 plist 裡，我們要注意的是 FacebookAppID、FacebookClientToken、FacebookDisplayName 跟 Queried URL Schemes 這四項。
好了！具先備知識了，接下來就是建立應用程式。
繼續閱讀｜回目錄建立應用程式
當你按下建立應用程式，就會出現類型選擇，如下：
為了達成第三方登入功能，我們這邊選擇的是消費者，這即是前段我們看到的 consumer。
接著輸入應用程式名稱、聯絡 e-mail 再按下建立應用程式，就可以在主控板看到如下：
快速入門
前一段的 Facebook 登入，按右下角設定後，就可以看到快速入門如下：
點選 iOS 後，依照你加入套件的方式去選擇。
再到 TARGETS => General 去找到你的 Bundle Identifier，填入後存檔，再按繼續。
選擇單一登入。
設定Info.plist
使用 Source Code
一樣地，在 plist 中可以 Open As Source Code，然後加入下面這段程式碼：
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>fbAPP-ID</string>
</array>
</dict>
</array>
<key>FacebookAppID</key>
<string>APP-ID</string>
<key>FacebookClientToken</key>
<string>CLIENT-TOKEN</string>
<key>FacebookDisplayName</key>
<string>APP-NAME</string>
<key>LSApplicationQueriesSchemes</key>
<array>
<string>fbapi</string>
<string>fb-messenger-share-api</string>
</array>如果轉換為 property list 來看，就是文章前面我們看到的那張圖：
在 <string> </string> 中就是你要填入的 value，即是 APP-ID、CLIENT-TOKEN、APP-NAME 都必須換成前面設定或拿到的。
而 CLIENT-TOKEN 在頁面的設定 => 進階 => 安全性 => 用戶端權杖，如下：
使用Property List
在 Info.plist 中，最上方按 + 加入 key 為 CFBundleURLTypes，下方 Item 0 () 中刪除 URL identifier，按 + 加入 URL Schemes，再下方 Item 0 的 value 填入 fb + 取得的應用程式編號。這時候大概是長這樣：
接著回到最上方按 + 加入 Key 分別為 FacebookAppID、FacebookClientToken、FacebookDisplayName，value 分別填入取得的應用程式編號、取得的用戶端權杖、APP 的名稱。
比較一下 Property List 與 Source Code 可以看到如下：
然後還要按 + 新增 LSApplicationQueriesSchemes，將 Item 0、Item 1 加入 fbapi、fb-messenger-share-api 這兩個 value，如下：
繼續閱讀｜回目錄Keychain Sharing
此外，還需加入 Capability 的 Keychain Sharing 功能。
SPM
接著到 Package Dependencies 中，按下方的 + 加入 FB 套件網址：
https://github.com/facebook/facebook-ios-sdk
AppDelegate & SceneDelegate
在 iOS13 以後的版本，AppDelegate 中加入下方程式碼：
import FacebookCore
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
ApplicationDelegate.shared.application(
application,
didFinishLaunchingWithOptions: launchOptions
)
return true
}
}在 SceneDelegate 中加入下方程式碼：
import FacebookCore
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
guard let url = URLContexts.first?.url else {
return
}
ApplicationDelegate.shared.application(
UIApplication.shared,
open: url,
sourceApplication: nil,
annotation: [UIApplication.OpenURLOptionsKey.annotation]
)
}
}好了！接下來可以開始寫你要的 UI 及登入邏輯了。
繼續閱讀｜回目錄UI 及登入邏輯
登入
我們想在首頁加入 FB 圖樣的按鈕，點選按鈕，若第三方順利登入，會跳轉到歡迎頁面，如下：
但實際上，登入後應該會跳到 APP 的常用畫面，歡迎回來應該是以對話框的方式呈現，但不影響實作登入功能。
好的！我們來看看第一頁的程式碼：
import FacebookLogin
class ViewController: UIViewController {
@IBOutlet weak var fbLoginBtn: UIButton!
@IBAction func fbLoginBtnTapped(_ sender: Any) {
// 只使用FB登入
let fbManager = LoginManager()
fbManager.logIn(permissions: [.publicProfile, .email]) { result in
switch result {
case .success(granted: _, declined: _, token: _):
self.performSegue(withIdentifier: "LoginToWelcome", sender: sender)
print("success")
case .cancelled:
print("cancelled")
case .failed(_):
print("failed")
}
}
}
}若按下按鈕，使用 LoginManager 來判斷結果，這邊示範的 Login permissions 有兩個，一個是 publicProfile，一個是 email，在跳轉頁面時，若需要存取權限會詢問使用者，如下：
第一頁跳到第二頁，是用 performSegue(withIdentifier: “LoginToWelcome”, sender: sender) 的方式來跳轉，所以在 Storyboard 的地方會是：
將這個 Segue 的 Identifier 設為 LoginToWelcome。
登出
接著加入 unwindSegue 的 function 如下：
@IBAction func unwindToViewController(_ unwindSegue: UIStoryboardSegue) {
let manager = LoginManager()
manager.logOut()
}unwindSegue 的 function 在 @IBAction 前面的圓圈是空心的，因為它並不真的跟程式碼拉線相連，而是在 Storyboard 中操作：
將 Logout Button 拉至上方的 Exit，就可以找到這個 unwindSegue 的 function。
viewDidAppear
但這還沒完，如果每次打開 APP 都要重新用 FB Login Button 登入，那實在相當麻煩且對使用者不友善，所以可以在 viewDidAppear 中加入下面這段程式碼：
override func viewDidAppear(_ animated: Bool) {
if let token = AccessToken.current, !token.isExpired {
performSegue(withIdentifier: "LoginToWelcome", sender: nil)
}
}在 view 確實出現後，檢查 token 來決定要不要 performSegue 跳轉至下一頁。
因為前面有設定 keychain sharing，所以使用 LoginManager 會為你設置 token（權杖）並存起來，所以，檢查 token 是否相同，且沒過期，就應該跳轉到歡迎畫面。
整體登入流程就應該如下呈現：
恢復存取權限、開始檢查
最後的最後，如果你很久沒用 FB API，系統會停用你建立的應用程序，此時用戶無法使用 FB Login Button 登入你的 APP，如下：
於是，我們必須到提示 => 收件匣 去檢查，看到如下：
左圖是常見的檢查，按下開始檢查，是否符合 Meta Developer 網站的使用規範，又或者像右圖久未使用，已遭停用的圖形 API 使用權限，按下恢復存取權限，讓你的 FB Login 功能再次啟用。
這次就分享到這，感謝您的閱讀。
繼續閱讀｜回目錄Reference：
GitHub：