RealmsRealms
Skip to main content

Part 2 — Features · Part 10

Google 登入串接

讓學員用 Google 帳號一鍵登入 —— 從 Google Cloud Console 申請 OAuth 憑證到貼回後台的完整流程。

6 min read
Google 登入串接

學員註冊時少填一個欄位,轉化率就多幾個百分點。Google 一鍵登入是我覺得 CP 值最高的功能之一——學員不用記密碼、不用收驗證信,點一下就進來了。這堂我帶你把它串好,流程會在 Google Cloud Console 跟 Realms 後台之間來回幾趟,跟著做就行。

先把 Realms 後台的開關打開

00:00 進到後台「系統設定」→「登入方式」,找到 Google 登入的區塊,直接把開關打開。你會看到兩個欄位要填:Client ID 跟 Client Secret。這兩個參數要去 Google 那邊申請,先放著,我們等等會回來貼。

前往 Google Cloud Console

00:07 開一個新分頁,搜尋「Google Cloud」,點第一個結果,選擇「前往控制台」。登入以後你會看到 GCP 的主介面。

00:13 點左上角那三條線的導覽選單,選擇「API 和服務」。如果你是第一次用,可能需要先建立一個專案,名稱隨便取,能辨識是這個課程平台就好。

設定 OAuth 同意畫面

00:21 在「API 和服務」底下找到「OAuth 同意畫面」,點進去之後選「開始」。

00:33 應用程式名稱填你線上課程的名稱——學員按下 Google 登入時會看到這個名字,所以記得填得夠清楚。接著填你的電子郵件。

00:43 使用者類型這邊一定要選「外部」,因為你的學員不是你公司的內部員工。聯絡資訊再填一次你的 email,勾選「我同意使用條款」,按繼續建立。

建立 OAuth 用戶端

00:57 設定完同意畫面後,畫面會出現「建立 OAuth 用戶端」,點下去。應用程式類型選「網頁應用程式」。

01:07 接下來是兩個關鍵欄位:

  • 已授權的 JavaScript 來源:貼上你線上課程平台的網址,例如 https://yourcourse.com。注意只保留最乾淨的網域前段,不要有後面的 /path 或結尾的斜線。
  • 已授權的重新導向 URI:一樣貼上網址,但後面務必加上 /api/auth/callback/google。完整會長這樣:https://yourcourse.com/api/auth/callback/google

這段 callback 路徑是 Realms 固定的接收端點,漏掉或打錯就會登入失敗。按「建立」。

把憑證貼回 Realms

01:39 建立完成會跳出一個視窗,裡面有用戶端 ID用戶端密碼。先複製用戶端 ID,回到 Realms 後台貼到 Google Client ID 欄位。

01:52 再回到 Google 那邊複製用戶端密碼,貼到 Google Client Secret 欄位,按儲存。

最後一步:叫 Codex 重啟服務

02:01 儲存完還沒結束。這種影響登入流程的環境變數更動,需要重新載入才會生效。進到 Codex,跟它說一句「幫我重啟服務」就好。

02:19 服務重啟完回到課程首頁,點 Google 登入,整個流程跑通了——這條登入通道就正式上線了。之後只要有學員用 Google 註冊,都會自動進到你的學員名單。