简体   繁体   English

访问被拒绝到S3中的存储桶-禁止错误403(精细上传程序)

[英]Access denied to bucket in S3 - Error 403 Forbidden (Fine-Uploader)

I have a problem getting access to the bucket in Amazon S3. 我无法访问Amazon S3中的存储桶。 I follow step-by-step the instructions in the Fineuploader in official blog (Fineuploader S3 Upload Directly to Amazon S3 from your Browser), I check similar questions but non of them make reference to this specific case. 我按照官方博客中的Fineuploader(Fineuploader S3从您的浏览器直接上传到Amazon S3)中的说明进行逐步操作,我检查了类似的问题,但没有一个参考此特定案例。

My intention is to replicate the fineuploader.com demo for S3, with the only difference that I'm not using advance features (chunking, drag & drop, retry, and more), in other words make a "Simple Upload". 我的意图是复制S3的fineuploader.com演示,唯一的不同是我没有使用高级功能(分块,拖放,重试等),换句话说,进行了“简单上载”。

Excuse me if I'm very redundant or very explicit, I only want to make clear the procedure I have done. 打扰一下,如果我很冗长或很露骨,我只想弄清楚我完成的程序。

I copied the code in client-side of http://fineuploader.com/demos.html#amazon-demo and changed some lines: 我将代码复制到了http://fineuploader.com/demos.html#amazon-demo的客户端,并更改了以下几行:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico" >

    <title></title>

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>
<body>

<!-- jQuery ====================================================================== -->
<script src="http://code.jquery.com/jquery-latest.js"></script>

<!-- Fine Uploader JS ====================================================================== -->
<script src="../../custom.fineuploader-5.0.8.js"></script>
<script>
$(document).ready(function () {
    $('#fineuploader-s3').fineUploaderS3({
        debug: true,
        request: {
            // REQUIRED: We are using a custom domain
            // for our S3 bucket, in this case.  You can
            // use any valid URL that points to your bucket.
            endpoint: "bucketname.s3.amazonaws.com",

            // REQUIRED: The AWS public key for the client-side user
            // we provisioned.

            // Access key - User create in IAM
            accessKey: "AKIAJUGFU2PN7PXXXXXX"
        },

        template: "simple-previews-template",

        // REQUIRED: Path to our local server where requests
        // can be signed.
        signature: {
            endpoint: "/fineuploader/html/templates/s3demo.php"
        },

        // OPTIONAL: An endopint for Fine Uploader to POST to
        // after the file has been successfully uploaded.
        // Server-side, we can declare this upload a failure
        // if something is wrong with the file.
        uploadSuccess: {
            endpoint: "/fineuploader/html/templates/s3demo.php?success"
        },

        // USUALLY REQUIRED: Blank file on the same domain
        // as this page, for IE9 and older support.
        // iframeSupport: {
        //     localBlankPagePath: "/server/success.html"
        // },

        // optional feature
        // chunking: {
        //     enabled: true
        // },

        // optional feature
        // resume: {
        //     enabled: true
        // },

        // optional feature
        // deleteFile: {
        //     enabled: true,
        //     method: "POST",
        //     endpoint: "/s3demo.php"
        // },

        // optional feature
        // validation: {
        //     itemLimit: 5,
        //     sizeLimit: 15000000
        // },

        // thumbnails: {
        //     placeholders: {
        //         notAvailablePath: "images/not_available-generic.png",
        //         waitingPath: "images/waiting-generic.png"
        //     }
        // }
    })
        // Enable the "view" link in the UI that allows the file to be downloaded/viewed
        .on('complete', function(event, id, name, response) {
            var $fileEl = $(this).fineUploaderS3("getItemByFileId", id),
                $viewBtn = $fileEl.find(".view-btn");

            if (response.success) {
                $viewBtn.show();
                $viewBtn.attr("href", response.tempLink);
            }
        });
    });
</script>

<!-- Fine Uploader CSS ====================================================================== -->
<link href="../../custom.fineuploader-5.0.8.css" rel="stylesheet">

<!-- Fine Uploader DOM Element ====================================================================== -->
<div id="fineuploader-s3"></div>

<!-- Fine Uploader template ====================================================================== -->
<script type="text/template" id="simple-previews-template">
    <div class="qq-uploader-selector qq-uploader">
    <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
        <span>Drop files here to upload</span>
    </div>
    <div class="qq-upload-button-selector qq-upload-button">
        <div>Upload a file</div>
    </div>
      <span class="qq-drop-processing-selector qq-drop-processing">
          <span>Processing dropped files...</span>
          <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
      </span>
    <ul class="qq-upload-list-selector qq-upload-list">
        <li>
            <div class="qq-progress-bar-container-selector">
                <div class="qq-progress-bar-selector qq-progress-bar"></div>
            </div>
            <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
            <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
            <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
            <span class="qq-upload-file-selector qq-upload-file"></span>
            <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
            <span class="qq-upload-size-selector qq-upload-size"></span>
            <a class="qq-upload-cancel-selector btn-small btn-warning" href="#">Cancel</a>
            <a class="qq-upload-retry-selector btn-small btn-info" href="#">Retry</a>
            <a class="qq-upload-delete-selector btn-small btn-warning" href="#">Delete</a>
            <a class="qq-upload-pause-selector btn-small btn-info" href="#">Pause</a>
            <a class="qq-upload-continue-selector btn-small btn-info" href="#">Continue</a>
            <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
            <a class="view-btn btn-small btn-info hide" target="_blank">View</a>
        </li>
    </ul>
</div>
</script>

</body>
</html>

My code in the server-side was taken from https://github.com/FineUploader/server-examples/blob/master/php/s3/s3demo-thumbnails-cors.php only comment and changed comment the following lines. 我在服务器端的代码来自https://github.com/FineUploader/server-examples/blob/master/php/s3/s3demo-thumbnails-cors.php,仅注释和更改了以下几行。

Commented lines: 评论行:

// require 'aws-autoloader.php';
// use Aws\S3\S3Client;

// $serverPublicKey = $_SERVER['PARAM1'];
// $serverPrivateKey = $_SERVER['PARAM2'];

// $expectedMaxSize = 15000000;

Changed lines: 更改的行:

// Secret key - User create in IAM
$clientPrivateKey = $_SERVER['BIsYDPrOfWyWeUXueJaiaAem7he3R5THxx000Xxx'];
$expectedBucketName = "bucketname";

Everything appears to be in order, but when I upload an image, I have an error in my Chrome console: 一切似乎都井井有条,但是当我上传图片时,我的Chrome控制台出现错误:

POST http://bucketname.s3.amazonaws.com/ 403 (Forbidden)

The access key and secret key contains characters X and 0 that were placed for illustrative purposes. 访问密钥和秘密密钥包含为说明目的而放置的字符X和0。 The keys are not real. 密钥不是真实的。

I will appreciate your help. 感谢您的帮助。

$clientPrivateKey = $_SERVER['xxx'];

I think this is wrong. 我认为这是错误的。 In the original file it says: 在原始文件中说:

// These assume you have the associated AWS keys stored in
// the associated system environment variables
$clientPrivateKey = $_SERVER['AWS_SECRET_KEY'];

So either set up a variable in your environment named AWS_SECRET_KEY and restore the line to what it was, or just use 因此,要么在您的环境中设置一个名为AWS_SECRET_KEY的变量,然后将该行恢复为原来的状态,要么只使用

$clientPrivateKey = 'xxx';

I'd also recommend changing the key, as you've posted it in a public place now and someone is bound to do nasty things to your bucket! 我还建议您更改密钥,因为您现在已将其发布在公共场所,并且有人一定会在您的存储桶中做讨厌的事情!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM