如果你的保險箱連一扇門都沒有...

在上一章，我們設計出了極度完美的 RESTful API： DELETE /users/123 (刪除編號 123 的會員)

這個網址設計得非常標準、非常漂亮。但請你想一下，如果這個網址是公開在網路上的，會有什麼後果？

任何一個路人甲，只要在瀏覽器或是 Postman 裡面輸入這串網址，按下發送，編號 123 的會員就會立刻從你的資料庫裡人間蒸發。如果駭客寫了一個迴圈腳本，從 1 跑到 10000，一直瘋狂發送 DELETE 請求，你的整家公司就會在三分鐘內破產倒閉。

這就是初學者在開發 API 時最常犯的致命錯誤：「裸奔的 API (Unprotected API)」。你不能只把 API 做出來，你還必須在 API 前面安排一位嚴格的警衛，負責檢查「你到底是誰？你有沒有權限做這件事？」

這套防護機制，在軟體工程中被稱為 認證 (Authentication) 與授權 (Authorization)。

警衛的通行證：什麼是 API Token？

當你去參加演唱會或是進入公司大樓時，你不會每次進出一個房間都把身分證拿出來給警衛看。通常的做法是：你在大門口出示身分證 (登入帳號密碼)，警衛確認無誤後，會發給你一張「通行證 (識別證)」。之後你在大樓裡面走動，只要把這張通行證掛在脖子上，警衛看到通行證就會直接放行。

在 API 的世界裡，這張通行證就叫做 Token。

Token 是怎麼運作的？

登入階段：前端傳送使用者的帳號密碼 POST /login 給後端 API。
核發階段：後端檢查密碼正確後，產生一串很長、無法被偽造的亂碼字串 (例如：eyJhbGciOiJIUzI1NiIsInR5...)，這就是 Token。後端把這串 Token 傳回給前端。
掛在脖子上：前端拿到 Token 後，把它偷偷存起來 (通常存在 LocalStorage)。
發送請求：以後前端每次要呼叫 API 時（例如呼叫 DELETE /users/123），都會自動把這串 Token 塞進 HTTP 請求的 標頭 (Headers) 裡面。

具體來說，前端發出的請求會長這樣：

DELETE /users/123 HTTP/1.1
Host: api.example.com
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5...

(注意那個 Authorization: Bearer，這就是業界標準的「掛識別證」寫法)

後端的警衛一看到請求裡有正確的 Token，就會允許刪除動作。如果沒有 Token，或是 Token 是假的、過期的，後端就會無情地回傳 401 Unauthorized (未經授權)，直接把請求踢出大門！

現代的主流霸主：JWT (JSON Web Token)

上面提到的那串亂碼 Token，目前全世界最主流的技術叫做 JWT (唸作 "Jot")。

傳統的 Token 只是一串無意義的亂碼，後端警衛拿到這串亂碼後，還必須跑去資料庫查：「這串亂碼到底是誰的？他權限多大？」這會造成資料庫很大的負擔。

JWT 是一張「自帶履歷表的防偽通行證」。如果你把 JWT 字串拿去解碼 (你可以去 jwt.io 網站試試看)，你會發現裡面其實包裝了一段 JSON 格式的資料：

{
  "user_id": 123,
  "role": "admin",
  "exp": 1718900000
}

user_id：這個人是誰。
role：他的身份是老闆 (admin) 還是普通客人 (user)。
exp (Expiration)：這張通行證什麼時候到期作廢。

最神奇的是，JWT 的尾巴帶有後端伺服器的**「數位簽章」**。如果駭客試圖竄改中間的內容（例如把自己的 role 從 user 偷偷改成 admin），數位簽章就會立刻破裂失效。後端警衛一驗證簽章破了，就會立刻把它丟進垃圾桶。

Vibe Prompt 實戰：用 Postman 測試帶鎖的 API

當你在串接別人的（或是自己寫的）受保護 API 時，你不能再像以前一樣直接把網址貼在瀏覽器上按 Enter 了，因為瀏覽器不會幫你把 Token 掛在脖子上。你必須使用 Postman！

【Postman Authorization 測試教學】

先用 Postman 呼叫登入 API (POST /login)，取得回傳的 JWT 字串。

複製那串很長的 JWT 字串。

在 Postman 開啟一個新的頁籤，準備呼叫受保護的 API (例如 GET /my-profile)。

點擊 URL 輸入框下方的 Authorization (授權) 標籤頁。

左邊的 Type 下拉選單，選擇 Bearer Token (這是最常見的標準)。

在右邊的 Token 欄位中，貼上你剛剛複製的 JWT 字串。

按下 Send (發送)。

只要按照這個步驟，Postman 就會自動幫你把 Authorization: Bearer [Token] 塞進請求標頭裡，順利通過後端的警衛檢查！

了解了 API 的設計與資安防護後，你已經具備了串接真實世界 API 的能力。但在專案開發的初期，如果後端工程師還沒把 API 寫出來，前端工程師難道只能坐在位子上發呆嗎？在下一章中，我們將教你如何使用 Vibe Coding，在五分鐘內架設一個**「假的 API 伺服器 (Mock API)」**，讓你的開發進度再也不會被別人卡住！

🎁 [VIP 專屬加碼] API 進階除錯術與 Webhook 逆向工程

在接案市場上，最賺錢的案子通常不是「從零做一個網站」，而是「把 A 系統跟 B 系統串接起來」。例如：客戶想把他們家的 ERP 系統，跟 LINE 官方帳號串接。這時候，API 與 Webhook 的觀念就是你接下這種 10 萬元起跳案子的核心武器。

1. 學會看懂 API 錯誤訊息 (不再瞎子摸象)

當你用 Postman 打 API，卻收到紅色的 Error 時，不要急著去問 Cursor。請先學會自己判讀狀態碼：

401 Unauthorized：90% 是你的 Headers 裡面忘記帶 Bearer Token，或是 Token 已經過期了。去重新登入拿一組新的！
403 Forbidden：你有 Token，但你的權限不夠。例如你是一般會員，卻試圖呼叫 /api/admin/delete_user。
422 Unprocessable Entity：你送過去的資料格式錯了。例如後端要的是 {"age": 25}，你卻送了字串 {"age": "二十五"}。仔細檢查你的 JSON Body！
CORS Error (前端專屬噩夢)：當你在瀏覽器呼叫別人的 API，卻看到紅色的 CORS 錯誤。這代表對方的伺服器沒有允許你的網域存取。解法：在後端加上 cors 套件，或是透過 Next.js 的 Route Handlers 做一層中繼代理 (Proxy)。

2. 什麼是 Webhook？(API 的反向操作)

傳統的 API 是「你主動去問別人」。例如：你每 5 分鐘打一次 /api/check-payment 問綠界科技：「這筆訂單客人付款了嗎？」這非常浪費伺服器資源。

Webhook 是「別人主動來通知你」。你寫一支 API (例如 /api/webhook/ecpay)，然後把這個網址交給綠界。當客人付款成功的瞬間，綠界會「主動」打你的這支 API，告訴你：「付款成功了！訂單號碼是 12345」。這就是所謂的 Webhook (網路鉤子)，它是現代 SaaS 服務之間最主流的溝通方式 (包含 LINE Bot、Stripe、綠界、GitHub Actions 全部都依賴 Webhook)。

3. Vibe Coding 實戰：一鍵產生 Webhook 接收器

在開發 Webhook 時，因為是「別人打給你」，所以你沒辦法用 Postman 自己測。這時候，強大的 Cursor 再次發揮作用。

✅ Vibe Prompt 示範：

「我需要寫一支 Node.js 路由來接收 LINE 官方帳號的 Webhook 訊息。

路徑為 POST /api/webhook/line。

請幫我寫好驗證 LINE Signature 的安全防護邏輯，確保這個請求真的是從 LINE 官方發出來的。

如果收到使用者的文字訊息，請先使用 console.log 將內容印出來即可。

最後，務必回傳 200 OK 給 LINE 伺服器，否則 LINE 會判定發送失敗。」

有了這個觀念，你已經具備了打通全世界所有 SaaS 系統任督二脈的能力。準備好成為企業眼中的系統整合大師了嗎？