前言

好久沒有寫文章了，這次就把幾種比較常見的 Firebase 快速登入給寫成文章

Firebase 建立專案的步驟就請參考

[PHP]Firebase phone auth 使用教學 中的 Step 1、Step 2

PS: Step 2 最後一步加入網域的部分就不需要了

此教學需要基本程度的 iOS 開發經驗

專案建立、基本元件(按鈕、輸入框、文字)、事件、Swift語法、Xcode操作、CocoaPod等

若是無經驗者會比較吃力

Step 1 (新增應用程式)

這次我們要在 Firebase 新增一個 iOS 的應用程式

選擇最左邊的 iOS icon

01

剩下的就按照畫面上的步驟做就好，這邊沒有難度

02
03

這邊可以在 Podfile 順便加入這次需要用到的套件

pod 'Firebase/Auth'

PS: 因為我有開啟統計，所以會需要安裝 Firebase/Analytics，如果只是要練習，安裝 Firebase/Auth 就可以

04
05

Step 2 (設定專案)

開啟 GoogleService-Info.plist 文件，找到 REVERSED_CLIENT_ID 的值後複製

07

新增一個 URL Types，將 REVERSED_CLIENT_ID 的值貼上去

08

Step 3 (畫面設計)

畫面上就很簡單，兩個輸入框加兩個按鈕

第一個輸入框是讓使用者輸入電話號碼(含國碼)

PS: 我自己有弄一個 國碼選擇器Plugin ，有需要的人可以自行取用

第二個輸入框是讓使用者輸入收到的驗證碼

第一個按鈕用來發送驗證碼

第二個按鈕用來驗證使用者輸入的驗證碼

06

Step 4 (程式碼)

寫程式碼前先確認一下流程

  1. 使用者輸入號碼
  2. 系統發送一個驗證碼到使用者手機上
  3. 使用者輸入驗證碼
  4. 系統驗證使用者輸入的驗證碼是否正確

以上是最基本的流程，沒有什麼UX設計，單純練習用

import UIKit
import Firebase

class ViewController: UIViewController {

    @IBOutlet weak var phoneNumber: UITextField!
    @IBOutlet weak var code: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func sendCode(_ sender: Any) {
        PhoneAuthProvider.provider().verifyPhoneNumber(phoneNumber.text!, uiDelegate: nil) { verificationID, error in
            if let error = error {
                // 發送驗證碼失敗
                print(error)
                return
            }
            
            // 將 ID 儲存到 UserDefaults 中，驗證時需要一起發送給 Firebase
            UserDefaults.standard.set(verificationID, forKey: "authVerificationID")
        }
    }
    
    @IBAction func verification(_ sender: Any) {
        guard let verificationID = UserDefaults.standard.string(forKey: "authVerificationID") else {
            // 沒有 ID 就跳掉不處理
            return
        }
        
        let credential = PhoneAuthProvider.provider().credential(
            withVerificationID: verificationID,
            verificationCode: code.text!
        )
        
        // 送出驗證
        Auth.auth().signIn(with: credential) { authResult, error in
            if let error = error {
                // 驗證失敗
                print(error)
                return
            }
            
            // 驗證成功後移除 ID
            UserDefaults.standard.set(nil, forKey: "authVerificationID")
            
            print(authResult!.user)
        }
    }
}

Step 5 (執行)

使用者輸入號碼點下按鈕後，會開啟一個 WebView，有可能會跳出驗證

09

之後手機會收到一封驗證碼簡訊，再次輸入後點下驗證

如果成功就可以在 Firebase 後台看到資料

10

結尾

說實話這樣把焦點放在前端開發，後台的部分就交給 Firebase 處理

真的可以省下非常多時間與精力，超適合少數人的小專案

若這邊教學有幫助到你的話~請多多分享轉發出去給更多的人知道

謝謝大家的觀看