如何申請google oauth

| 2026-06-252026-06-25

申請 Google OAuth 其實不難，主要是在 Google Cloud Console 中完成。不論你是要開發網站登入、串接 Google Drive 還是發送 Gmail，流程都大同小異。

以下為你整理出最流暢的申請 4 大步驟：

第一步：建立新專案

前往 Google Cloud Console。
登入你的 Google 帳號。
點擊左上角的專案下拉選單，選擇 「新建專案」 (New Project)。
輸入專案名稱（例如：MyAwesomeApp），然後點擊 「建立」。

第二步：設定 OAuth 同意畫面 (OAuth Consent Screen)

這是使用者在登入你的 App 時會看到的授權畫面，必須先設定它。

點擊左側選單的 「API 和服務」 > 「OAuth 同意畫面」。
選擇 User Type：
- 外部 (External)： 開放給所有 Google 帳號（一般應用程式選這個）。
- 內部 (Internal)： 僅限你 Google Workspace 組織內的成員（企業內部工具選這個）。
填寫基本資料：應用程式名稱、使用者支援電子郵件 以及 開發人員聯絡資訊，完成後點擊「儲存並繼續」。
範圍 (Scopes)： 設定你想拿到的權限（如 email, profile）。初次測試可以先不選，直接跳過。
測試使用者 (Test Users)： 如果你的專案還在「測試中」階段，必須在這裡新增你自己的測試 Email，否則其他帳號會無法登入。

第三步：建立憑證 (Credentials) 取得密鑰

這一步會生成你的 Client ID 和 Client Secret。

點擊左側選單的 「憑證」 (Credentials)。
點擊上方的 「+ 建立憑證」 > 「OAuth 用戶端 ID」。
選擇你的 應用程式類型（例如：網頁應用程式、Android、iOS 等）。
填寫核心網址（以網頁應用程式為例）：
- 已授權的 JavaScript 來源： 你的網站首頁（例如：http://localhost:3000 或 https://yourdomain.com）。
- 已授權的重新導向 URI： 使用者登入成功後，Google 把 Code 送回你網站的後端路由（例如：http://localhost:3000/auth/google/callback）。※ 注意：這裡一定要設定精準，否則會噴 redirect_uri_mismatch 錯誤。
點擊 「建立」。

💡 恭喜！ 畫面上會跳出你的 用戶端 ID (Client ID) 和 用戶端密鑰 (Client Secret)。請立刻複製並妥善保管，密鑰絕對不能外流！

第四步：切換為「生產模式」（選填）

在開發測試階段，你的專案狀態會是「測試中 (Testing)」，只有你在第二步設定的測試小夥伴能登入，且可能會有不安全應用的警告。

當你的 App 準備好上線時，回到 「OAuth 同意畫面」，點擊 「發布應用程式」 (Publish App) 切換為正式生產模式。
備註：如果你申請了敏感權限（如讀取使用者的 Gmail 私訊），Google 會需要人工審查，可能需要幾天到幾週的時間。

我有測試環境 domain name 與正式環境 domain name 要申請2組 OAuth 2.0 用戶端 ID 嗎? 還是同一組ID即可。

建議申請「2 組獨立的 OAuth 2.0 用戶端 ID (Client ID)」。

雖然在技術上，Google 允許你在同一組 Client ID 的「已授權的重新導向 URI」中，同時填入測試環境與正式環境的網址，但非常強烈建議分開申請。原因如下：

1. 安全性考量（最重要的原因）

憑證外流風險： 測試環境通常防護較弱，可能會有較多開發人員、測試人員接觸到設定檔。如果測試環境的 Client Secret（用戶端密鑰）不小心外流，且你兩邊用同一組 ID，攻擊者就能利用外流的密鑰去染指或偽造正式環境的登入請求。
網址白名單污染： 萬一測試環境網址被惡意劫持或存在漏洞，它與正式環境共享同一個 OAuth 信任圈，會帶來額外的安全隱患。

2. Google 審查與「發布狀態」限制

Google Cloud 專案的 OAuth 同意畫面有分兩種狀態：

測試中 (Testing)： 只有白名單內的「測試使用者」可以登入，且登入時會跳出「未經驗證的應用程式」警告。
生產模式 (In Production)： 開放給所有 Google 帳號登入。如果使用了敏感權限（Scopes），還需要通過 Google 的人工驗證。

如果你只用一組：

當你的專案為了正式環境切換成「生產模式」並送交審查時，如果你的網址白名單裡還夾帶了 project-name.test.example.com.tw（而且通常測試環境在外網無法被 Google 審查官順利連上），這可能會導致你的 Google 審查被拒絕 (Rejected)，因為 Google 要求生產模式下的網址必須是公開、真實且符合規範的。

最佳實作做法 (Best Practice)

為了架構清晰與安全，你可以選擇以下兩種配置方式：

方案 A：在同一個 Google Cloud 專案下，建立 2 個 Client ID（推薦，最方便）

在同一個專案的「憑證」頁面中，點擊兩次「建立憑證 > OAuth 用戶端 ID」：

第一組 ID（命名：Project Name – Test）：
- 重新導向 URI 填：https://projectname.test.example.com.tw/oauth2/callback
第二組 ID（命名：Project Name – Prod）：
- 重新導向 URI 填：https://projectname.example.com.tw/oauth2/callback

這樣你在程式碼的環境變數（.env）中，測試機就讀取測試的 ID/Secret，正式機就讀取正式的 ID/Secret，彼此互不干擾。

方案 B：建立 2 個獨立的 Google Cloud 專案（最嚴謹）

專案一：PorjectName-Test（專案狀態保持在 Testing，方便開發隨時測試）
專案二：PorjectName-Prod（專案狀態切換為 Production，專門用來跑正式上線與 Google 審查流程）

總結： 為了維護系統的安全防線與後續維護的便利性，請務必為測試與正式環境分開申請獨立的憑證！

應用程式是哪種類型, Vue 3 + Vite

既然你的前端技術棧是 Vue 3 + Vite，在架構設計上你首先需要釐清一個關鍵問題：你的應用程式有沒有後端（Backend，如 Node.js, Python, Go）？

這會直接決定你如何實作 Google OAuth。以下為你說明這兩種情境與實作方式：

情境一：有後端（推薦，最安全）

這是最正統的做法。Vue 3 只負責顯示「登入按鈕」，使用者點擊後會引導到 Google 登入，登入成功後 Google 會把驗證碼（Authorization Code）傳給你的後端，由後端去跟 Google 交換 Token，並簽發你網站自己的 JWT 給 Vue 3。

在這種模式下，你的 OAuth 2.0 用戶端 ID 類型要選擇：「網頁應用程式」 (Web Application)。

Vite / Vue 3 前端實作步驟：

目前社群上最推崇、封裝最完整的套件是 vue3-google-signin。

安裝套件：Bash

npm install vue3-google-signin

在 main.js 或 main.ts 中初始化：

import { createApp } from 'vue'
import App from './App.vue'
import GoogleSignInPlugin from 'vue3-google-signin'

const app = createApp(App)

app.use(GoogleSignInPlugin, {
  // Vite 的環境變數必須以 VITE_ 開頭
  clientId: import.meta.env.VITE_GOOGLE_CLIENT_ID,
})

app.mount('#app')

在畫面上建立登入按鈕 (Login.vue)：

<script setup>
import { GoogleLogin } from 'vue3-google-signin'

const handleLoginSuccess = (response) => {
  // 這裡會拿到 Google 回傳的 code 或 credential
  console.log("Google 登入成功:", response);

  // 【關鍵】將這個 response (含 code) 用 axios 傳送給你的後端
  // axios.post('https://projectname.example.come.tw/api/auth/google', { code: response.code })
}

const handleLoginError = () => {
  console.error("Google 登入失敗")
}
</script>

<template>
  <div class="login-container">
    <h2>入口網登入</h2>
    <GoogleLogin :callback="handleLoginSuccess" :popup-type="'CODE'" @error="handleLoginError" />
  </div>
</template>

情境二：純前端（SPA 單頁應用，無後端）

如果你的 Vue 3 是一個完全靜態的網站，沒有任何自己的後端資料庫，單純只想確認「他是誰」或者想在前端呼叫 Google API（例如讀取他的 Google Calendar）。

在這種模式下，你的 OAuth 2.0 用戶端 ID 類型一樣選擇：「網頁應用程式」。但流程會走「隱含授權 (Implicit Flow)」，直接在前端取得 access_token。

⚠️ 安全警告： 因為純前端沒有秘密可言，你的 Client Secret 絕對不能寫在 Vue 3 的原始碼或 .env 裡（因為打包後任何人都能看光）。在 Google Console 建立憑證時，這種模式通常不需要用到 Client Secret。

前端設定差異：

如果你是用上面提到的 vue3-google-signin，在按鈕上就不要加 :popup-type="'CODE'"，它預設會直接在前端回傳一串 JWT（身分憑證），你可以直接解開它來取得使用者的 Email 和姓名：

JavaScript

import { decodeCredential } from 'vue3-google-signin'

const handleLoginSuccess = (response) => {
  // 直接在前端解密 Google 回傳的使用者資訊
  const userData = decodeCredential(response.credential)
  console.log("使用者資料:", userData) // 包含 email, name, picture
}

💡 搭配你上一題的測試/正式環境，Vite 該如何設定？

因為你有兩個環境，請在 Vue 3 專案根目錄建立兩個環境變數檔案：

.env.development (測試環境用)程式碼片段VITE_GOOGLE_CLIENT_ID=你的測試環境_CLIENT_ID.apps.googleusercontent.com
.env.production (正式環境用)程式碼片段VITE_GOOGLE_CLIENT_ID=你的正式環境_CLIENT_ID.apps.googleusercontent.com

當你執行 vite preview 或 vite build 時，Vite 就會自動根據環境抓取正確的 Client ID，完美對應到正式環境與測試環境了！

Max的程式語言筆記