読者です 読者をやめる 読者になる 読者になる

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

aws

ブラウザから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;
  }
});

5. 確認

S3にアップしたサイトにアクセスすると、facebookのログインを求められる。ログインしてる場合は省略される。

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

ログイン後にアプリの認証。

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

OKすると、ファイルアップロードのボタンが表示される。

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

ファイルをアップロードすると、S3にアップロードされて、保存された画像がimgタグに書き出され表示される。

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

生成されたimgタグを確認

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

バケットにも反映されてる。

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

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

以上でチュートリアルが完了。

ふりかえり。

keep

s3に関する調査は今後も続けよう。

problem

リージョンを意識しわすれて、CROSS部分でハマった。 mitsugeek.netって自分のドメインのページでテストしてるのはあまり良くない。

try

セキュリティの部分。fecebookのユーザ単位で見れる見れない等の制御とかできるのか?他のユーザのディレクトリに保存できてしまうのか?アクセスログとかいるのか?

場合によっては緩いサービスでしか利用価値はないかもしれない。 とはいいつつも、Developer Previewということなので、 これでサービス運用は企業システムでは今のところあり得ない話かもしれない。