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

Jerry Wang
Feb 24, 2017 · 8 min read

完整專案 : 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開發者的個人小後端,功能十分強大。

Jerry Wang

Written by

Software Developer / jeerywa@gmail.com https://www.linkedin.com/in/jeerywa/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade