以下のサンプルアプリケーションは、ウェブ ID フェデレーションと Facebook ログインでユーザーを認証します。ログインしたユーザーは一時的な AWS 認証情報を取得し、Amazon S3 でのオブジェクトのアップロードとリスト作成がポリシーで許可されている、事前指定された IAM (AWS Identity and Access Management) ロールが適用されます。
このガイドは、AWS を使用した JavaScript ウェブアプリケーションのサードパーティ ID プロバイダーとの統合、AWS API に対するフェデレーテッドアクセス向けの権限範囲の適切な設定、および AWS SDK for JavaScript のベーシックな使用方法について説明するために準備されました。
- Amazon S3 コンソールに移動します。
- 既存のバケットを選択するか、必要な場合は新規作成します。後ほどアプリケーションで使用するため、バケット名とバケットリージョンをメモします。
- [Properties] タブをクリックして [Permissions] セクションを開き、[Edit CORS Configuration] をクリックします。
- 以下の XML をテキストボックスにコピーし、[Save] をクリックします。
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
ウェブ ID フェデレーションに Facebook ログインを有効にするには、Facebook 開発者ページでアプリケーションを作成し、アプリ ID をメモします。Facebook アプリがサンプルアプリをホストするドメインからのログインを許可するよう設定されていることを確認します。このためには、Facebook アプリページの [Settings] セクションに移動して、HTML がホストされる場所をドメインとして [Site URL] に指定します（例として、ローカルでテストする場合 http://localhost/、HTML を S3 でホストする場合 https://YOUR-BUCKET-NAME.s3.amazonaws.com/となります）。
- IAM コンソールの [Policies] に移動し、[Create Policy] -> [Create Your Own Policy] をクリックします。
- ポリシーに名前を付け（"JavaScriptSample" など）、下の JSON ポリシーを [Policy Document] テキストボックスにコピーし、YOUR_BUCKET_NAME の 2 つのインスタンスを実際のバケット名に置換し、[Create Policy] をクリックします。
- IAM コンソールの [Roles] セクションに移動し、[Create New Role] をクリックします。
- ロールに名前をつけて、[Role for Identity Provider Access] -> [Grant access to web identity providers] を選択します。
- [Facebook] を選択し、Facebook のアプリ ID を入力します。
- [Verify Role Trust] で [Next Step] をクリックします。
- [Attach Policy] のステップで、作成したポリシーを選択し、[Next Step] をクリックし、次のページで [Create Role] をクリックします。
{
"Version":"2012-10-17",
"Statement": [
{
"Action": [
"s3:PutObject",
"s3:PutObjectAcl"
],
"Resource": [
"arn:aws:s3:::YOUR_BUCKET_NAME/facebook-${graph.facebook.com:id}/*"
],
"Effect": "Allow"
},
{
"Action": [
"s3:ListBucket"
],
"Resource": [
"arn:aws:s3:::YOUR_BUCKET_NAME"
],
"Effect": "Allow",
"Condition": {
"StringEquals": {
"s3:prefix": "facebook-${graph.facebook.com:id}"
}
}
}
]
}
<!DOCTYPE html>
<html>
<head>
<title>AWS SDK for JavaScript - Sample Application</title>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.12.min.js"></script>
</head>
<body>
<input type="file" id="file-chooser" />
<button id="upload-button" style="display:none">Upload to S3</button>
<div id="results"></div>
<div id="fb-root"></div>
<script type="text/javascript">
var appId = 'YOUR_APP_ID';
var roleArn = 'YOUR_ROLE_ARN';
var bucketName = 'YOUR_BUCKET_NAME';
AWS.config.region = 'YOUR_BUCKET_REGION';
var fbUserId;
var bucket = new AWS.S3({
params: {
Bucket: bucketName
}
});
var fileChooser = document.getElementById('file-chooser');
var button = document.getElementById('upload-button');
var results = document.getElementById('results');
button.addEventListener('click', function () {
var file = fileChooser.files[0];
if (file) {
results.innerHTML = '';
//Object key will be facebook-USERID#/FILE_NAME
var objKey = 'facebook-' + fbUserId + '/' + file.name;
var params = {
Key: objKey,
ContentType: file.type,
Body: file,
ACL: 'public-read'
};
bucket.putObject(params, function (err, data) {
if (err) {
results.innerHTML = 'ERROR: ' + err;
} else {
listObjs();
}
});
} else {
results.innerHTML = 'Nothing to upload.';
}
}, false);
function listObjs() {
var prefix = 'facebook-' + fbUserId;
bucket.listObjects({
Prefix: prefix
}, function (err, data) {
if (err) {
results.innerHTML = 'ERROR: ' + err;
} else {
var objKeys = "";
data.Contents.forEach(function (obj) {
objKeys += obj.Key + "<br>";
});
results.innerHTML = objKeys;
}
});
}
/*!
* Login to your application using Facebook.
* Uses the Facebook SDK for JavaScript available here:
* https://developers.facebook.com/docs/javascript/gettingstarted/
*/
window.fbAsyncInit = function () {
FB.init({
appId: appId
});
FB.login(function (response) {
bucket.config.credentials = new AWS.WebIdentityCredentials({
ProviderId: 'graph.facebook.com',
RoleArn: roleArn,
WebIdentityToken: response.authResponse.accessToken
});
fbUserId = response.authResponse.userID;
button.style.display = 'block';
});
};
// Load the Facebook SDK asynchronously
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
http://YOUR_DOMAIN/sample.html
このサンプルアプリケーションは、以下の操作を実行する方法を示すために設計されています。
- AWS ウェブ ID フェデレーションおよび Facebook ログインを使用して、ユーザーを認証する。
- IAM ロールポリシーに従って、プレフィックスレベルでユーザー固有の書き込み権限を割り当てることにより、ユーザーが他のユーザーのオブジェクトを上書きまたは変更できないようにする。
- Amazon Simple Storage Service (Amazon S3) クライアントをインスタンス化する。
- ブラウザのネイティブファイルインターフェイスを呼び出す タグを使用し、選択したファイルを 'public-read' 権限で Amazon S3 バケットにアップロードする。
セットアップがうまくいかない場合、またはこのサンプルに関するその他のフィードバックがある場合は、AWS SDK for JavaScript フォーラムでお知らせください。
詳細なユーザーガイド、API ドキュメント、開発者フォーラム、および他の開発者用リソースについては、「AWS SDK for JavaScript in the Browser」ページを参照してください。