Firebase教學 + fb / google / email登入(iOS, swift 3)- part 2

完整專案 : https://github.com/Jerry0420/SignInExample.git

使用模擬器建立後,選擇第3個tab,即為本篇教學的部分。

延續上篇教學,已完成firebase和fb, google的所有連結,接著可開始撰寫程式碼。

首先演示此教學最後完整的app。

頁面1 :點選第3個tab,畫面上可以透過fb登入,google登入,email註冊,email註冊後登入,忘記密碼。(此為示範,故把email註冊和登入放在同一個頁面,一般來說不建議這樣設計。)

登入頁面

頁面2 : 登入後進入顯示資料的頁面,資料以tableView顯示,每筆資料包含一張圖片以及一段文字,點選右上角的“上傳資料”,可進入上傳資料的頁面。

顯示資料頁面

頁面3 : 此為上傳資料頁面,在textField內可輸入任何文字,點選左上角的上傳後,會將文字連同照片一起上傳。(此為示範,故固定為這張照片,爾後可依app的設計,讓使用者自行選擇想要的照片上傳)

而此筆資料即頁面2顯示的資料。

以上三個頁面及此app想演示的部分,接著將firebase的功能可分為(1)fb登入firebase (2)google登入firebase (3)email註冊(4)email登入firebase,忘記密碼 (5)圖片上傳 (6) 訊息上傳 (7)資訊下載 (8)刪除資料 (9)登出。

(1) fb登入firebase。使用fb帳號登入firebase,並將使用者資料存入DataBase

先登入fb,才能登入firebase。第6行 的credential可以想像成個人登入金鑰,取得fbCredentials後,帶著這個金鑰,我們才能繼續前往firebase。而登入相關的firebase功能,皆透過第11行 FIRAuth內的signIn函數來實現。

順利登入後,可在Authentication查看目前所有使用者

順利登入後,第11行回傳一個completion,內有user和error,user即帶著fb的登入資訊,第24行 從user中取出photoURL , email , displayName…等。在此只示範取出這三個個人資訊,分別放入firebase DataBase。

順帶一提,第20行的uid可想像成每個使用者獨特的識別碼,每位都不同。

要將資訊存入firebase DataBase皆透過FIRDatabase,在第30行取得FIRDatabase.database().reference()後,才可寫入。第32行 let usersReference = ref.child(“users”).child(uid) ,其中的child函數,也就是資料的節點,在使設定為“user”和uid。

而第28行values dictionary設定了email, name, profileImageUrl,為我們欲儲存的個人資訊。

最後,透過updateChildValues函數寫入資料到dataBase內。

設置的user和uid節點,內部有設定的email, name, profileImageUrl。此使用者的uid為o80k3a……每位使用者都不同。

(2) google登入firebase。使用google帳號登入firebase,並將使用者資料存入DataBase

方法同fb登入firebase,在這就不多作介紹。

(3)email註冊

首先,在此因為是示範,並無做些關於email和密碼的判斷,如是否符合email格式,密碼大於6碼。

註冊透過FIRAuth內的creatUser函數,傳入使用者個email, password,即可註冊。回傳一個completion,內含user和error,同fb和google登入,user內包含了使用者的資訊。

error包含了錯誤資訊,包含了密碼輸入位數過少,email格式不符合,email已註冊過…..各位可自行查看文件,在此因為示範,並無再多做判斷了。

其餘寫入使用者資訊到dataBase的部分與前兩部份相同,就不多作介紹。在此並未傳入使用者大頭貼,可依app設計自行放入,後面也將介紹如何上傳照片。

第26行將繼驗證信件給使用者,確定註冊成功。

收到的驗證信

(4)email登入firebase,忘記密碼

email登入只要傳入email和password即可透過FIRAuth登入。

忘記密碼只要填入email即可寄送修改密碼的email。

p.s. 關於email註冊和修改密碼時,firebase寄送的email內容文字,皆可在下圖進行修改。

(5)圖片上傳

上傳除了文字以外的東西,皆是放到Storage,第5行透過FIRStorage,建立要傳的節點“childName”和“imageName”。(在此將childName設為Upload Image,imageName為隨機的字串)

在此注意,上傳的東西皆要轉成swift內Data的型別,請看第7行。

第9行,透過put函數,將資料上傳,回傳一個completion,內部有metadata和error。第16行,metadata內包含了此檔案上傳後的url,也就是我們要的。

(6) 訊息上傳

訊息上傳與登入時儲存使用者資料到DataBase完全相同。

在此傳入第一行的資訊,其中的“Text”, “Image URL”為欲儲存的資料。此Image URL即上一步驟,上傳照片後得到的照片URL。在第15行再接著加入”Child ID”上傳

第9行的“childName”和“uid”為儲存的節點,也就是說,我們可依照使用者來儲存資料。

第11行的childRef為隨機建立的每一筆訊息的ID,為了識別各訊息。

由下圖可看出,uid開頭為ku3Dyu….的使用者,傳入了二筆資料。此兩筆資料的訊息ID分別為kdia…..和kdib……

(7)資訊下載

讀取遠端資料,透過FIRDatabase內的函數,指派節點,已得到資料。

第7行可看出,在此的節點只有兩個“childName”和“uid”,指定後在第9行回傳了snapshot,裡面包含了遠端資料,此為dictionary型別,snapshot的key即為資料的代碼,在此為kdiac….和kdib…..,snapshot的value亦為一個dictionary,key為“Child ID”, “Image URL” , “Text”,後續即可解析出來,再顯示資料。

有一點要注意,在第8行放入的是childAdded,表示一次會回傳一筆資料,一筆一筆加入。

如下圖所示,Mike這位使用者,目前遠端資料庫有兩筆資料。

(8)刪除資料

刪除資料同上傳資料,給定資料的節點後,透過removeValue函數即可刪除。

在tableView內cell右滑可顯示刪除按鈕。點下後,firebase database同步刪除了資料。

(9) 登出

第一行演示了fb登出,第二行演示了google登出,第四行之後演示了firebase登出。

以上,即為firebase的簡易教學,在沒有後端協助的時候,firebase就是app開發者的個人小後端,功能十分強大。