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

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

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

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


前置作業:

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

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 的下載,若有任何問題,都可在下面留言。

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.