#32 飲料App | 利用 SPM 安裝 Facebook iOS SDK,新增登入功能
實作第三方登入-Facebook Login
許多程式都設有登入功能,除了自己註冊一組新的帳號密碼,也有使用第三方連動登入的方式來進入App主畫面,接下來就開始幫訂飲料App新增登入功能!
⬇️ 成品預覽
✏️ 使用到的技術
- Swift Package Manager, SPM
- Facebook SDK for iOS
✏️ 程式說明
1.使用SPM安裝第三方套件,這邊用的是Facebook SDK
- File > Add packages > 右上搜尋欄輸入facebook > 找到 facebook-ios-sdk
- 在 Dependency Rule 調整為
Up to Next Major Version
輸入13.0.0,意即13.0.0以上的版本都可以使用,然後點選Add packages
目前最新版為16.0.1~
- 勾選Facebook Login ,然後點選Add packages
- 在Project navigator 的 Package Dependencies 下方看到完成安裝的套件囉!
安裝方式可參考以下這篇⬇️
2.註冊為開發人員
點選以下網址進行註冊
註冊步驟可參考這兩篇⬇️
3.ㄧ步步按照官方文件進行設定
共有 8 個步驟可完成!
1️⃣、設定開發環境,選SDK: Swift Package Manager,就是用SPM的方式來安裝Facebook iOS SDK
2️⃣、新增套件識別碼(Bundle ID)
3️⃣、啟用應用程式的單一登入,選“是”
4️⃣、設定Info.plist,按照描述一步步填入所需資料
複製以下 XML 程式碼片段並貼至檔案主體(<dict>...</dict>
),貼上後如右圖
若要使用任何可從某應用程式切換到 Facebook 應用程式的 Facebook 對話方塊(例如:登入、分享、應用程式邀請等等),Info.plist
也需要執行下列動作:
<key>LSApplicationQueriesSchemes</key>
<array>
<string>fbapi</string>
<string>fb-messenger-share-api</string>
</array>
這邊我直接貼在剛剛那一大串的下方
開啟keychain sharing的功能
應用程式 > Target > Signing & Capabilities > 左上角找到 + Capability >輸入keychain sharing
5️⃣、連接應用程式所需的delegate
👉AppDelegate、SceneDelegate皆須先 import FacebookCore,才能使用FB的相關程式
AppDelegate: 程式啟動時初始化 SDK,讓 SDK 處理原生 Facebook 應用程式的登入和分享
SceneDelegate: 開啟網址功能
6️⃣、新增Facebook 登入按鈕
按照SDK上的語法,登入按鈕會呈現在畫面的正中央,也可自己拉IBAction,設計自訂的按鈕
7️⃣、檢查目前的登入狀態
8️⃣、要求權限
以下為官方說明:使用「Facebook 登入」時,您的應用程式可以要求提供有關個人資料子集的權限。「Facebook 登入」需要進階 public_profile 權限,才能由外部用戶使用。「Facebook 登入」按鈕的讀取權限,若需要求其他讀取權限,請在 FBLoginButton
物件設定 permissions
屬性
這次實作自訂的按鈕,可透過LoginManager 來執行登入,在permissions傳入想要的權限,如public_profile
和 email
除了 public_profile 和 email 以外,若應用程式還要求其他權限,在發佈應用程式之前,Facebook 就必須進行審查
然後在登入成功後透過 GraphRequest 取得個人的相關資訊,印出來的資訊如下
👤👤👤 [“id”: “9024508504288502”, “name”: “shelley”, “email”: “shuan0720@hotmail.com.tw”]
如何讓每個人的臉書帳號都能登入?
設定隱私政策網址Privacy Policy、用戶資料刪除User data deletion,可先填入一個暫時性的網址,方便測試登入功能即可,等未來有正式網址時再更新
把上方的應用程式模式打開,這樣大家就都可以登入囉!若沒有打開就只有自己可以登入~
9️⃣、切換到Info頁面,新增以下訊息
- Queried URL Schemes,新增兩個item,加入fbapi、fb-messenger-share-api
- FacebookAppID,加入AppID(應用程式編號)
- FacebookDisplayName,加入一開始設定的名稱,主控版的左上方也有顯示
- FacebookClientToken,加入用戶端權杖(設定>進階>用戶端權杖)
- 打開 URL Types 區塊,點選 + 新增 URL Type,在URL Schemes輸入 fb+AppID
如果沒有新增~會收到報錯喔⬇️
以上~完成!
🔆 GitHub