无法将图像从我的网站直接上传到 S3

Question

我正在尝试将图像从我的网站直接上传到 AWS S3。我遵循了此处提到的文档：- https://auth0.com/docs/integrations/integrating-auth0-amazon-cognito-mobile-apps

我用来上传图片的代码如下：-

import { Component, OnInit } from '@angular/core';
import * as AWS from 'aws-sdk';
import { AuthService } from '../../services/auth.service';

@Component({
  selector: 'app-profile',
  templateUrl: `
  <label for="imageUpload">Image Upload</label>
  <input type="file" (change)="fileEvent($event)" name="imageUpload" id="imageUpload"/>
  `,
  styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {

  constructor(public auth: AuthService) { }

  ngOnInit() {
  }

  fileEvent(fileInput: any) {
    const AWSService = AWS;
    const region = 'us-west-2';
    const bucketName = '<my-bucket-name>'; // e.g. images.uat.testing, tried this one and below one.
    // const bucketName = 'http://<my-bucket-name>.us-west-2.amazonaws.com.';
    const IdentityPoolId = 'us-west-2:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXX';
    const token = this.auth.getAccessToken();
    console.log(token);
    const file = fileInput.target.files[0];
    // Configures the AWS service and initial authorization
    AWSService.config.update({
      region: region,
      credentials: new AWSService.CognitoIdentityCredentials({
        IdentityPoolId: IdentityPoolId,
        Logins: {
          'mypleaksofficial.auth0.com': token
      }
      })
    });

    // adds the S3 service, make sure the api version and bucket are correct
    const s3 = new AWSService.S3({
      apiVersion: '2006-03-01',
      params: { Bucket: bucketName }
    });

    // I store this in a variable for retrieval later
    const image: string = file.name;
    s3.upload({ Key: file.name, Bucket: bucketName, Body: file, ACL: 'public-read' }, function (err, data) {
      if (err) {
        console.log(err, 'there was an error uploading your file');
      }
    });
  }
}

我还将我的 OpenID 提供商附加到 Amazon Cognito，如下所示但我仍然收到以下错误：-

POST https://cognito-identity.us-west-2.amazonaws.com/ 400 ()
    profile.component.ts:46 Error: Missing credentials in config
        at Request.extractError (json.js:48)
        at Request.callListeners (sequential_executor.js:105)

请帮我解决这个问题。

Answer 1

您似乎正在设置凭据配置，但并未从 Cognito 检索有效凭据。在 "AWSService.config.update(..." 之后试试这个：

AWS.config.credentials.get(function(err, data) {
    if (!err) console.log("Error getting credentials", err);
    else {
        const s3 = new AWSService.S3({
            apiVersion: '2006-03-01',
            params: { Bucket: bucketName }
        });
        const image: string = file.name;
        s3.upload({ Key: file.name, Bucket: bucketName, Body: file, ACL: 'public-read' }, function (err, data) {
            if (err) {
                console.log(err, 'there was an error uploading your file');
            }
        });
    }
});

如果您在 "get" 调用中没有错误，您应该能够达到您的目标。此致，

Answer 2

我已经通过如下更新 fileEvent() 函数解决了这个问题，并且效果很好。赫克托的意见帮助我深入挖掘。谢谢赫克托

fileEvent(fileInput: any) {
const region = <aws region>;
const file = fileInput.target.files[0];
const bucketName = <bucketName>;
const accessKey = <accessKey>;
const secretKey = <secretKey>;
console.log(file);
AWS.config.credentials = new AWS.CognitoIdentityCredentials({

  // either IdentityPoolId or IdentityId is required
  // See the IdentityPoolId param for AWS.CognitoIdentity.getID (linked below)
  // See the IdentityId param for AWS.CognitoIdentity.getCredentialsForIdentity
  // or AWS.CognitoIdentity.getOpenIdToken (linked below)
  IdentityPoolId: <IdentityPoolId>,
  // IdentityId: <IdentityId>,

  // optional, only necessary when the identity pool is not configured
  // to use IAM roles in the Amazon Cognito Console
  // See the RoleArn param for AWS.STS.assumeRoleWithWebIdentity (linked below)
  // RoleArn: 'arn:aws:iam::1234567890:role/MYAPP-CognitoIdentity',

  // optional tokens, used for authenticated login
  // See the Logins param for AWS.CognitoIdentity.getID (linked below)
  Logins: {
    'graph.facebook.com': 'FBTOKEN',
    'www.amazon.com': 'AMAZONTOKEN',
    'accounts.google.com': 'GOOGLETOKEN',
    'api.twitter.com': 'TWITTERTOKEN',
    'www.digits.com': 'DIGITSTOKEN'
  },

  // optional name, defaults to web-identity
  // See the RoleSessionName param for AWS.STS.assumeRoleWithWebIdentity (linked below)
  RoleSessionName: 'web',

  // optional, only necessary when application runs in a browser
  // and multiple users are signed in at once, used for caching
  // LoginId: 'example@gmail.com'
}, {
   // optionally provide configuration to apply to the underlying service clients
   // if configuration is not provided, then configuration will be pulled from AWS.config
   // region should match the region your identity pool is located in
   region: region,

   // specify timeout options
   httpOptions: {
     timeout: 100
   }
});

const bucket = new AWS.S3({
    region: region,
    credentials: new AWS.Credentials(accessKey, secretKey)
});
const params = {
    Bucket: bucketName,
    Key: file.name,
    ContentType: file.type,
    Body: file,
    ServerSideEncryption: 'AES256'
};

bucket.putObject(params, function(err, data) {
    if (err) {
        console.log(err.message);
        return false;
    } else {
        // Upload Successfully Finished
        console.log('File Uploaded Successfully');
    }
});
}

无法将图像从我的网站直接上传到 S3

Not able to upload images from my website to S3 directly

amazon-s3

amazon-web-services

amazon-cognito

auth0

angular