star

文章編輯: O 編 | 2026-06-03

【手把手教學】用 LINE 一鍵登入,自動把 OOOPEN Lab 測驗結果「接到」好友名單上!

【手把手教學】用 LINE 一鍵登入,自動把 OOOPEN Lab 測驗結果「接到」好友名單上!

你經營 LINE 官方帳號,希望透過心理測驗、性向測驗等互動內容跟會員互動,並且在玩家完成測驗後,把填答資料(包含 LINE 會員識別碼)透過 Webhook 自動回傳到你自己的系統,與你 LINE 官方帳號的好友資料比對、歸戶,做後續行銷或客戶服務嗎?

本篇將說明如何使用 OOOPEN Lab 的「自訂 OAuth 登入」功能,串接你自己的 LINE Login Channel,讓 Webhook 直接拿到與 LINE 官方帳號好友 ID 相同的 LINE userId,省去後端比對與轉換的工。本篇假設你已經了解 OAuth 登入的基本概念Webhook 的設定方式,會聚焦在 LINE 串接的特殊環節。

目錄

為什麼不能直接用平台內建的「社群會員登入 → LINE」達成?

OOOPEN Lab 在「填答登入/權限設定」中提供兩種讓玩家用 LINE 登入的方式,兩者拿到的 LINE userId 完全不同

設定選項使用的 LINE Channel你拿到的 LINE userId
「社群會員登入」→ 啟用 LINE 登入OOOPEN Lab 自有的 LINE Login Channel平台共用,不會與你 LINE 官方帳號好友 ID 相同
「自訂 OAuth 登入」(本篇主題)你自己在 LINE Developers 申請的 Channel與你 LINE 官方帳號發出的 userId 完全相同

如果你的目標是把測驗填答者跟 LINE 官方帳號的好友比對(例如要在 CRM / MA 中找出「這位填答者就是這位好友」),就必須走「自訂 OAuth 登入」這條路。本篇會手把手帶你完成設定。

動工前請先確認:

  • 你的 OOOPEN Lab 帳號需有「自訂 OAuth 登入」權限(依方案而定;無此權限時編輯器內該選項會被鎖住,請參考 方案說明
  • 你已擁有或可申請 LINE Developers 的 LINE Login Channel(注意:是 LINE Login Channel,不是 Messaging API Channel)
  • 關鍵前提:此 LINE Login Channel 必須與你的 LINE 官方帳號 Messaging API Channel 放在同一個 LINE Developers Provider,否則拿到的 userId 與好友 ID 屬於不同命名空間,無法對應

第一步:在 LINE Developers 設定 Channel

1.1 建立 LINE Login Channel

進入 LINE Developers Console,選擇一個 Provider(請選擇與你 LINE 官方帳號相同的 Provider),點 Create a new channel,選 LINE Login。如果你已有 LINE Login Channel 可重複使用,請務必確認該 Channel 跟你的官方帳號 Messaging API Channel 在同一個 Provider 下。

1.2 取得 Channel ID 與 Channel secret

在該 Channel 的 Basic settings 中找到:

  • Channel ID(公開資訊)
  • Channel secret(請保密)

這兩個值稍後在 OOOPEN Lab 編輯器中會用到。

1.3 註冊 Callback URL

LINE Login → Callback URL 中加入此測驗的 callback URL,每個測驗都要逐一新增。格式為:

https://ooopenlab.cc/auth/{quizId}/callback

{quizId} 是該測驗的 ID(編輯器網址 /editor/{quizId}/... 中那一段)。保險做法:打開測驗編輯器的「填答登入/權限設定」,在「OAuth 登入網址」欄位的說明文字中會顯示此測驗實際使用的 redirect_uri,直接複製貼到 LINE Developers 即可。

1.4 (選用)申請 email 權限

LINE 預設不會回傳 email。若你需要取得 email:

  • 在 Channel 設定中找到 Email address permission 申請 email 權限,等審核通過
  • 在 OAuth 登入網址的 scope 中加入 email(後續步驟 2.2 會說明)

1.5 將 Channel 切到 Published

測試階段可先將自己的 LINE 帳號加為 Tester;正式上線前記得將 Channel 切到 Published

第二步:在 OOOPEN Lab 編輯器設定

進入測驗專案編輯頁 → 右側設定面板 → 填答登入/權限設定登入方式 選擇 自訂 OAuth 登入,依下列說明填寫各欄位。

2.1 顯示用欄位

欄位填法範例
你的平台名稱登入按鈕會顯示為「使用 XXX 登入」LINE
登入按鈕顏色任意 HEX 色碼#06C755(LINE 綠)

2.2 OAuth 登入網址

LINE 的 authorize endpoint,加上你的 Channel ID 與 scope。不要自己帶 redirect_uristate,平台會自動附加:

https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id={你的 Channel ID}&scope=profile%20openid

可選參數:

  • 要拿 email:把 scope 改成 profile%20openid%20email(需 LINE 審核通過)
  • 登入後自動加好友:加 &bot_prompt=normal(需 Login Channel 與官方帳號 Messaging API Channel 在同一 Provider 並完成連結)

2.3 回傳授權類型

Authorization Code(推薦)。LINE 不建議使用 Implicit Flow。

2.4 Token 交換網址

LINE 的 token endpoint。把 grant_type / client_id / client_secret 直接寫在 query string 裡:

https://api.line.me/oauth2/v2.1/token?grant_type=authorization_code&client_id={你的 Channel ID}&client_secret={你的 Channel secret}

⚠️ Channel secret 會儲存在這份測驗的後台設定中。雖然只有後端能讀取,但這代表你授權 OOOPEN Lab 平台保管它。若你的 Channel 同時被其他系統使用、或對安全有更高要求,建議單獨為 OOOPEN Lab 申請一個 LINE Login Channel。

2.5 用戶資料取得方式

請選擇 OpenID Connect 模式。這是 LINE 標準的身分識別協議,能完整取得包含 email 在內的使用者資訊,也是我們推薦的串接方式。

  • 連線方式OpenID Connect
  • OpenID Connect (OIDC) 網址 填:
    https://api.line.me/oauth2/v2.1/verify?client_id={你的 Channel ID}
  • 平台會以 form POST 將 id_token 送到此端點驗證並解出 payload,回傳的:
    • sub → LINE userId(即會員 ID)
    • name → 顯示名稱
    • email → email(需 email scope 通過審核且包含在 2.2 的 scope 中)

⚠️ 此模式必須在 2.2 的 scope 中包含 openid(前述範例已預設加上),否則 LINE 不會回傳 id_token,登入會失敗。

填完按「儲存」即可。

第三步:你會收到什麼樣的 LINE userId

OOOPEN Lab 在後台「填答管理」表格、CSV 匯出、以及 Webhook payload 中顯示的會員 ID 欄位,都是純 LINE userIdUxxxxxxxxxxxxxxxx...),與你 LINE 官方帳號 Messaging API webhook 收到的 userId 完全相同,不需要做任何字串處理即可比對。

這就是本篇串接的關鍵價值。前提是:你的 LINE Login Channel 與 LINE 官方帳號 Messaging API Channel 放在同一個 LINE Developers Provider。跨 Provider 的 LINE userId 屬於不同命名空間,無法對應,請務必在第一步建立 Channel 時確認。

💡 若你改用平台內建的「社群會員登入 → LINE」(非本篇方式),會員 ID 雖然也會顯示為 Uxxxx... 格式,但這個 Uxxxx 來自 OOOPEN Lab 自有的 LINE Channel,對應不到你的官方帳號好友 ID。這就是必須走「自訂 OAuth 登入」的核心理由。

第四步:Webhook 收到什麼資料?

當玩家完成測驗,OOOPEN Lab 會 POST 一份 payload 到你設定的 Webhook URL(Webhook 設定流程請參考 如何用 Webhook 串接 OOOPEN Lab 測驗資料?)。當測驗有設定 OAuth 登入時,payload 內 data.oauthUser 欄位會帶玩家的會員資訊。

完整 payload 範例(測驗完成事件):

{
  "type": "finish",
  "timestamp": "2026-06-01T12:34:56.789Z",
  "data": {
    "answerId": "abc...",
    "quizId": "abc123",
    "quizName": "你的人格類型測驗",
    "startedAt": "2026-06-01T12:30:00.000Z",
    "finishedAt": "2026-06-01T12:34:56.000Z",
    "duration": 296000,
    "result": {
      "id": "result-A",
      "label": "理性派"
    },
    "oauthUser": {
      "id": "U1234567890abcdef...",
      "email": "...",
      "provider": "custom"
    },
    "answers": [
      { "id": "q1", "title": "...", "value": "...", "duration": 1234 }
    ]
  }
}

data.oauthUser.id 即為玩家的 LINE userId,可以直接與你 LINE 官方帳號 Messaging API 收到的 userId 比對,無需額外處理:

const lineUserId = payload.data.oauthUser.id;
// "U1234567890abcdef..."
// 直接用於 GET /v2/bot/profile/{userId}
// 或比對你資料庫中的好友清單

端對端測試清單

部署前建議跑一遍以下流程:

  1. 在編輯器存好設定 → 用無痕視窗開啟測驗網址
  2. 點「使用 {你的平台名稱} 登入」→ 彈窗應導向 access.line.me
  3. 完成 LINE 登入 → 彈窗自動關閉,原視窗繼續進入測驗
  4. 完成測驗 → 在 OOOPEN Lab 後台「填答管理」找到該筆紀錄,確認會員 ID 欄位顯示為 Uxxxx...(與你 LINE 官方帳號好友 ID 同格式)
  5. 確認你的 Webhook Server 有收到 POST,payload 中 data.oauthUser.id 包含上一步的 userId
  6. Uxxxx... 拿到 LINE 官方帳號的 webhook log(或 GET /v2/bot/profile/{userId} API)對照,應為同一人

常見問題與排錯

Q1:彈窗顯示「登入時發生錯誤」

打開瀏覽器 console,平台會 postMessage 一份錯誤回原視窗,內容含 LINE 的回應。常見原因:

訊息關鍵字原因解法
invalid redirect_uriLINE Channel 沒登錄此測驗的 callback URL從編輯器「OAuth 登入網址」欄位的說明文字複製 redirect_uri,貼到 LINE Developers → Callback URL
invalid_client / invalid_requestChannel ID 或 Channel secret 寫錯對照 LINE Developers Basic settings 重新貼
state_not_found / invalid_state玩家登入時 cookie 被擋(隱私瀏覽、第三方 cookie 封鎖)或超過 5 分鐘才完成請玩家改用一般視窗或重試
uerid_not_foundLINE 回傳的 id_token payload 沒有 sub 欄位(多半是 scope 缺 openid 或 OIDC 網址設錯)確認 scope 包含 openid、OIDC 網址為 https://api.line.me/oauth2/v2.1/verify?client_id={你的 Channel ID}

Q2:我要怎麼拿到 email?

LINE 預設不會回傳 email,需要兩個動作:

  • 在 LINE Developers 內申請 email 權限並等審核通過
  • 將 2.2 的 scope 改為 profile%20openid%20email

Q3:一個 LINE Channel 可以給多個測驗用嗎?

可以。LINE 一個 Channel 允許多個 Callback URL,請把每個測驗的 /auth/{quizId}/callback 都加進去。OAuth 設定需在每個測驗各自填寫,但用同一組 Channel ID 與 secret,幾個欄位內容會完全相同。

Q4:跨測驗歸戶要怎麼做?

同一個 LINE 玩家在你旗下不同測驗填答時,Webhook 收到的 data.oauthUser.id 是同一個 LINE userId(前提:所有測驗使用同一個 LINE Login Channel)。你的 Webhook Server 直接用 oauthUser.id 當主鍵即可串起跨測驗紀錄。

Q5:我想停用或更換 Channel 怎麼辦?

回到編輯器同一個設定面板,修改 OAuth 登入網址 / Token 交換網址 / OIDC 網址中的 Channel ID 與 secret 即可。舊有玩家的填答紀錄不會被異動,但更換 Channel(特別是跨 Provider)後,新登入到的 LINE userId 與舊紀錄無法對應(跨 Provider 的 LINE userId 是不同命名空間)。建議只在還沒開始收名單前更換。

相關文章

外部參考


猜你也喜歡……

  • 如何客製扭蛋機樣式?教你 3 步驟快速完成!
    去看看
  • 專案可以新增或刪除頁面或區塊嗎?
    去看看
  • 如何用 Bill AI 完成爆紅心理測驗?掌握 3 大設定技巧,你也能完成!
    去看看

讓溝通變好玩

回首頁關於我們關於我們使用者服務條款與
隱私權政策
檢舉濫用行為

Copyright © 2026 OOOPEN Lab