AWS SDK for JavaScript in the Browserでs3+js+facebookアプリのチュートリアルをやってみた際のハマりどころメモ

ブラウザからS3に画像をアップロードするfacebookアプリケーションのチュートリアルがあったので試してみました。

やってみたチュートリアル(※英語)

AWS SDK for JavaScript in the Browser (Developer Preview)にアクセス

f:id:mitsugi-bb:20140308200938p:plain

Getting Started をクリック。↓のようなページ。

f:id:mitsugi-bb:20140308201050p:plain

1.Facebookアプリを作成

Facebook developer pageにアクセスしCreate New appでアプリ作成。既にある場合はこの手順は不要。

f:id:mitsugi-bb:20140308203228p:plain

アプリの名称とカテゴリを入力して登録。アプリ名にfbとかfacebookという文字は含めることができなかった。

f:id:mitsugi-bb:20140308203902p:plain

作成したらアプリIDを控える。

f:id:mitsugi-bb:20140308204623p:plain

2.IAMの作成

IAM:Identity and Access Management の略です。

IAM consoleにアクセスして、Create New Role。

f:id:mitsugi-bb:20140308211939p:plain

ロール名を入力。

f:id:mitsugi-bb:20140308212034p:plain

Grant access to web identity providersを選択

f:id:mitsugi-bb:20140308212145p:plain

先ほどつくったFacebookのアプリIDを入力

f:id:mitsugi-bb:20140308212302p:plain

次へ。

f:id:mitsugi-bb:20140308212452p:plain

カスタムポリシーを選択。

f:id:mitsugi-bb:20140308212551p:plain

JavaScript in the BrowserのJSONをコピー

f:id:mitsugi-bb:20140308212831p:plain

コピーしたJSONを貼付ける。その際に、YOUR_BUCKET_NAMEの部分を自分のバケット名に置き換える。ここでやっていることは、facebookアプリのユーザがS3に対してどのような権限を持つかを記載しているみたい。

f:id:mitsugi-bb:20140308213047p:plain

あとはCreateRoleのボタンで作成完了。Role ARNの文字列は後から使います。

f:id:mitsugi-bb:20140308213404p:plain

3.S3バケットにCORSの設定

Amazon S3 consoleにアクセスして、 Edit CORS Configurationを選択。

f:id:mitsugi-bb:20140308214228p:plain

CROSSの内容をコピペして張り付け。 AllowedOriginの所は自分のドメインにしといた方が安全だけどもSSLでない場合は偽装できそうな気がする。。

f:id:mitsugi-bb:20140308214421p:plain

4.HTMLを作成してS3にアップ

サンプルのHTMLをコピーして、'YOUR_APP_ID', 'YOUR_ROLE_ARN','YOUR_BUCKET_NAME' をそれぞれ書き換える。

f:id:mitsugi-bb:20140308214740p:plain

でHTMLをS3にアップロード。

注意：バケットがtokyoの場合は他にも一部修正が必要です。

var bucket = new AWS.S3({params: {Bucket: bucketName},
      region: 'ap-northeast-1',
      maxRetries: 15});

regionを選択してないと、No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin api....ってエラーが発生します。

どうも作成途中のチュートリアルっぽいので一部修正

bucket.putObject(params, function (err, data) {
  if (err) {
    results.innerHTML = 'ERROR: ' + err;
  } else {
    var imageTag = "";
    results.innerHTML += imageTag;
  }
});

↓バケットにファイルをアップした際に、imgタグをinnerHTMLに設定するように修正

var fileurl = 'http://' + bucketName + '/' + objKey;
bucket.putObject(params, function (err, data) {
  if (err) {
    results.innerHTML = 'ERROR: ' + err;
  } else {
    var imageTag = '<img src="' + fileurl + '"/>';
    results.innerHTML += imageTag;
  }
});