跳到主要內容

串接教學

讓客戶用自己的 Google 帳號登入

每個客戶用自己公司的 Google(Workspace 或 Gmail)登入系統。以下在 Google Cloud Console 上的操作,我們一步一步帶你做,約 15 分鐘。

關於本頁的畫面:下方圖片和影片都是我們用網頁重畫的「示意畫面」,只標示欄位名稱與按鈕位置;官方網站的實際畫面、語言與選單位置可能不同,請以官方為準,每一步都附官方說明連結。

步驟依官方文件整理,查詢日期 2026-10-21。Google、Google Cloud 為 Google LLC 的商標,本站與其無隸屬關係。

事前準備
一個能登入 Google Cloud Console 的 Google 帳號(建議用公司管理員的 Workspace 帳號);控制台客戶頁「Google 登入」卡片已能開啟,卡片上會列出要貼到 Google 的兩種網址。
  1. 1建立(或選用)一個 Google Cloud 專案

    用要「擁有」這個登入設定的 Google 帳號(建議是公司管理員的 Workspace 帳號)登入 Google Cloud Console。

    點頁面最上方的專案選單 → 「新增專案」,取一個名稱(例:公司名稱+登入),按「建立」。已經有專案的話,選用它即可。

    用公司 Workspace 帳號建立,專案會歸在公司的組織底下,之後才能選「內部」使用者類型。

    官方說明:Google 官方:使用 OAuth 2.0 存取 Google API(網頁伺服器應用程式)

    示意畫面
    https://console.cloud.google.com/

    Google Cloud Console

    專案選單 › 新增專案

    專案名稱
    例:示範公司 登入
    組織
    example.com

    建立

    示意圖,實際畫面以官方為準。虛線框是這一步要看的地方,數值都是假的。

  2. 2設定 Google Auth Platform(品牌與對象)

    左側選單或搜尋列找「Google Auth Platform」,第一次進入按「開始使用」(GET STARTED)。

    「品牌塑造」填:應用程式名稱(登入時使用者會看到)、使用者支援電子郵件、開發人員聯絡電子郵件。

    「目標對象」選使用者類型:「內部」=只有你公司 Google Workspace 組織內的人能登入(最單純,不需審核);「外部」=任何 Google 帳號(含 Gmail)。公司用 Workspace 請選內部;用一般 Gmail 或需要外部人員登入才選外部。

    官方說明:Google 官方:設定 OAuth 同意畫面

    示意畫面
    https://console.cloud.google.com/auth/overview

    Google Auth Platform

    總覽品牌塑造目標對象用戶端
    應用程式名稱
    示範公司 人資系統
    使用者支援電子郵件
    admin@example.com
    使用者類型
    內部 / 外部

    示意圖,實際畫面以官方為準。虛線框是這一步要看的地方,數值都是假的。

  3. 3建立 OAuth 用戶端(網頁應用程式)

    在 Google Auth Platform 左側點「用戶端」(Clients)→「建立用戶端」(Create client)。

    「應用程式類型」選「網頁應用程式」(Web application),名稱隨意(例:人資系統登入)。

    官方說明:Google 官方:建立授權憑證(用戶端)

    示意畫面
    https://console.cloud.google.com/auth/clients

    建立 OAuth 用戶端 ID

    應用程式類型
    網頁應用程式
    名稱
    人資系統登入

    示意圖,實際畫面以官方為準。虛線框是這一步要看的地方,數值都是假的。

  4. 4貼上「已授權的 JavaScript 來源」與「已授權的重新導向 URI」

    同一個表單往下找兩個區塊,各按「新增 URI」,把控制台客戶頁「Google 登入」卡片上列出的網址貼進去(兩種網址不一樣,不要貼反):

    已授權的 JavaScript 來源:https://hr.<客戶代號>.84-247-159-153.sslip.io(只有網域,結尾不要加 /)

    已授權的重新導向 URI:https://hr.<客戶代號>.84-247-159-153.sslip.io/auth/google/callback(要完全一致,包含結尾,連大小寫、有沒有 / 都不能差)

    客戶有啟用自訂網域時,兩個網址(預設網域與自訂網域)都貼進去。Google 規定網址要 https、不能用 IP、不能用萬用字元(*)。

    官方說明:Google 官方:重新導向 URI 的驗證規則

    示意畫面
    https://console.cloud.google.com/auth/clients/…

    已授權的 JavaScript 來源

    URI 1
    https://hr.<客戶代號>.84-247-159-153.sslip.io

    已授權的重新導向 URI

    URI 1
    https://hr.<客戶代號>.84-247-159-153.sslip.io/auth/google/callback

    建立

    示意圖,實際畫面以官方為準。虛線框是這一步要看的地方,數值都是假的。

  5. 5複製用戶端 ID 與用戶端密鑰

    按「建立」後會跳出視窗,顯示「用戶端 ID」(結尾是 .apps.googleusercontent.com)與「用戶端密鑰」。

    重要:密鑰只會在建立當下完整顯示一次,之後無法再查看或下載。請立刻複製(或下載 JSON)。複製後只貼到我們的控制台,不要貼在聊天或公開文件。

    不小心沒複製到的話:回該用戶端頁面新增一組新的密鑰,再把舊的停用。

    官方說明:Google 官方:用戶端密鑰說明

    示意畫面
    https://console.cloud.google.com/auth/clients/…

    OAuth 用戶端已建立

    用戶端 ID
    123456789012-abcdefg…apps.googleusercontent.com
    用戶端密鑰
    GOCSPX-••••••••••••

    (值為示範假值)密鑰只會顯示這一次。

    示意圖,實際畫面以官方為準。虛線框是這一步要看的地方,數值都是假的。

  6. 6確認發布狀態(內部/外部)

    到「目標對象」(Audience)看「發布狀態」。

    內部:不用做任何事,公司組織內的帳號直接可登入。

    外部:預設是「測試中」,只有列在「測試使用者」(最多 100 位)的帳號能登入。我們的登入只要求 openid、email、profile 三個基本資料,依 Google 官方說明,只要求這些範圍的應用程式,使用者不需要在測試名單內、也不會看到未驗證警告;若你的畫面仍擋人,按「發布應用程式」改成「正式版」即可。

    官方說明:Google 官方:管理應用程式目標對象與發布狀態

    示意畫面
    https://console.cloud.google.com/auth/audience

    目標對象

    使用者類型
    內部
    發布狀態
    測試中 → 正式版

    發布應用程式

    示意圖,實際畫面以官方為準。虛線框是這一步要看的地方,數值都是假的。

  7. 7貼回控制台並套用

    回控制台,打開這個客戶的詳細頁,找到「Google 登入」,把用戶端 ID、用戶端密鑰貼進去。

    「允許登入的 email 網域」填公司信箱網域(例:example.com,多個用逗號隔開);只填一個網域時,Google 選帳號畫面也會預設只列該網域的帳號。留空=不限網域。

    「系統寄件信箱」填通知信要顯示的寄件人(可留空)。按「儲存」,再按「套用到這個客戶系統」(客戶的人資網站會重啟約 10–20 秒),最後按「驗證」。

    示意畫面
    https://<你的控制台>/ › 客戶 › Google 登入

    客戶 › Google 登入

    Client ID
    123456789012-….googleusercontent.com
    Client secret
    貼上
    允許登入的 email 網域
    example.com

    儲存 套用到這個客戶系統 驗證

    示意圖,實際畫面以官方為準。虛線框是這一步要看的地方,數值都是假的。

  8. 8實際登入試試看

    打開客戶的人資網站登入頁,按「使用 Google 登入」,會前往 Google 的選帳號畫面;選公司帳號,同意後回到系統。

    該員工必須已在系統內建立帳號(人資「帳號」設定)才能進入;沒建立的話會看到「帳號尚未開通」。第一次先用管理員自己測。

    示意畫面
    https://hr.<客戶代號>.84-247-159-153.sslip.io/login

    登入

    使用 Google 登入

    → accounts.google.com › 選擇帳號 › 回到系統

    示意圖,實際畫面以官方為準。虛線框是這一步要看的地方,數值都是假的。

常見錯誤

也要接 LINE?看連接 LINE回使用說明