# 通路設定指南：LINE／Facebook／Instagram 把 Nathan AI 助理接到既有官方帳號或粉絲專頁。訪客在那邊傳訊息時，會用你在 Portal 上傳的文件知識庫與方案額度回覆。 > **前提** > - 已在 [客戶後台 `/portal`](/portal/) 註冊並有助理 > - 正式環境的 API 必須是 **公開 HTTPS**（本機請用 [ngrok](https://ngrok.com/) 等工具） > - 在伺服器 `.env` 設定 `PUBLIC_API_URL=https://你的公開網域`（Webhook 網址會依此顯示） --- ## 一、共通：到 Portal 取得 Webhook 1. 登入 **http://你的網域/portal/** 2. 左側選 **「通路（LINE／社群）」** 3. 會看到各通路的 **Webhook URL**（含你的 `assistantId`） 4. Meta（FB／IG）另有 **Verify Token**（預設與平台設定的 `META_VERIFY_TOKEN` 相同） 先不要關閉此頁，後面要複製貼上。 --- ## 二、LINE Official Account ### 2.1 準備 1. 前往 [LINE Developers](https://developers.line.biz/) 2. 建立（或選取）**Provider** → **Messaging API** 頻道 （或從 [LINE Official Account Manager](https://manager.line.biz/) 開通 Messaging API） 3. 在頻道的 **Basic settings** 複製： - **Channel secret** 4. 在 **Messaging API** 分頁： - 發行 **Channel access token**（長期），複製保存 - 建議關閉「自動回應訊息／歡迎訊息」等官方自動回覆，避免與 AI 搶答 ### 2.2 填回 Portal 1. Portal → 通路 → **LINE** 2. 貼上 **Channel Secret**、**Channel Access Token** 3. 按 **儲存 LINE** ### 2.3 設定 Webhook 1. 複製 Portal 上的 **LINE Webhook URL** 格式：`https://你的網域/api/webhooks/line/{assistantId}` 2. 回到 LINE Developers → Messaging API → **Webhook settings** 3. 貼上 URL → **Verify** 應成功 4. 開啟 **Use webhook** 5. 用手機對官方帳號傳一句話，應收到 AI 回覆 ### 2.4 常見問題 | 現象 | 可能原因 | |------|----------| | Verify 失敗 | 網址非 HTTPS、API 未啟動、`assistantId` 打錯 | | 有收到但無回覆 | Secret／Token 填錯、方案額度用完、API Key 未設定 | | 回兩次 | OA 自動回應與 Webhook 同時開啟 | --- ## 三、Facebook Messenger ### 3.1 準備 Meta App 1. 前往 [Meta for Developers](https://developers.facebook.com/) 2. 建立 App，類型選 **Business** 3. 新增產品 **Messenger** 4. 將 App 連到你的 **粉絲專頁（Facebook Page）** 5. 在 Messenger 設定取得： - **Page ID** - **Page Access Token**（該專頁） 6. App 設定 → 基本資料 → 複製 **App Secret**（建議填，用於驗證請求） ### 3.2 填回 Portal 1. Portal → 通路 → **Facebook Messenger** 2. 填 **Page ID**、**Page Access Token**、**App Secret** 3. 按 **儲存 Facebook** ### 3.3 設定 Webhook 1. 複製 Portal 的 **Meta Webhook URL** 格式：`https://你的網域/api/webhooks/meta/{assistantId}` 2. Meta App → Messenger → **Webhooks** → 設定回呼網址 3. **Verify Token** 填 Portal 顯示的字串（或 `.env` 的 `META_VERIFY_TOKEN`） 4. 訂閱專頁事件，至少勾選： - `messages` - `messaging_postbacks`（可選） 5. 用另一個 FB 帳號對專頁傳訊息測試 > 開發階段 App 可能僅限測試者／管理員對話；上線需完成 Meta 審核與權限（如 `pages_messaging`）。 --- ## 四、Instagram Messaging Instagram 私訊走 **同一套 Meta Webhook**（與 Facebook 相同 URL）。 ### 4.1 準備 1. Instagram 需為 **專業／創作者帳號** 2. 在 Meta／粉絲專頁後台將 IG 帳號 **綁定到 Facebook 粉絲專頁** 3. Meta App 需啟用 **Instagram** 相關產品／權限（依 Meta 當年度文件） 4. 使用「綁定該 IG 的粉絲專頁」的 **Page ID** 與 **Page Access Token** ### 4.2 填回 Portal 1. Portal → 通路 → **Instagram** 2. 填 Page ID、Page Access Token、App Secret 3. 按 **儲存 Instagram** 4. Webhook 與 Facebook **同一支 URL**，Verify Token 相同 5. 在 Meta Webhooks 訂閱與 Instagram 訊息相關欄位（依後台選項，常見含 `messages`） ### 4.3 注意 - 個人 IG 帳號無法收 Messaging API - 權限與審核政策以 [Meta 官方文件](https://developers.facebook.com/docs/messenger-platform/instagram) 為準 - 若只連 Facebook、未存 Instagram 設定，IG 訊息可能不會進此助理 --- ## 五、本機開發（ngrok 範例） ```bash # 終端 1 npm run dev:api # 終端 2 ngrok http 3000 ``` 把 `.env` 的 `PUBLIC_API_URL` 改成 ngrok 給的 `https://xxxx.ngrok-free.app`，重啟 API，再到 Portal 複製新的 Webhook URL。 --- ## 六、與網站嵌入的關係 | 管道 | 做法 | |------|------| | 客戶網站 | 貼 `