在 Day 14，我們成功地將各個元件組合成一個精美的登入表單。但一個沒有實際驗證功能的登入頁。今天，我們將踏入使用者驗證的領域，修煉「Authの呼吸・壹之型：SSO整合」。
在正式動手前，讓我們先回答兩個基本但至關重要的問題：什麼是 SSO？以及，我們為什麼要選擇 Google 作為我們的 SSO ？
SSO，全名為「單一登入」（Single Sign-On），是一種允許使用者使用「單一一組」登入憑證（例如：Google 帳號、Facebook 帳號），來登入多個不同應用程式或網站的驗證機制。
你可以把它想像成一張「萬能鑰匙」。過去，你每到一個地方（網站），就需要一把專屬的鑰匙（一組新的帳號密碼）。時間久了，你的鑰匙圈變得又大又重，還常常找不到對應的鑰匙。而 SSO 就是一張萬能鑰匙，你只需要保管好這一張，就可以輕鬆打開所有支援它的門。
對使用者而言，好處顯而易見：
對開發者與企業而言，導入 SSO 也有莫大誘因：
在眾多 SSO 供應商中（如 Facebook, Line...），我們選擇 Google 作為第一個整合的對象，這背後有一個非常明確且關鍵的理由：我們公司本身就是採用 Google Workspace，每位員工在入職時都會配發一組公司專屬的 Google Email (@your-company.com)。
這使得 Google SSO 從一個「選項」變成了「標準答案」。基於這個前提，整合 Google 登入能帶來以下核心優勢：
理解了這個選擇背後的商業與管理邏輯後，接下來，讓我們深入了解實現這一切的技術核心——OAuth 2.0 授權流程。
OAuth 2.0 是一個關於「授權」的開放標準。它允許使用者授權一個第三方應用程式（例如我們的銷售系統）去存取他們在另一個服務（例如 Google）上的特定資源，而無需將使用者名稱和密碼直接提供給該第三方應用程式。
我們將採用其中最常見且安全的流程：「授權碼流程 (Authorization Code Flow)」。這個流程有點像這樣：
在這個流程中，我們的前端（Vue App）主要負責 1 到 3 步，也就是引導使用者完成授權並取得「授權碼」。而 4 到 6 步 則是後端的職責。
參考內容：30 天與九頭蛇先生做好朋友 系列 第 3 篇 - OAuth 2.0 授權流程
在開始寫程式碼之前，我們必須先向 Google 註冊我們的應用程式，以取得一組專屬的「用戶端 ID (Client ID)」。
Google Identity Services API。http://localhost:5173 (或您 Vite 專案的實際 Port)。http://localhost:5173。有了 Client ID 後，我們需要在專案中進行兩項設定。
1. 引入 Google Identity Services Script
我們需要在 index.html 的 <head> 區塊中，加入 Google 的官方 JavaScript 函式庫。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<!-- Google Identity Services -->
<script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
async defer 屬性可以確保這個腳本的載入和執行不會阻塞頁面的渲染。
2. 設定環境變數
為了不將敏感的 Client ID 直接寫在程式碼中，我們使用 Vite 提供的環境變數功能。
在專案根目錄下建立一個 .env 檔案，並將您的 Client ID 填入：
# /.env
VITE_GOOGLE_CLIENT_ID="YOUR_GOOGLE_CLIENT_ID.apps.googleusercontent.com"
重要：這邊Vite 要求客戶端可見的環境變數必須以 VITE_ 開頭。
至此，所有的前置作業都已完成！我們已經理解了 OAuth 的流程，並取得了必要的憑證。在下篇，Day 16：[Authの呼吸・貳之型] SSO整合 - Google OAuth登入實作(下)，用程式碼實現這一切。
iThome鐵人賽
看影片追技術