技術筆記-iOS實戰004-整合Firebase，使用它的Google SignIn做身份認證
需求情境：
為了讓多人使用 App，必須有驗證程序，以識別特定使用者，存取各自擁有的資源。
解決方案：
引用 google 所提供的雲端服務平台 Firebase，其中有多種驗證功能可選用。基於個人對 google 的偏愛，決定先採用 google signin 的方法，實作 login logout，並用 idToken 作為與後台 api server 溝通的驗證依據，測通呼叫流程。
實作步驟：
必須先在 Firebase 的 管理後台 準備相關資源：建立專案，在專案內建立應用，應用有很多種類型，選擇 iOS 類，各類別有相對應的 sdk 和文件。除了身份驗證以外，Firebase 作為一個應用系統的「容器」，提供非常多樣的功能，App 連上它就像擁有了一座寶庫成為堅實的後盾，真令人興奮！但這屬於後台技術故不在此詳述，若有合適的機會，再另闢新的寫作系列。
在 iOS 方面的實作工作，首先要從後台下載一個準備好的參數檔「GoogleService-Info.plist」，加到 Swift 專案內。然後用 Xcode 的套件管理員安裝 sdk，套件存放的位置在此：https://github.com/firebase/firebase-ios-sdk；此套件提供基礎的 email and password 驗證方式。因我期望用 google account 的認證方式，故還要再加上 GoogleSignIn 套件，有不同的安裝位址，均可從文件中取得。
套件安裝完成後，進到程式開發階段，需要從一個 iOS App 的程式入口開始做起，就是 appNewmanApp.swift，其中 appNewmanApp 為 App 的名稱。其中定義了一個 AppDelegate 的 class，透過特定的宣告語法，讓相關物件在程式啟動的初期就載入，在整個執行期間都能發揮效用。這些語法與物件有點高深莫測，是架構設計者最厲害的技術結晶，老實講我並不十分了解，只能先照文件依樣葫蘆。而 isRunningTests 的判斷機制是為了讓 Xcode 開發過程的 preview 不要出錯。
import SwiftUI
import SwiftData
import FirebaseCore
import FirebaseAuth
import GoogleSignIn
class AppDelegate: NSObject, UIApplicationDelegate {
func application(_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
if !isRunningTests {
FirebaseApp.configure()
}
return true
}
func application(_ app: UIApplication,
open url: URL,
options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
return GIDSignIn.sharedInstance.handle(url)
}
var isRunningTests: Bool {
return ProcessInfo.processInfo.environment["XCTestConfigurationFilePath"] != nil
}
}
@main
struct appNewmanApp: App {
@UIApplicationDelegateAdaptor(AppDelegate.self) var delegate
@StateObject private var authViewModel = AuthViewModel()
var body: some Scene {
WindowGroup {
ContentView()
.environmentObject(authViewModel)
}
}
}
接下來定義一個 class，import 相關的函示庫後，必須注意繼承 ObservableObject，並將其最重要的兩個屬性，就是登入狀態，和當登入成功後所取得的 User 物件，標示為 Published，以便在系統的任何一個畫面都可以使用：
import FirebaseCore
import FirebaseAuth
import GoogleSignIn
class AuthViewModel: ObservableObject {
@Published var user: User?
@Published var isSignedIn: Bool = false
}
在此 class 裡面定義 signIn, signOut 的方法，依循「官方文件」按部就班一路操作。
func signInByGoogle() {
guard let clientID = FirebaseApp.app()?.options.clientID else { return }
let config = GIDConfiguration(clientID: clientID)
GIDSignIn.sharedInstance.configuration = config
guard let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
let rootViewController = windowScene.windows.first?.rootViewController
else {
print("There is no root view controller!")
return
}
GIDSignIn.sharedInstance.signIn(withPresenting: rootViewController) { [unowned self] result, error in
if let error = error {
print("Error signing in: \(error.localizedDescription)")
return
}
// 取得外部 Google 系統所定義的 User 物件
guard let googleUser = result?.user,
let idToken = googleUser.idToken?.tokenString
else {
return
}
let credential = GoogleAuthProvider.credential(withIDToken: idToken,
accessToken: googleUser.accessToken.tokenString)
// 用 Google User 的 credential 取得 Firebase 系統所定義的 User
Auth.auth().signIn(with: credential) { result, error in
if let error = error {
print("Firebase sign in error: \(error.localizedDescription)")
return
}
self.user = result?.user
self.isSignedIn = true
}
}
}
func signOut() {
do {
try Auth.auth().signOut()
GIDSignIn.sharedInstance.signOut()
self.user = nil
self.isSignedIn = false
} catch let signOutError as NSError {
print("Error signing out: \(signOutError.localizedDescription)")
}
}
有一個細節必須特別注意，就是在專案屬性中的 Info 頁籤中，有一個 URL Types，必須加入一筆資料，資料來源是 GoogleService-Info.plist 中的 REVERSED_CLIENT_ID 的值。透過這個 URL 設定，讓專案允許 google 這個外部服務，更動專案內資料以執行我們所期望的 signIn, signOut 相關任務。
這種跨系統整合通常藏有非常多的坑，同樣名稱為 User 的物件卻有兩種，經由 google signIn 首先取得的是 google 系統所定義的 User 物件，無法直接使用於我們的應用系統，需要用它的 idToken and accessToken 取得 credential，再傳給 Firebase SDK 的 signIn 程序，才能取得 Firebase 所定義的 User 物件，用於程式中的畫面和後台溝通。運作機制有點複雜，最好仔細思考建立較完整的知識架構，否則後續的維護工作將是令人恐懼的！因為不管 iOS 端的升級，或是 google 端的升級，都會影響到程式結構，維護工作是無法逃避的。
最後來到畫面的部分，基本的元素就是一個 Sign In 按鈕，當 Sign In 成功之後顯示使用者頭像，並實作一個到後台取資料的程序，完成畫面如下，左一為未登入狀態，右一登入完成狀態，中間的登入過程為 Firebase SDK 和 Google 認證服務後台所主控，客製程式無法介入，如此也表示安全性由 google 官方所確保。若採用 email and password 登入，這些密碼資料是會經過我們的程式的，要讓使用者信任我們程式開發單位，不會惡意使用，這是難的，此問題還是丟給 google 處理比較妥當。
此畫面的程式命名為 LoginView.swift，主 Layout 和狀態變數列出如下：
@EnvironmentObject var authViewModel: AuthViewModel
@State var imageURL: URL?
@State var idToken : String = ""
@State var portfolioList: [Portfolio] = []
var body: some View {
if authViewModel.isSignedIn {
VStack {
Text("Welcome, \(authViewModel.user?.email ?? "")!")
if let imageURL = imageURL {
AsyncImage(url: imageURL) { image in
image
.resizable()
.scaledToFit()
.frame(width: 100, height: 100)
.clipShape(Circle())
} placeholder: {
ProgressView()
.frame(width: 100, height: 100)
}
} else {
Text("Invalid URL")
}
HStack {
Button(action: {
authViewModel.signOut()
}) {
Text("Sign Out")
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
}
Button(action: {
getPortfolioList()
}) {
Text("持 token 向後台取資料")
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
}
}
VStack {
ForEach(portfolioList) { item in
Text(item.portfolioName)
}
}
}
.padding()
.onAppear {
showPhoto()
}
} else {
VStack {
Button(action: {
authViewModel.signInByGoogle()
}) {
Text("Sign In")
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
}
}
.padding()
}
}
當 Sign In 成功時，接續執行 showPhoto()，因圖像顯示並不是靜態存在的，如同先前預先匯入專案 Asset 檔案中那樣，而是搭配畫面的 AsyncImage 元件，動態指定位址。另外我們也順便把 idToken 載入到畫面的狀態變數，以便下一個動作需要使用，就是向後台取資料，這也要用非同步的程式寫法。
func showPhoto() {
if authViewModel.isSignedIn {
imageURL = authViewModel.user?.photoURL
Task {
idToken = try await getIdToken(authViewModel: authViewModel)
}
}
}
最後是用 idToken 去後台取資料的部分，先用一個簡單的資料結構 Model1 承接，今天的重點只在測通。
func getPortfolioList() {
Task {
let data = try await fetchApiDataAsync(urlString: "https://xxxserver/portfolioList", idToken: self.idToken)
let decoder = JSONDecoder()
let xx = try decoder.decode(Model1.self, from: data)
self.portfolioList = xx.portfolio
}
}
struct Portfolio: Codable, Identifiable {
let portfolioId: Int
let portfolioName: String
var id: Int {
portfolioId
}
}
struct Model1: Codable {
let message: String
let portfolio: [Portfolio]
}
fetchApiDataAsync 因為多傳 idToken，寫法有小幅更改。至於後台怎麼解開 idToken 則不在本文範圍。
func fetchApiDataAsync(urlString: String, idToken: String) async throws -> Data {
guard let url = URL(string: urlString)
else {
throw MyError.FileUrlError
}
var request = URLRequest(url: url)
request.httpMethod = "GET"
request.setValue("\(idToken)", forHTTPHeaderField: "Authorization")
let (data, response) = try await URLSession.shared.data(for: request)
guard let httpResponse = response as? HTTPURLResponse, httpResponse.statusCode == 200 else {
throw MyError.HttpRequestError
}
return data
}
以上一個普通的功能，所費工夫不少，寫起來也是又臭又長，最終完成了，就是爽快。
Newman 2024/6/23
導覽頁：紐曼的技術筆記-索引
