Menu
AWS SDK for JavaScript
Developer Guide

Getting Started in a Browser Script

Let's get started with the SDK for JavaScript by creating a simple browser-based app that authenticates users using web identity federation and Facebook login. After logging in, the user gets temporary AWS credentials and assumes the pre-specified AWS Identity and Access Management (IAM) role. The role policy allows uploading and listing objects in Amazon Simple Storage Service (Amazon S3).

Step 1: Creating and Configuring an Amazon S3 Bucket

Cross-origin resource sharing, or CORS, must be configured on the Amazon S3 bucket to be accessed directly from JavaScript in the browser. For more information about CORS, see Cross-Origin Resource Sharing (CORS).

To create and configure the Amazon S3 bucket

  1. Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/.

  2. Choose an existing bucket or Create bucket. Note the bucket name and bucket region for later use in the application.

  3. Choose the Properties tab of the bucket.

  4. Open the Permissions group.

  5. Choose Add CORS Configuration.

  6. Copy the following XML into the CORS Configuration Editor and then choose 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>

Step 2: Creating the Facebook App and Getting the App ID

To enable Facebook login with web identity federation, log in to Facebook and then create an application at the Facebook developer website. Note the app ID provided by Facebook, which you will include in the browser script later.

Configure the app settings in Facebook to specify the domain that hosts the sample app. Go to the Settings section in the Facebook app page and then type the Site URL for the domain where the HTML page will be hosted.

For example, if you are testing the app locally, type http://localhost/. If you are hosting the HTML page in an Amazon S3 bucket configured as a static web server, type https://YOUR-BUCKET-NAME.s3.amazonaws.com/.

Setting the Site URL for local host for testing

Step 3: Creating an IAM Role to Assign Users

To prevent users from overwriting or changing other users' objects, assign user-specific write permissions at the prefix level with an IAM role policy. For more information on IAM roles, see Creating a Role to Delegate Permissions to an AWS Service in the IAM User Guide.

To create the IAM role and assign users

  1. Sign in to the Identity and Access Management (IAM) console at https://console.aws.amazon.com/iam/.

  2. In the navigation pane, choose Policies and then choose Create Policy. For Create Your Own Policy, choose Select.

  3. Name your policy (for example JavaScriptSample) and then copy the following JSON policy to the Policy Document text box. Replace the two instances of YOUR_BUCKET_NAME with your actual bucket name and then choose Create Policy.

    {
       "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}"
                 }
              }
           }
        ]
    }
  4. In the IAM console navigation pane, choose Roles and then choose Create New Role.

  5. Name your role and then choose Next Step.

  6. Choose Role for Identity Provider Access. For Grant access to web identity providers, choose Select.

  7. For Identity Provider, choose Facebook. For Application ID, type your app ID and then choose Next Step.

  8. On the Verify Role Trust page, choose Next Step.

  9. On the Attach Policy page, choose the policy you just created and then choose Next Step.

  10. Choose Create Role.

Step 4: Creating HTML File and Browser Script

The example app consists of a single HTML page that contains the user interface and browser script. Create an HTML document and copy the following contents into it.

<!DOCTYPE html>
<html>
<head>
    <title>AWS SDK for JavaScript - Sample Application</title>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.6.10.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/quickstart/
         */

        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>

Before you can run the example, replace YOUR_APP_ID, YOUR_ROLE_ARN, YOUR_BUCKET_NAME, and YOUR_BUCKET_REGION with the actual values for the Facebook app ID, IAM role ARN, Amazon S3 bucket name, and bucket region. You can find the Amazon Resource Name (ARN) of your IAM role in the IAM console by selecting the role and then choosing the Summary tab.

Step 5: Running the Sample

To run the sample app, type the URL into a browser.

http://YOUR_DOMAIN/sample.html