Upload file by .NetCore and Angular On S3 – The request signature we calculated does not match the signature you provided. Check your key and

huangapple
go评论91阅读模式
英文:

Upload file by .NetCore and Angular On S3 - The request signature we calculated does not match the signature you provided. Check your key and

问题

我想在.NetCore和Angular上通过S3上传图像，实际上我想在后端使用密钥和秘密密钥创建一个带签名的URL，然后我想通过后端生成的URL在Angular中上传文件。

我的后端代码在.NET中如下：

  1. public ServiceResponse GetPreSigned(FileCategory prepend, string append = null)
  2. {
  3.     var mediaId = Guid.NewGuid();
  4.     var config = new AmazonS3Config
  5.     {
  6.         SignatureVersion = "v4",
  7.         RegionEndpoint = RegionEndpoint.USEast1,
  8.         ServiceURL = _config.LIARA_ENDPOINT
  9.     };
  11.     var amazonS3Client = new AmazonS3Client(_config.LIARA_ACCESS_KEY, _config.LIARA_SECRET_KEY, config);
  13.     Amazon.S3.Model.GetPreSignedUrlRequest ccc = new Amazon.S3.Model.GetPreSignedUrlRequest()
  14.     {
  15.         BucketName = _config.LIARA_BUCKET_NAME,
  16.         Key = GenerateResourceKey(mediaId, prepend.ToString(), append),
  17.         Expires = DateTime.Now.AddMinutes(30),
  18.         Verb = HttpVerb.PUT,
  19.     };
  21.     return new GetMediaPostRequestSuccess
  22.     {
  23.         MediaKey = GenerateResourceKey(mediaId, prepend.ToString(), append),
  24.         BucketUri = amazonS3Client.GetPreSignedURL(ccc)
  25.     };
  26. }

而Angular的代码如下：

  1. uploadFile(file: any, preSignedUrl: GetMediaPostRequestSuccess): Observable<HttpEvent<any>> {
  3.     const formData: FormData = new FormData();
  4.     formData.append('file', file);
  5.     // 通过签名URL上传文件
  6.     return this._http.put(preSignedUrl.bucketUri, formData, {
  7.       headers: { 'dont-modify-this-one': '' }, // 避免被拦截器添加授权头
  8.       observe: 'events'
  9.     });
  10. }

我收到以下响应消息：
我们计算的请求签名与您提供的签名不匹配。请检查您的密钥和签名方法。

此外，这是我的请求参数：

我认为我在请求头中漏掉了一些东西，比如授权。

我可以使用GetPreSignedURL来上传文件吗？GetPreSignedURL负责签名和所有安全问题吗？

英文:

I want to upload an image on S3 by .NetCore and Angular, Actually I want to create a signed URL with the key and the secret key and ... in the backend, and then I want to upload the file in the angular by the generated URL in the backend

my backend code in .net :

  1.  public  ServiceResponse GetPreSigned(FileCategory prepend, string append = null)
  2.     {
  3.         var mediaId = Guid.NewGuid();
  4.         var config = new AmazonS3Config
  5.         {
  6.             SignatureVersion = &quot;v4&quot;,
  7.             RegionEndpoint = RegionEndpoint.USEast1,
  8.             ServiceURL = _config.LIARA_ENDPOINT
  9.         };
  11.         var amazonS3Client = new AmazonS3Client(_config.LIARA_ACCESS_KEY, _config.LIARA_SECRET_KEY, config);
  13.         Amazon.S3.Model.GetPreSignedUrlRequest ccc = new Amazon.S3.Model.GetPreSignedUrlRequest()
  14.         {
  15.             BucketName = _config.LIARA_BUCKET_NAME,
  16.             Key = GenerateResourceKey(mediaId, prepend.ToString(), append),
  17.             Expires = DateTime.Now.AddMinutes(30),
  18.             Verb = HttpVerb.PUT,
  19.         };
  20.         
  21.         return new GetMediaPostRequestSuccess
  22.         {
  23.             MediaKey = GenerateResourceKey(mediaId, prepend.ToString(), append),
  24.             BucketUri = amazonS3Client.GetPreSignedURL(ccc)
  25.         };
  26.     }

and the angular code is :

  1.   uploadFile(file: any, preSignedUrl: GetMediaPostRequestSuccess): Observable&lt;HttpEvent&lt;any&gt;&gt; {
  3. const formData: FormData = new FormData();
  4. formData.append(&#39;file&#39;, file);
  5. // Upload file by using the signed URL 
  6. return this._http.put(preSignedUrl.bucketUri, formData, {
  7.   headers: { &#39;dont-modify-this-one&#39;: &#39;&#39;}, // To Avoid Add Autorization Header by Intercepter
  8.   observe: &#39;events&#39;
  9. })

and I got the below message as a response :
The request signature we calculated does not match the signature you provided. Check your key and signing method.

also this is my request params :
Upload file by .NetCore and Angular On S3 – The request signature we calculated does not match the signature you provided. Check your key and

I think I missed something in the request header like Authorization.

Can I use GetPreSignedURL to upload a file? is GetPreSignedURL responsible for signature and all security issues?

答案1

得分: 0

Setting ContentType in GetPreSignedUrlRequest, solved the problem

Amazon.S3.Model.GetPreSignedUrlRequest config = new Amazon.S3.Model.GetPreSignedUrlRequest()
{
BucketName = _config.LIARA_BUCKET_NAME,
Key = GenerateResourceKey(mediaId, request.FileCategory.ToString(), request.Append ),
Expires = DateTime.Now.AddDays(30),
Verb = HttpVerb.PUT,

  1. ContentType = string.IsNullOrEmpty(request.FileType) ? "application/octet-stream" : request.FileType

};

return amazonS3Client.GetPreSignedURL(config);

Also on the client side, we don't need to pass the formData, just pass the file as payload

uploadFile(file: any, preSignedUrl: GetMediaPostRequestSuccess):
Observable<HttpEvent> {
return this._http.put(preSignedUrl.bucketUri, file, {
headers: {
'dont-modify-this-one': '',
'Content-Type': file.type !== '' ? file.type : 'application/octet-stream'
},
reportProgress: true,
observe: 'events'
})
}

英文:

Setting ContentType in GetPreSignedUrlRequest, solved the problem

  1.         Amazon.S3.Model.GetPreSignedUrlRequest config = new Amazon.S3.Model.GetPreSignedUrlRequest()
  2.         {                
  3.             BucketName = _config.LIARA_BUCKET_NAME,
  4.             Key = GenerateResourceKey(mediaId, request.FileCategory.ToString(), request.Append ),
  5.             Expires = DateTime.Now.AddDays(30),
  6.             Verb = HttpVerb.PUT,
  8.             ContentType = string.IsNullOrEmpty(request.FileType) ? &quot;application/octet-stream&quot; : request.FileType
  9.         };
  11.         return amazonS3Client.GetPreSignedURL(config);

Also on the client side, we don't need to pass the formData, just pass the file as payload

  1. uploadFile(file: any, preSignedUrl: GetMediaPostRequestSuccess): 
  2. Observable&lt;HttpEvent&lt;any&gt;&gt; {
  3.   return this._http.put(preSignedUrl.bucketUri, file, {
  4.     headers: {
  5.      &#39;dont-modify-this-one&#39;: &#39;&#39;,
  6.      &#39;Content-Type&#39;: file.type !== &#39;&#39; ? file.type : application/octet-stream&#39;
  7.   },
  8.   reportProgress: true,
  9.   observe: &#39;events&#39;
  10. })

}

huangapple
  • 本文由 发表于 2023年6月8日 23:57:19
  • 转载请务必保留本文链接：https://go.coder-hub.com/76433701.html
  • .net-core
  • amazon-s3
  • angular
  • aws-sdk
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定