[Express] 準備建立Restful API
TL;DR
純屬紀錄個人在開發Side project API的時候遇到的一些問題。可能不是最好的解法，但是至少可以work。
參考資料
- 網頁開發常見之 CORS 錯誤原因與 Express 解決辦法 | Medium
相關連結
包含內容有哪些
在參加六角學院Vue作品班的時候，雖然課程有提供通用的API，但是因為並不包含使用API註冊帳號密碼。等於我們只能持有一組Admin的帳號，另外還有該帳號使用者下的訪客(不需登入)API。
因為我們最終希望可以做出募資平台的網站，需要可以讓使用者註冊帳號。並且每個使用者同時也是商家，可以新增募資的提案，或是看到喜歡的提案也可以贊助等等。所以我們最終決定自行建置API。
後續就來一一介紹接下來的篇幅會有哪些內容。
註冊登入
JWT
因為我們的目的就是要解決使用者無法自行註冊登入帳號的問題，所以第一個建置的API是註冊以及登入。
這部分會包含利用登入成功時，回傳JWT給前端，並且讓前端每次在發送Request的時候，在Header內的指定欄位帶上這個Token。這麼一來我們就可以透過Token的通過與否確認身份。同時，我們也可以透過JWT解析出來的Payload，來確認該使用者資訊。
Payload是在使用者登入時，後端根據傳送的資料先進行使用者帳號密碼驗證。確認帳號密碼正確之後，根據該帳號密碼對應的UserID，封裝在Payload內並且製作出JWT。
往後在取得這次所製造出來的JWT時，就可以逆向解析出Payload，等同於知道該Token當初登入的使用者是誰。
加密
使用者密碼是機密資料，扣除掉在傳輸過程中被中間人攻擊的狀況外，應該只 有使用者可以知道自己的密碼。
所以我們儲存到資料庫內的使用者密碼，應該先加密過。這邊使用bcrypt.js套件來達成。
上傳圖片
另一個需要解決的問題是上傳圖片。在六角課程所提供的API包含了上傳圖片的功能，但是需要使用管理員登入的Token才能夠上傳成功。
在我們自行建置API的狀態，我們需要另外自行完成這個功能，並且跟課程相同，我們需要權限的控管。
這邊主要使用的是Firebase提供的Storage服務。
Middleware
在每次收到Request的時候，我們都需要進行一些驗證，例如Token正確與否以及是否過期等等。所以我們可以另外撰寫一個模組(module)，並且加入到Express所提供的中介層。
這麼一來只有在通過中介層時，才會繼續執行API內的內容，確保我們資料的安全性以及程式碼的維護性。
CORS
在開發階段，我們可以透過Postman測試，這時候並沒有跨域的問題，因為我們的後端程式是運行在本地端(localhost:3000)。
這個Restful API是透過Vercel所部署的。另外還有設定網域(Domain)。這時候就會產生跨來源問題。
這部分只有簡單使用Cors的套件來將部署的 網域加入白名單，來解決這個問題。
Vercel部署
在Vercel部署需要另外設定Vercel.json設定檔案。一開始因為這支設定檔案的問題，導致許多的套件沒有正確抓取到，產生了許多問題。所以會額外紀錄一篇Vercel部署需要注意的設定
Swagger
因為只有前期開發確認方向之後，就由我來一手包辦API建置了。有一些權限控管以及API的詳細內容，可能單純透過API的Endpoint並沒有辦法一眼看出來。例如，可能需要先Post創建一個提案之後，才可以使用另外一支Post創建該提案下的回饋方案設定。
所以我選擇透過Swagger文件來減少組員之間溝通的成本。
在使用Swagger工具的時候也有遇到幾個小問題，最一開始的問題是要如何撰寫文件，讓自動生成可以如我希望的生成對應的文件。後續在部署到線上的時候，也有UI跑版的問題。
後來是透過查找Github issue等等的方式才解決，後續也會記錄起來。