哈囉大家好！
今天要來分享的是登入功能的設計，因為我想要可以直接透過Google帳號進行登入，所以要用Google OAuth來完成登入功能。
在正式進入實作部分前，要先簡單介紹一下「OAuth」！

什麼是OAuth?

OAuth是Open Authoration-開放授權的縮寫，是一種開放標準的授權框架或協定(protocol)。
透過OAuth, 一個應用程式(client)可以在不取得使用者帳戶密碼的前提下，獲取該使用者在另一個服務提供者(Resource Provider)中受保護資源的權限。
以我這次要實際操作的情境來舉例說明，我想要透過Google OAuth讓使用者可以用Google帳號來登入我的應用程式，並且我可以獲得使用者姓名、大頭貼...等相關資訊。

大部分大型應用程式都會提供「Google帳號登入」的功能，當我們嘗試透過某個帳號登入時，螢幕畫面會顯示「允許此應用程式存取您的ＯＯ資訊？」...等。當看到類似的提示時，表示正在使用OAuth。
容易搞混的有下面兩個概念：

1. OAuth的目的是「授權」，重點並不是「登入者是誰」，而是「登入者允許該應用程式做些什麼」。
   雖然過程中會透過使用者登入來確認身份，但OAuth的主要任務為「發放權限」！
2. OAuth是一種基於存取權杖(Access Token)的協議。
   存取權杖是一串特殊的資料，用來證明應用程式已經獲得使用者的授權。
   client端的應用程式會利用這個存取權杖來存取使用者的資源。通常權杖具有有效期限和範圍限制。

簡易的OAuth運作流程

1. 應用程式(client端）引導使用者到授權伺服器。
2. 授權伺服器會要求使用者登入（驗證身份），畫面會顯示一個同意頁面，確保使用者允許client存取資料，以及可以存取的資料範圍。
3. 使用者確定同意後，授權伺服器會把使用者倒回client應用程式，並在網址中附帶一個授權碼。
4. client會把這個一次性的授權碼，加上識別資訊，一起拿給授權伺服器來換取存取權杖。
5. 授權伺服器經過驗證確認沒問題後，就會把存取權杖發放給client。
6. client之後每次發送請求向資源伺服器存取資源時，都要帶著這個存取權杖。
7. 資源伺服器驗證確定權杖有效且有足夠權限，就會將要求的存取資源提供給client。

對OAuth有簡單的認識後，接著要開始實作了！

1. 建立前端Angular專案，完成簡單登入畫面

首先先從最簡單的介面開始製作，透過ng new <project-name> --no-standalone建立好Angular專案後，就可以寫一個簡單（陽春）的登入頁面了！（我建立的是ngModule專案）
因為登入頁面東西比較少，所以我直接把登入頁寫成一個component，預計這裡會有個按鈕，使用者可以透過按鈕來用Google Account進行登入。

2. 安裝套件：angularx-social-login

angularx-social-login這個套件是專門讓Angular專案做Google OAuth來使用的，必須透過npm來進行安裝（在前端檔案根目錄執行安裝指令：npm i @abacritt/angularx-social-login)

3. 在Google開發者平台(Google Cloud Console)建立憑證

下面是設置憑證的簡單流程：

1. 首先先登入Google Cloud Console，建立一個新的專案。
2. 進入主頁後，選擇「API與服務」-> 「憑證」。
3. 點擊上方「建立憑證」-> 選擇「OAuth用戶端ID」。
4. 之後在Application Type選擇Web Application。
5. 設定授權的JavaScript來源
   （目前因為開發中，所以設定為https://localhost:4200, 4200為Angular專案預設的port)
6. 目前先暫時不設置授權的重新導向URI。
7. 點擊「建立」，就會獲得Client ID。

註：最後拿到的Client ID是用來讓Google識別我的應用程式，用來配置第三方的登入套件，讓Google知道是哪個應用程式在請求授權。這個Client ID會被用來設定GoogleLoginProvider。
在OAuth流程中提到的Access Token(存取權杖）則是使用者登入成功後，應用程式用來存取保護資源的動態授權憑證。

平常用Google帳號登入其他應用程式時覺得非常方便，沒想到背後有這些過程和檢驗步驟～
明天要來分享實作的程式碼，希望BUG不會爆炸
那就明天再見啦～～