Swift Practice # 110 Firebase 初探 Facebook 登入與SPM套件

上一篇完成了Google登入的實踐練習,又多學會一個登入方式。

這篇要透過Facebook第三方的登入功能來實踐登入練習。

學習資源:

前置準備:

Firebase :

先至Firebase建立專案(流程可參照Swift Practice 107)後

接著設定Firebase的Bundle ID

下載plist後加入到專案

接著要來下載Firebase套件,前幾篇都是使用Cocoapods下載套件,但這篇作業要嘗試使用SPM來進行,在專案iOS設定流程時可以看到SPM的教學連結。

點選上面的紅框會跳到下面的連結頁面

從上面連結發現到SPM的套件網址

https://github.com/firebase/firebase-ios-sdk.git

接著就安裝SPM我先選擇FirebaseAuth跟FirebaseAnalytics,後續執行上有問題我再來看看是哪些沒有安裝。

另外關於安裝的教學可以上面的學習資源。安裝完成會看到專案左側出現Swift Package Dependencies

接著一樣先到AppleDelegate import與輸入需要的程式碼

大致Firebase的前置就算完成了。

Facebook:

首先我們要先到Facebook的開發者網站進行專案建立。

註冊:

剛好我還沒註冊,就一步一步來看看流程。

進到上面的網址後,點選右邊的三條橫線

進入後點選下面的開始使用

點選開始使用後會跳到下方頁面,如果原本瀏覽器就有登入自己的Facebook帳號,就會顯示你原本的帳號,這時候就可以點選下方的繼續。

點選繼續後會確認開發者Email,這時後沒有問提就一樣按下確認電子郵件地址。

點選後會跳到下方頁面,要選擇目前的開發模式,我是先點選開發人員,選擇後就可點選完成註冊。

完成註冊後會跳到以下頁面。

到這裡就算是註冊成功了。

建立專案:

接著點選上方的建立應用程式後跳到下方頁面,建立程式類型,依照彼得潘的文章點選消費者就好,接著按下繼續。

進入到接續頁面,選填專案名稱後點選下方建立應用程式。(專案名稱不能有Facebook)

建立專案前需要再次輸入密碼確認。

專案的初步建立就算完成了。

專案細節設定:

接著點選左側設定進入下一頁後拉到最下方會看到新增平台。接著點選進入

進入後點選iOS接著進入下一步

下一步會看到右側有個立即開始,算是Facebook手把手的教學。點選後進入

點選後會看到下載SDK,在這裏可以跟著教學進入安裝。

但我選擇透過SPM安裝,網址如下

https://github.com/facebook/facebook-ios-sdk

透過SPM安裝我先安裝單純的FacebookLogin

安裝後接續要將指令放入plist,需要安裝的指令在快速入門內

先回到專案內的plist點選右鍵>Open As > Source Code進入。

接著會看到以下畫面

拉到最下方輸入剛剛上面兩個紅框的指令複製貼上

跟著入門的腳步,下一步要輸入Bundle ID ,Bundle ID跟Google一樣在Xcode專案內可以找到

按下下一步後回在同頁面,拉到最下面可以看到登入教學

跟著教學,先將單一登入點是後按下Save

點選完後要前往plist新增程式碼,用於Facebook登入使用。先透過Source Code開啟plist

接著拉到最下方在最後的</dict>上方

將下面程式碼複製在這裡面

<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>fbapi20130214</string>
<string>fbapi20130410</string>
<string>fbapi20130702</string>
<string>fbapi20131010</string>
<string>fbapi20131219</string>
<string>fbapi20140410</string>
<string>fbapi20140116</string>
<string>fbapi20150313</string>
<string>fbapi20150629</string>
<string>fbapi20160328</string>
<string>fbauth</string>
<string>fb-messenger-share-api</string>
<string>fbauth2</string>
<string>fbshareextension</string>
</array>

注意!

接著又要前往Apple Delegate輸入程式碼,Facebook很貼心的將整個Apple Delegate都寫好了,所以只要複製貼上Facebook的程式碼到Apple Delegate就好。

注意!

在輸入plist檔案時,要注意上面的規定,在這卡關了一陣子!

因為整個複製貼上,所以剛剛的Firebase程式碼會跟著不見,所以上面Firebase的import與 FirebaseApp.configure()也要重新導入。

但是我的方法是將沒有的程式碼找到再貼上,這也是一個方法。

接著要跟隨入門另外前往SceneDelegate輸入另外的程式碼。

接著回到

Firebase Facebook 登入開啟:

因為這個專案要跟Firebase透過第三方登入,所以先回來Firebase設定登入的方法,選擇Facebook

進來會要求輸入App ID 與 APP Screct

APP ID 與 APP Screct 在Facebook Developer 專案內就能看到

輸入完成按下Save就可以了。

基本上在這裡前置準備都準備好了,有夠漫長哈哈。

畫面佈局:

從上面的畫面來看,左邊為登入頁,右邊為登入成功頁。

程式碼:

0 AppleDelegate :

因為上面有加入好幾個程式碼到AppleDelegate內,所以直接貼上給大家參考

1 SceneDelegate:

這邊也有加入資料也是一併貼上

2 自定義Function給兩個ViewController使用:

3 ViewController 登入頁:

在這裡有上面畫面佈局看不到的FBButton,在沒有登入時才會出現,而且這個FBButton只能登入FB無法登入到Firebase,目前還沒研究出來。但還是可以完成登入。

4 LoginSuccessViewController 登入成功頁:

顯示登入成功Label,另外一個登出按鈕,登出後會登出Firebase後登出FB。

測試結果:

可以看到在還沒登入時,中間有一顆FBLoginButton。

點選中間的登入,會看到登入成功,FBLoginButton改變狀態,但沒有跳轉頁面也沒有登入Firebase。

上面為先登出剛剛的FBLoginButton後登入自定義Button進入後登入FB後再登入Firebase。

查看Firebase也有登入成功

心得與發現:

發現因為登入的官方說明都滿清楚的,所以好像網路教學比較少,這也可能是我的錯覺。但這兩個作業也學到新的東西,可以理解的狀況是先跟第三方登入請求登入取得資料後接著再拿資料去跟Firebase請求登入,基本上目前的理解是這樣,有誤還請各位高手協助提點。持續加油!!!

--

--