哈囉大家好！
原本應該昨天要分享完前端登入處理的部分，沒想到昨天在做接下來的部分時有一些bug，
debug和查找資料時花了一些時間，
所以就變成今天整理分享了！
那就馬上開始吧～

3. 前端Google OAuth登入畫面和功能

接著就要在畫面上製作登入按鈕，官方angularx-social-login套件文檔中，
建議可以透過Google官方的「Generate HTML Code」來產生google account的登入按鈕～
只要透過填寫一些設定，就可以一鍵生成可以放入HTML的button程式碼。(如圖示）

註：填寫表格時有一項「Google用戶端ID」，這裡填寫的就是申請憑證時拿到的Client ID！

程式碼大致如下：

<div class="flex justify-center items-center p-6">
  <div
    id="g_id_onload"
    data-client_id="我的Client ID"
    data-context="signin"
    data-ux_mode="popup"
    data-login_uri="http://localhost:4200"
    data-auto_prompt="false"
    data-callback="handleCredentialResponse"
  ></div>

  <div
    class="g_id_signin"
    data-type="standard"
    data-shape="pill"
    data-theme="outline"
    data-text="signin_with"
    data-size="large"
    data-logo_alignment="left"
  ></div>
</div>

接著就可以在瀏覽器看到透過Google帳戶登入的按鈕：(feat.陽春的登入畫面）

現在HTML檔中已經包含了Google官方的GSI(Google Sign-In)按鈕結構，接下來要處理的是登入成功後，Google回傳的憑證(ID Token)。

當使用者點擊這個 GSI 按鈕並成功登入 Google 帳號後，Google不會重新導向頁面
（因為我設定了 data-ux_mode="popup"），而是會呼叫html按鈕中指定的function:
data-callback="handleCredentialResponse"。

接下來會需要完成：

1. 定義 function handleCredentialResponse()：這個function必須是全域可用的，它會接收Google 傳來的JWT(ID Token)。
2. 將ID Token傳給Angular：拿到ID Token後，需要通知Login Component登入成功，並將Token儲存或發送到後端。

明天要來把接下來的步驟繼續完成！（感覺時間不夠用ＱＱ）