Swift Practice # 108 Firebase 初探 Email 註冊登入修改密碼功能

上一篇透過一步一步的實作來理解Firebase的前置作業需求。算是理解了該如何完成前面的步驟。

接著在完成基礎環境要求後,開始要來「探索」Firebase強大的功能,這篇練習要透過上一篇的環境設定銜接來完成Email的註冊、登入、修改密碼與登出四個功能。

先參照前輩與彼得潘的文章來理解功能要求。

在開始程式碼之前,重新在一個新的專案(SwiftPractice#108)設定Firebase專案新設與Cocoapods套件連接Firebase功能的安裝。這邊前置作業可參照我上一篇的練習了。這篇作業著重在實作的部分。

另外查看Firebase的Email的登入需求,只需要在Cocoapods新增

pod 'Firebase/Auth'

這項套件即可

前置環境設定好,基本上就可以來實作畫面跟程式碼了。

畫面佈局:

在開始思考畫面時,我在註冊、登入、修改密碼、登出這四個的內容中思考流程模式,我嘗試思考一個正常APP對於登入功能的流程需求會是如何,開始思考每個頁面的跳轉問題,畢竟有些頁面是需要在完成某些功能才能進入。假設還沒進入到使用者介面(登入成功),基本上就無法登出(這是有什麼問題嗎!?)與修改使用者的密碼,所以在實作畫面佈局前,我嘗試來思考註冊、登入、修改密碼、登出這四個功能他們能連結與不能連結的關係。

先上網查了流程圖軟體發現

支援中文跟網頁,要透過Mac iPad iPhone也可以,剛好Git前三個字跟Github一樣,就拿來試試看了,網路上也有很多流程圖心智圖支援軟體用自己習慣的就好。接著我理解我自己目前所認知的登入流程,如果有高手或是資深專家也可以對於這個流程提供更好的做法,非常感謝!!

接下來大致的流程規劃完成後來嘗試完成畫面佈局

從上面來對應流程圖的頁面的話會如下面所述

第1頁:登入頁面

第2頁:註冊頁面

第3頁:登入成功頁面

第4頁:修改密碼頁面

上面放在一起看比要能夠知道狀態與流程概念。

程式碼:

在程式碼開始之前,先將每個一View的Storyboard ID設定好,接下來將依靠Storyboard ID與dismiss完成頁面轉換

0 AppDelegate:

在這篇因為Firebase手把手教學中有提到需要在AppDelegate內新增Firebase功能與import Firebase。

所以在這裡就跟著Google的教學來輸入程式碼。

基本上有需要用的Firebase的功能頁面,就需要輸入下面程式碼

import Firebase

用來導入Firebase的功能。

1 Use To Everywhere自定義Function:

因為看完前輩的文章我有發現基本上在每個頁面都會需要跳出Alert的畫面,通常在一個頁面使用多次就在那個頁面寫一個Function節省程式碼,但我發現每一個頁面都會使用到UIAlert警告,與其每頁都寫不如找方法只寫一次就好,所以另外開一個Swift檔案寫四個頁面都會使用到的Function與其他資源。

1–0 自定義Array與Function

1–1透過extension UIViewController完成自定義Function

2 登入頁面LoginViewController.swift:

在這頁嘗試登入,或是註冊,弱勢登入遇到問題則跳出警告並詢問是否註冊,要註冊則跳到註冊頁。

3 註冊頁面SignInViewController.swift:

測試時發現在註冊完成的同時發現會直接登入,為了安全所以直接登出後跳轉頁面回到登入頁再次登入。

4 登入成功頁面 LoginSuccessViewController.swift:

單純顯示使用者名稱,並可登出或是更改密碼

5 修改密碼頁面 ChangePasswordViewController.swift:

透過就密碼再次登入嘗試,可登入代表就密碼正確,正確後才改新密碼。改完新密碼成功後會登出返回登入頁面。

測試結果:

透過Firebase新建帳號嘗試登入,並在還在登入時殺死APP後再執行APP

透過iPhone新註冊帳號後再次登入。

心得:

老實說從這個作業練習到的最多的反而不是Firebase的串接,從程式碼中可以發現到登入、註冊、改密碼、登出等都是大概一兩行就結束的事,但其他更多的是畫面跳轉的思考,UIAlert的顯示與顯示之後是否要進行其他「動作」(ex.登入失敗可按下UIAlert跳到註冊頁)。

在這個練習基本上沒有拉IBAction來完成畫面轉換,都是透過UIStoryboard ID來完成。

還有在登入頁要判斷是否已經登入時,我以為在viewDidLoad內判斷就好,發現沒有用,之前有知道VIew的生命週期,理解到viewDidLoad只是協助仔入APP畫面,後來嘗試幾個週期的選項發現要使用

viewDidAppear

的時候才做判斷,這也是這次很大的收穫,畢竟之前對於生命週期只有課程,沒有實在遇到狀況來排除。這算是很大的經驗。持續加油!!

Github:

--

--