Образец приложения, приведенный ниже, аутентифицирует пользователей при помощи федерации сетевых удостоверений и учетной записи Facebook. После входа в систему пользователь получает временные данные, подтверждающие права доступа, а также заранее указанную роль IAM (AWS Identity and Access Management), политика которой позволяет загружать и просматривать объекты в Amazon S3.
Данное руководство предназначено для ознакомления читателей с процедурой интеграции работающих с AWS веб-приложений на JavaScript и стороннего провайдера идентификации, настройкой правильных разрешений федеративного доступа к AWS API, а также базовым использованием AWS SDK для JavaScript.
- Перейдите к Консоли Amazon S3.
- Выберите уже существующую корзину или создайте новую. Запомните название и регион корзины для дальнейшего использования в приложении.
- Нажмите на вкладку Properties, откройте раздел Permissions, и нажмите Edit CORS Configuration.
- Скопируйте следующий код XML в текстовое поле и нажмите Save
*
GET
PUT
POST
DELETE
*
Чтобы разрешить вход с помощью федерации сетевых удостоверений, нужно создать приложение на странице разработчика Facebook и зафиксировать его ID. Убедитесь, что настройки приложения Facebook разрешают вход в систему из домена, где хранится образец приложения. Для этого зайдите в раздел Settings на странице приложения в Facebook, и в строке Site URL укажите домен, где будет располагаться ваш html (например, http://localhost/ при локальном тестировании или https://YOUR-BUCKET-NAME.s3.amazonaws.com/ при хранении html в S3).
- Зайдите в раздел Policies в консоли IAM и нажмите Create Policy -> Create Your Own Policy.
- Назовите вашу политику (например JavaScriptSample), скопируйте нижеуказанную политику JSON в текстовое поле Policy Documentи в двух местах замените YOUR_BUCKET_NAME на реальное название корзины, затем нажмите Create Policy.
- Теперь в консоли IAM перейдите в раздел Roles и нажмите Create New Role.
- Назовите роль и выберите Role for Identity Provider Access -> Grant access to web identity providers.
- Выберите 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}"
}
}
}
]
}
Прежде чем запускать пробное приложение, необходимо заменить 'YOUR_APP_ID', 'YOUR_ROLE_ARN', 'YOUR_BUCKET_NAME' и 'YOUR_BUCKET_REGION' соответствующими величинами. Регион указывается как 'us-east-1' (США (стандартн.), 'us-west-2' (Орегон), и т.д. Имя ARN для роли IAM можно найти в Консоли IAM, выбрав роль и открыв вкладку Summary.
AWS SDK for JavaScript - Sample Application
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 + "
";});
results.innerHTML = objKeys;
}
});
}
/*!
* Вход в приложение с помощью учетной записи Facebook.
* Используется Facebook SDK для JavaScript, доступный по ссылке
* 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'));
http://YOUR_DOMAIN/sample.html
Пробное приложение разработано для того, чтобы продемонстрировать следующие моменты.
- Использование федерации сетевых удостоверений AWS и учетных записей Facebook для аутентификации пользователей.
- Назначение конкретным пользователям разрешения на запись на уровне префиксов с использованием политики ролей IAM таким образом, чтобы пользователь не мог перезаписывать или изменять объекты других пользователей.
- Инстанцирование клиента Amazon Simple Storage Service(Amazon S3).
- Использование тега , вызывающего встроенный файловый интерфейс браузера, и загрузка выбранных файлов в корзину с разрешением на публичное чтение.
Если у вас возникли проблемы при настройке или вы хотите оставить комментарий по поводу пробного приложения, свяжитесь с нами на форуме AWS SDK для JavaScript.
Более подробные руководства пользователей, документацию по API, форумы разработчиков и другие ресурсы для разработчиков вы можете найти на странице AWS SDK для JavaScript в браузере.