N8n

在這篇筆記中，將紀錄如何在 n8n 中設定 Google OAuth2 認證，以串接像是 Google Sheets、Gmail 或 Google Drive 等服務。 最後也加上在設定過程中可能會遇到的常見錯誤，尤其是在 自架環境 中非常容易發生的 redirect_uri_mismatch 問題，並提供解法。 📦 你需要準備的環境 已運行中的 n8n（本機或雲端部署均可） Google 帳號 Google Cloud Console 存取權限 在 Google Cloud Console 建立 OAuth2 憑證 前往 Google Cloud Console 建立一個專案（或使用現有專案） 到 API 和服務 > 憑證 點「建立憑證 > OAuth 用戶端 ID」 👉 若首次設定會要求填寫「OAuth 同意畫面」： 使用者類型：選「外部」 填寫應用名稱、支援信箱 可略過 Scopes 設定（或先加入基本 openid/email/profile） 加入測試用戶（輸入你自己的 Gmail） 然後建立 OAuth 用戶端 ID： 應用類型：網頁應用程式 ...

🧪 TL;DR <n8n-demo> 是官方推出的 Web Component，可以把 n8n workflow 直接嵌入網頁，讓讀者不用進 n8n 編輯器也能理解流程。本文教你怎麼在 Hugo 網站中啟用這個功能，從設定 unsafe HTML、建立 shortcode 到把 workflow JSON 編碼成可用格式。適合想要在技術部落格中分享 n8n 範例的你。 ✨ 什麼是 <n8n-demo> 組件？ <n8n-demo> 是官方提供的 Web Component，可用來視覺化預覽 n8n 的 workflow。這可以直接在網頁中嵌入一個互動式流程圖，讓讀者不必進入 n8n 編輯器，也能快速理解整體流程邏輯。 如果沒有這個組件，要達到同樣的效果可能會非常繁瑣。就必須要： 匯出 workflow JSON 截圖或自行繪製流程圖 解釋每個節點如何運作 或嵌入 iframe 指向 n8n 編輯器（但這通常不公開） 有了 <n8n-demo>，只需要貼上 workflow JSON 編碼成 URL 的格式，就能直接顯示清晰的圖形介面，大幅減少說明成本，也讓讀者更容易理解。 ✅ 步驟一：設定 Hugo 允許 HTML 在 config.toml 中啟用 unsafe HTML，否則 Markdown 中的 <script>、<n8n-demo> 等 HTML 會被過濾。 ...