利用 Firebase Authentication 來實現註冊帳號和登入的功能

Firebase 是 Google 提供的後端服務，內容包羅萬象，像是帳號驗證、雲端資料庫、通知(Notification)、AdMob 廣告分析等等。法蘭克今天要來講解利用 Firebase 的 Authentication(帳號驗證) 服務來實現使用 email 註冊和登入的功能。

在以前倘若我們要實現一個帳號驗證的功能，就必須規劃複雜的流程，現在我們只要透過 Google Firebase 的 Authentication 的服務，則可透過 Filebase 所提供的簡單 API 來達到帳號註冊、登入、登出、密碼重設(寄送email的方式)等等的功能，讓我們更專注於前端 UI/UX 的設計。

順便題外話一下，之所以 Firebase 最近那麼火紅的原因之一就是因為 Facebook 在 2016 年突然宣關閉 Parse(行動開發平台服務) 的關係，所以逼得大部份的行動裝置開發者都得將服務遷移至 Firebase。

前置作業：

1. 了解如何利用 cocoaPods 載入第三方的套件，請參考法蘭克之前的文章。

【IOS - 透過CocoaPod來管理第三方的套件】

2. 建立登入、註冊、重設密碼三個頁面。

今天的重點在於 Firebase，所以若不想一一建立畫面的話，法蘭克已將僅有畫面的專案上傳至 GitHub，請直接下載即可。

待前置作業都準備完成後即可開始今天的重頭戲，以下為今日講解的大綱：

1. 註冊 Firebase 並在 Firebase 上建立專案
2. 實作註冊
3. 實作登入
4. 實作登出
5. 實作密碼重設

1. 註冊Firebase並在Firebase上建立專案

1.1 使用 Google 帳號登入 Firebase

1.2 在首頁點擊 Get started for free → 建立新專案

1.3 填入專案名稱和國家/地區後點選建立專案

1.4 選取將Firebase加入IOS應用程式

1.5 利用專案的 bundle id 和 Firebase 作連結

iOS 繫結 ID 欄位必須和 Xcode 專案上的 bundle id 一致，確認無誤後點選新增應用程式，此時將會下載 GoogleService-Info.plist 的檔案至本機上

1.6 將 GoogleService-Info.plist 複製至專案下

Google 很貼心的在接下來的步驟都會附上畫面，我們只要一步步照著做即可

1.7 安裝 Firsebase Authtication SDK

1.7.1 在專案下新增 Podfile 檔，並在 Podfile 加入以下載入 Firebase 套件的指令

# Uncomment this line to define a global platform for your project
 platform :ios, ‘9.0’
# Uncomment this line if you’re using Swift
 use_frameworks!
target ‘UseFirebaseToLogin’ do
 pod ‘Firebase/Core’
 pod ‘Firebase/Auth’
end

1.7.2 打開終端機將路徑切換至專案下，並將專案關閉後執行 pod install 安裝Firebase 套件

1.8 打開專案加入和 Firebase 連結的程式碼

1.8.1 在 AppDelegate import Firebase 的套件並在一啟動就和 Firebase 作連結

1.8.2 在所有的畫面都引入 Firebase 和 FirebaseseAuth 的套件

1.9 啟用 Firebase Authentication 的服務

1.9.1 在 console 首頁左欄點選 Authentication 再點選設定登入方式

1.9.2 點擊電子郵件/密碼

1.9.3 選擇啟用並點選儲存

2. 實作註冊

當完成第 1 步驟後，此時我們已建置好所有的畫面並開啟了 Firebase Authentication 的服務，專案也已和 Firebase 作連結，接下來要一一來實作按鈕的功能了。

在註冊頁面 RegisterViewController.swift 的 onClickRegister func 下加入以下程式碼

以上程式碼在第 2 行會先驗證有沒有輸入 email 和密碼，第8行則會透過 Firebase 的 createUser API 建立帳號，在此不管成功與否都會回傳一個閉包。第 11 行的意思是說假如有錯誤的話，則會彈出 Firebase 回傳的錯誤訊息，若無誤則會執行到第 17 行並彈出已登入的訊息。

ex：可以試著將密碼只 key 入三個字元則會執行到第 12 行。

若註冊成功，此時我們可至 Firebase 的後台查看是否有一個使用者的資料已被建立起來。

3. 實作登入

在登入頁面 ViewController.swift 的 onClickLogin func 下加入以下程式碼

以上程式碼在第 2 行會先驗證有沒有輸入 email 和密碼，第7行則會透過 Firebase 的 signIn API 登入，在此不管成功與否都會回傳一個閉包。第10行的意思是說假如有錯誤的話，則會彈出 Firebase 回傳的錯誤訊息，若無誤則會執行到第16行並彈出登入成功的訊息。

ex：可以試著將密碼故意 key 錯則會執行到第 11 行。

4. 實作登出

在登入頁面 ViewController.swift 的 onClickLogout func 下加入以下程式碼

以上程式碼在第 2 行會先驗證目前環境是否有執行登入的動作，第 7 行則會透過 Firebase 的 signOut API 登出。

5. 實作重設密碼

在重設密碼頁面 ResetViewController.swift 的 onClickLogin func 下加入以下程式碼

以上程式碼在第2行會先驗證有沒有輸入 email，第 7 行則會透過 Firebase 的 sendPasswordReset API 寄送密碼重設的信件至使用者輸入的信箱，並且可以透過信件內容的連結去重設密碼。

結論：

不曉得各位實作完的感想是否跟法蘭克一樣覺得這一切真是太棒了，只需要簡單的設定即可達成帳號登入、帳號登出、重設密碼的功能。不只 email 連 Google、Facebook、Twitter 都能和 Authentication 的服務結合。因為帳號的關係，法蘭克就不提供該專案 GitHub 的下載，若有任何問題，都可在下面留言。