前言

前面講了很多密碼相關的主題，但說穿了，要填密碼本身就是很麻煩的事，一方面容易忘記，一方面也會擔心網站是否安全，這時候一些值得信任的第三方登入就會是很方便的選擇。

OAuth 2.0 簡介

什麼是 OAuth 2.0？

OAuth 2.0 是一個授權框架（不是認證框架），它讓第三方應用程式可以在使用者授權下，存取使用者在其他服務（如 Google、Facebook）上的資源，而不需要知道使用者的密碼。

授權流程

1. 使用者點擊「使用 Google 登入」
2. 導向 Google 授權頁面
3. 使用者同意授權
4. Google 返回授權碼（Authorization Code）
5. 應用程式使用授權碼換取存取權杖（Access Token）
6. 使用存取權杖取得使用者資訊
7. 完成登入流程

為什麼要用授權碼再換 Token，而不是直接給 Token？因為授權碼是透過前端瀏覽器傳遞的（不安全），而換 Token 的動作是在後端伺服器進行的（安全），這樣可以避免 Token 被攔截。

Google Cloud Console 設定

步驟 1：進入 Google Cloud Console

1. 前往 Google Cloud Console
2. 用你的 Google 帳號登入

步驟 2：建立新專案

1. 點擊上方的專案選擇器（紅圈處）

2. 點擊右上角「新增專案」

3. 輸入專案名稱（例如：「我的第三方登入專案」），然後點「建立」

4. 等待一下下，建立完成後點「選取專案」

💡 提示：專案就像是一個容器，可以把相關的 API 和憑證都放在裡面管理。

步驟 3：啟用 Gmail API

為什麼要啟用 Gmail API？因為我們要透過這個 API 取得使用者的基本資料（姓名、Email 等）。

1. 點擊左側選單的「API 和服務」

2. 點擊「啟用 API 和服務」

3. 在搜尋框輸入「gmail」

4. 選擇「Gmail API」

5. 點擊「啟用」

⚠️ 注意：如果你的專案要取得使用者的 Email，一定要啟用這個 API，否則會拿不到資料！

步驟 4：設定 OAuth 同意畫面

這個步驟是設定當使用者要授權時，會看到什麼資訊。

1. 點擊左側「憑證」

2. 點擊「設定同意畫面」

3. 選擇「外部」（External），然後點「建立」

💡 說明：「外部」表示任何有 Google 帳號的人都可以登入；「內部」只限組織內的人使用。

4. 填寫 OAuth 同意畫面資訊

這邊要填的東西有點多，但大部分都是必填的：

應用程式資訊

• 應用程式名稱：我的網站（會顯示給使用者看）
• 使用者支援電子郵件：選擇你的 Email

應用程式標誌（選填）

• 可以上傳你的網站 Logo

應用程式網域（選填）

• 應用程式首頁：http://localhost:3000
• 應用程式隱私權政策連結：可以先不填
• 應用程式服務條款連結：可以先不填

已授權網域（選填）

• 開發階段可以先不填

開發人員聯絡資訊

• 輸入你的 Email

點「儲存並繼續」

5. 設定範圍（Scopes）

範圍就是你要跟使用者要哪些權限。

點「新增或移除範圍」

選擇以下範圍：

• .../auth/userinfo.email - 取得 Email
• .../auth/userinfo.profile - 取得基本資料（姓名、頭像）

點「更新」，然後「儲存並繼續」

6. 測試使用者（選填）

如果你的應用程式還在測試階段，可以加入測試使用者的 Email。但我們現在先跳過，直接點「儲存並繼續」。

7. 摘要

檢查一下設定，沒問題就完成了！

步驟 5：建立 OAuth 2.0 憑證

終於來到最後一步了！我們要建立 OAuth 2.0 的用戶端 ID 和密鑰。

1. 回到「API 和服務」→「憑證」

2. 點「建立憑證」→「OAuth 用戶端 ID」

3. 設定 OAuth 用戶端 ID

• 應用程式類型：選「網頁應用程式」

• 名稱：我的網站 OAuth 用戶端（隨便取）

4. 設定已授權的重新導向 URI

這是最重要的一步！Google 會檢查你的 callback URL 是否在這個清單裡。

點「新增 URI」，輸入：

http://localhost:3000/auth/google/callback

這個 URI 要跟你程式裡設定的完全一樣，包括：

• 協定（http/https）
• 網域
• Port
• 路徑

如果不一樣，Google 會直接拒絕你，然後你會看到 redirect_uri_mismatch 錯誤

5. 點「建立」

6. 複製憑證

建立完成後會跳出一個視窗，裡面有兩個重要的東西：

• 用戶端編號（Client ID）
• 用戶端密碼（Client Secret）

把這兩個東西複製起來！ 待會要用。

如果不小心關掉視窗，別擔心！可以在憑證列表裡找到，點進去就能看到了。

步驟 6：環境變數設定

把剛剛複製的憑證加到 .env 檔案：

# Google OAuth 設定
GOOGLE_CLIENT_ID=你的用戶端編號
GOOGLE_CLIENT_SECRET=你的用戶端密碼
GOOGLE_CALLBACK_URL=http://localhost:3000/auth/google/callback

# 前端網址（之後會用到）
FRONTEND_URL=http://localhost:3001

同時也要更新 .env.example：

# Google OAuth 設定
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_CALLBACK_URL=http://localhost:3000/auth/google/callback

# 前端網址
FRONTEND_URL=http://localhost:3001

絕對不要把 .env 檔案提交到 Git！確保 .gitignore 有包含 .env。

測試設定是否正確

雖然我們還沒寫 code，但可以先用一個簡單的方法測試 Google OAuth 設定是否正確。

使用 OAuth 2.0 Playground

Google 提供了一個測試工具：OAuth 2.0 Playground

1. 打開連結
2. 點右上角的齒輪圖示
3. 勾選「Use your own OAuth credentials」
4. 輸入你的 Client ID 和 Client Secret
5. 在左側選擇要測試的 API scope
6. 點「Authorize APIs」

如果設定正確，應該會跳出 Google 授權畫面

參考

• Google OAuth 2.0 文件