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

时间:2018-05-07 22:13:22

标签: angular amazon-web-services amazon-s3 amazon-cognito auth0

我正在尝试将图片从我的网站直接上传到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,如下所示 enter image description here 但我仍然得到以下错误: -

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)

请帮我解决此问题。

2 个答案:

答案 0 :(得分:0)

您似乎正在设置凭据配置,但您没有从cognito检索有效凭据。在“AWSService.config.update(...”试试这个:

之后
class Peoples {
private String name, age;

public Peoples() {}

public Peoples(String name, String age) {
    this.name = name;
    this.age = age;
}

public String getName() {
    return name;
}

public String getAge() {
    return age;
}
}

如果“get”通话中没有错误,您应该能够达到目标。的问候,

答案 1 :(得分:0)

我已经通过更新下面的fileEvent()函数修复了这个问题,它工作得很漂亮。赫克托耳的意见帮助我深入挖掘。谢谢Hector。

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');
    }
});
}