Swift Practice # 109 Firebase初探 Google帳號登入

上一篇完成了Firebase的Email註冊帳號與登入功能,在對於思考登入流程時開始思考一些邏輯問題,算是在上個作業最大的收穫。

時代與時俱進,登入的方法也慢慢展現出不同方式,過往的一段時間內我們開始發現臉書等第三方提供了自身的帳號登入功能,漸漸的我們開始不再需要註冊帳號在某個應用程式內,只需要透過第三方帳號就能夠登入使用。這篇練習將透過Firebase的Google帳號登入功能來完成練習實作。

學習資源:

透過上面的文章大致閱讀完之後,開始跟著實作模仿Google 帳號登入功能。

照片來源:

前置準備:

首先一樣要先在Firebase建立專案與Xcode連動,另外安裝Cocoapods需要的Google套件。

Cocoapods套件安裝

基本上在這已經安裝好cocoapods,所以我們只需要將專案內新增套件就好,如果還沒安裝可以參照Swift Practice # 107。

一樣先安裝podfile,在這我發現一個方法,雖然不知道有沒有比較快。就是先找到專案的資料夾,接著打開Terminal 輸入 「cd空白鍵」後,直接拉專案的資料夾到Terminal就可以直接到指定的位置安裝了。

接著開啟podfile後輸入這次需要的套件內容

pod 'GoogleSignIn'
pod 'Firebase/Core'
pod 'Firebase/Auth'

存檔後執行

pod install   或是  
arch -x86_64 pod install (M1Air使用)

看到安裝完成畫面就算是安裝好套件了!

Firebase專案與Xcode連動。

接著前往Firebase建立新專案,建立完成後一樣點選iOS輸入Bundle ID

接著下載plist檔案後加入到專案

完成後重開專案(使用xcworkspace開啟)。接著老樣子前往專案的SceneDelegate.swift新增下方照片的兩行程式碼

回到Firebase專案內的Authentication將Gmail的登入功能打開。

點選後將上面紅框輸入專案名稱跟自己登入Firebase的Email後按下Save後就完成了。

再來點選專案內剛剛放入的GoogleService-Info.plist,找到第二行的REVERSED_CLIENT_ID

將後面的value複製,接著再到專案 > Info > URL Types > URL Schemes新增剛剛的REVERSED_CLIENT_ID的Value值。

輸入完成後前置作業基本上就算是完成了。

畫面佈局:

從上面的佈局來得知功能

第1頁:點選登入

第2頁:登入成功後使用者頁面

程式碼:

程式碼內容大致遵循下列Google官方說明教學

0 AppDelegate:

依照Google官方說明

在下列的AppDelegate新增open url與修改didFinishLaunchingWithOptions的程式碼

1 自定義Function:

因為會有兩個ViewController都使用到的Function,所以跟前一篇作業一樣另外開Swift檔來新增Function。

2 登入頁面 GoogleLoginViewController:

從上面的官方教學我發現到有兩種方法,一種是新增一個UIView後將Class改為GIDSignInButton後點選登入(方法2)。

另一種是自定義Button點選後登入(方法一)。剛好有不同的程式碼,但仔細分析發現兩者個概念差不多,所以我剛好對應在不同的登入方始來做使用。

另外一樣判斷是否有登入了,有登入的話會直接跳到使用者頁面。

3 登入後頁面 LoginSuccessViewController:

這頁單純跳轉頁面並擺放一個登出Button,按下登出後會再次跳回到登入的頁面(透過 GIDSignIn.sharedInstance.disconnect )。

測試結果:

心得與發現:

仔細看才發現Google在支援iOS於8月左右有更新過,所以過往的登入方法與程式碼基本上都不太能用,在這個部分有稍微卡關一下,後來看前輩的文章依照官方的方法來執行後就能成功了,算是一個不小的收穫!!持續加油!!

Github:

--

--