前言
好久沒有寫文章了,這次就把幾種比較常見的 Firebase 快速登入給寫成文章
Firebase 建立專案的步驟就請參考
[PHP]Firebase phone auth 使用教學 中的 Step 1、Step 2
PS: Step 2 最後一步加入網域的部分就不需要了
此教學需要基本程度的 iOS 開發經驗
專案建立、基本元件(按鈕、輸入框、文字)、事件、Swift語法、Xcode操作、CocoaPod等
若是無經驗者會比較吃力
Step 1 (新增應用程式)
這次我們要在 Firebase 新增一個 iOS 的應用程式
選擇最左邊的 iOS icon
剩下的就按照畫面上的步驟做就好,這邊沒有難度
這邊可以在 Podfile 順便加入這次需要用到的套件
pod 'Firebase/Auth'
PS: 因為我有開啟統計,所以會需要安裝 Firebase/Analytics,如果只是要練習,安裝 Firebase/Auth 就可以
Step 2 (設定專案)
開啟 GoogleService-Info.plist 文件,找到 REVERSED_CLIENT_ID 的值後複製
新增一個 URL Types,將 REVERSED_CLIENT_ID 的值貼上去
Step 3 (畫面設計)
畫面上就很簡單,兩個輸入框加兩個按鈕
第一個輸入框是讓使用者輸入電話號碼(含國碼)
PS: 我自己有弄一個 國碼選擇器Plugin ,有需要的人可以自行取用
第二個輸入框是讓使用者輸入收到的驗證碼
第一個按鈕用來發送驗證碼
第二個按鈕用來驗證使用者輸入的驗證碼
Step 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,有可能會跳出驗證
之後手機會收到一封驗證碼簡訊,再次輸入後點下驗證
如果成功就可以在 Firebase 後台看到資料
結尾
說實話這樣把焦點放在前端開發,後台的部分就交給 Firebase 處理
真的可以省下非常多時間與精力,超適合少數人的小專案
若這邊教學有幫助到你的話~請多多分享轉發出去給更多的人知道
謝謝大家的觀看