基於node.js和oss的後端簽名直傳

sikichan發表於2019-03-01
Node.js後端

原文：github.com/sikichan/os…

單個圖片上傳頁面，上傳後顯示圖片預覽

基於node.js和oss的後端簽名直傳

阿里雲OSS服務端簽名後直傳

我們都知道，採用JS客戶端直接簽名，OSSAccessId和AccessKeySecret暴露在前端頁面，可以被輕易獲取，存在嚴重安全隱患。
這裡提供了一種使用阿里雲OSS伺服器端簽名後直傳，避免這種危險的方法。由於阿里雲OSS開發文件只提供了Java，PHP，Python和Go語言的例子，本Demo在此提供一個以Node.js作為後端的例子，供大家參考。

請求邏輯：

  1. 客戶端要上傳圖片時，到應用伺服器取上傳的policy及簽名(signature)
  2. 應用伺服器返回上傳policy和signature
  3. 客戶端拿到了簽名後，直接上傳到OSS

目前支援

chrome, firefox瀏覽器，其他瀏覽器還未全面測試，歡迎大家測試後在Issues裡反饋。

使用

配置OSS

  1. 進入阿里雲管理控制檯 –> 物件儲存OSS
  2. 新建Bucket
  3. Bucket屬性 –> 跨域設定：
基於node.js和oss的後端簽名直傳

檢視自己的AccessKey

基於node.js和oss的後端簽名直傳
基於node.js和oss的後端簽名直傳

點選顯示，會彈出簡訊驗證視窗，驗證後即可顯示出你的AccessKeySecret

後端配置檔案

backend/src/config/development/app.js

module.exports = {
  port: 3602,
  oss: {
    OSSAccessKeyId: `【這裡填你阿里雲的Access Key ID】`,
    secret: `【這裡填你阿里雲的Access Key Secret】`,
    host: `http://cqq.oss-cn-shenzhen.aliyuncs.com` //改為你自己阿里雲OSS的外網域名
  }
}

複製程式碼

如何執行這個Demo？

  • 後端：backend目錄
npm install
npm start
複製程式碼
  • 前端：webfront目錄
npm install
npm run dev
複製程式碼

技術棧

歡迎Start，歡迎Pull Requests

相關文章