Xcode-APP加入Google(第三方)登入功能

春麗 S.T.E.M.
12 min readApr 9, 2023

--

目錄

⦿ 第三方登入
⦿ Google Identity
⦿ URL Types
⦿ CocoaPods
⦿ SPM
⦿ 配置程式碼

第三方登入

Three-Party Login,當你建置了一個應用程式並在 App Store 上架了,如果人家不認識這個 APP,你又設定了繁瑣的註冊登入流程,會減少別人使用 APP 的意願,那麼,有個好方法來增加 APP 的流量 — — 採用第三方登入。

Facebook、Google 的使用者非常多吧?如果 APP 的登入註冊,可以用 Google 的登入來取代,就起碼減少繁瑣的註冊了,這篇文章帶你一步步實作 Google 的登入註冊功能吧!

繼續閱讀|回目錄

Google Identity

首先,你得進到 Google Sign-in 開始的網頁,這網頁是 Google Developers 下的 Google Identity,拉到下方取得 OAuth 用戶端 ID 的地方如下:

點選建立 OAuth 用戶端 ID,會出現 Configure a project for Google Sign-In。

你可以看到既有專案,但在這邊我們應該 Create a new project。

接著,我們一樣去找到 Xcode 中,專案的 Bundle Idenfifier 並填入。

成功後出現如下:

如果點選 DOWNLOAD CLIENT CONFIGURATION,會得到一個 XML 的文件檔,打開如下:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN"
"http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CLIENT_ID</key>
<string>458367808486-016eu1a5v69jpgltm0runkj16tsfj7vd.apps.googleusercontent.com</string>
<key>REVERSED_CLIENT_ID</key>
<string>com.googleusercontent.apps.458367808486-016eu1a5v69jpgltm0runkj16tsfj7vd</string>
<key>PLIST_VERSION</key>
<string>1</string>
<key>BUNDLE_ID</key>
<string>com.demo_AnExample</string>
</dict>
</plist>

先將 REVERSED_CLIENT_ID 複製起來:

com.googleusercontent.apps.458367808486-016eu1a5v69jpgltm0runkj16tsfj7vd

後面會用到。

關於 XML,同樣地,可以參考之前的文章

這個檔案就像前篇文章(以 FB 第三方登入)中的 Info.plist 檔一樣,如果你要使用 Firebase 服務,以 FB、Google 登入的話,GoogleSignIn 這些資訊不是放在 Info.plist,而是需要放在 GoogleService-Info.plist 檔裡面。

Source Code

不過單純使用 Google 登入的情況下,Google Identity 要我們加入如下:

<key>GIDClientID</key>
<string>YOUR_IOS_CLIENT_ID</string>
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
</array>
</dict>
</array>

我們在 Info.plist 中加入這段程式碼,其中應該換掉的是 YOUR_IOS_CLIENT_IDYOUR_DOT_REVERSED_IOS_CLIENT_ID,分別是剛才下載的檔案裡的 CLIENT_ID 及 REVERSED_CLIENT_ID 的 value

如果你有跟著前篇文章加入 FB 登入功能的話,在 Info.plist 及 TARGETS Info 會長成下面這樣:

TARGET Info

URL Types

注意!這步驟跟前段 Source Code 是一樣的。

在 Xcode 專案,我們到 TARGETS => Info => URL Types,找到下方 + 的按鈕如下:

按下 + 後,還記得前面複製的 REVERSED_CLIENT_ID 嗎?我們將這個反轉的 Client ID 貼到 URL Schemes 裡。

這項操作即是 Google Identity 教學的下面這段:

回到這段開頭,若你點選取得現有的 OAuth 用戶端 ID,就會跳到 Google CloudAPI 和服務憑證頁籤如下:

可以看到剛才創建的專案 ID,我們再點專案進去。

可以看到 OAuth 2.0 用戶端 ID 有兩項被自動加入了,一個是 for iOS,一個是 for 網頁應用程式

繼續閱讀|回目錄

CocoaPods

還沒完,在這邊我們要用 CocoaPods 加入 GoogleSignIn 套件,而這個用法請參照老文章的這個段落

SPM

當然,如果你是用 SPM,搜尋下面這段網址:

https://github.com/google/GoogleSignIn-iOS/

就完成了。

繼續閱讀|回目錄

配置程式碼

登入

這邊簡單示範程式碼來達成 GoogleSignIn 的功能。

首先,在你的登入頁面 import GoogleSignIn,在 Google Login Button 中加入 IBAction 如下:

@IBAction func googleBtnTapped(_ sender: Any) {
let signInConfig = GIDConfiguration(clientID: "1016905938526-96mub16ag1ep1a37mdfui8qibghsu0a2.apps.googleusercontent.com")

GIDSignIn.sharedInstance.signIn(with: signInConfig,
presenting: self) { user, error in
guard error == nil else { return }
guard let user = user else { return }
print(user.profile?.email ?? "none of email.")
print(user.profile?.name ?? "none of name.")
print(user.profile?.givenName ?? "none of givenName.")
print(user.profile?.familyName ?? "none of familyName.")
self.performSegue(withIdentifier: "LoginToWelcome", sender: nil)
}
}

Client ID 即是你在 Google Identity 中拿到的 ID,因為我們在 GoogleService-Info.plist 及網站配置過這個 Client,就以此檢查登入狀態,在取得 user 時,我們可將 user 的資料印出來,實際畫面如下:

那麼,選擇某一個 Google 帳號,就會在 debug 區看到帳號相關訊息:

myemail@gmail.com
myFirstName myLastName
myFirastName
myLastName

登出

登出的部分,參考前篇文章的這個段落,Logout Button 連結 unwindSegue 的 IBAction 如下:

    @IBAction func unwindToViewController(_ unwindSegue: UIStoryboardSegue) {        
// FB Logout
let manager = LoginManager()
manager.logOut()
// Google Logout
GIDSignIn.sharedInstance.signOut()
}

如果你只有 GoogleSignIn,加入 GIDSignIn.sharedInstance.signOut() 這段即可。

檢查登入狀態

但還沒結束,同樣地,我們不希望使用者每次打開 APP 都要重新點選 Google Login Button 來登入,所以我們必須檢查使用者的登入狀態,來決定是否直接跳轉歡迎頁面

    override func viewDidAppear(_ animated: Bool) {
// 檢查 FB Login token 決定是否登入
if let token = AccessToken.current, !token.isExpired {
performSegue(withIdentifier: "LoginToWelcome", sender: nil)
}

// 檢查 Google Login 決定是否登入
GIDSignIn.sharedInstance.restorePreviousSignIn { user, error in
if error != nil || user == nil {
print("Stay at or Come back to Login Page.")
} else {
self.performSegue(withIdentifier: "LoginToWelcome", sender: nil)
}

}

}

如果你只有 Google Login,那在 GIDSignIn.sharedInstance.restorePreviousSignIn { } 裡處理你的登入邏輯即可,這邊在 viewDidAppear() 中加入檢查判斷,是因為我的登入頁面是 APP Launch 後跳轉的第一頁,我想讓這頁總是出現

但實際上,你應該在 AppDelegate 中的 func application didFinishLaunchingWithOptions 中去檢查,讓使用者打開 APP 時,若曾經登入過,且有效的狀態下,直接跳轉到操作 or 歡迎頁面

那麼,再檢視一次,你的登入是不是如下:

--

--

春麗 S.T.E.M.
春麗 S.T.E.M.

Written by 春麗 S.T.E.M.

Do not go gentle into that good night, Old age should burn and rave at close of day; Rage, rage, against the dying of the light.

No responses yet