The sample application below authenticates users with web identity federation and Facebook login. To enable this, you need to create an application at the Facebook developer page and note the App ID.

  1. Go to the IAM console and click Create New Role.
  2. Name your role and select Role for Web Identity Provider Access.
  3. Type in your Facebook App ID.
  4. On the Set Permissions step, choose Custom Policy.
  5. Name your permission policy, copy the code below into the Policy Document text box.
  6. Replace YOUR_BUCKET_NAME, and click Continue then 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"

        }

    ]

}

  1. Navigate to the Amazon S3 console.
  2. Click the Properties tab, open the Permissions section, and click Edit CORS Configuration.
  3. Copy the below XML into the text box and click 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>

Before you can run the example, you need to replace 'YOUR_APP_ID', 'YOUR_ROLE_ARN' and 'YOUR_BUCKET_NAME' with appropriate values. The ARN (Amazon Resource Name) of your IAM role can be found in the IAM console by selecting your role and opening the Summary tab.

<!DOCTYPE html>

<html>

   <head>

      <title>AWS SDK for JavaScript - Sample Application</title>

      <script src="https://sdk.amazonaws.com/js/aws-sdk-2.0.0-rc10.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';

         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 {

                     var imageTag = "";

                     results.innerHTML += imageTag;

                  }

               });

            } else {

               results.innerHTML = 'Nothing to upload.';

            }

         }, false);

 

         /*!

          * 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

This sample application is designed to show you how to:

  • Use the AWS Web Identity Federation and Facebook login to authenticate users.
  • Assign user-specific write permissions at the prefix level with IAM role policy to keep each user's uploaded objects secure.
  • Instantiate an Amazon Simple Storage Service (Amazon S3) client.
  • Use <input type="file" /> tag that calls the browser's native file interface, and upload the chosen file to an Amazon S3 bucket, with 'public-read' permissions.

If you have trouble getting set up or have other feedback about this sample, let us know on the AWS SDK for JavaScript forum.

For in-depth user guides, API documentation, developer forums, and other developer resources, see the AWS SDK for JavaScript in the Browser page.