Uploads without any server code

If you just want to simply accept files from users, why should you have to write server-side code? Well, if you are using Fine Uploader S3 version 4.2 or later, you don’t have to worry about server-side languages anymore! This blog post accompanies a live demo of this workflow at https://fineuploader-s3-client-demo.s3.amazonaws.com/index.html.

Summary

Starting with Fine Uploader S3 4.2, the “no server” upload workflow is fully supported. This means that you only need to host your JavaScript and HTML files. Fine Uploader S3, AWS, and your identity providers take care of the heavy-lifting for you.

The workflow is simple:

  1. authenticate your users with the help of an identity provider, such as Google
  2. Use the temporary token from your ID provider to grab temporary access keys from AWS
  3. Pass the keys on to Fine Uploader S3
  4. Your users can now upload to your S3 bucket

Requirements

A client-side workflow such as this one means that you must ensure your users are utilizing a modern browser (not IE9 or older). Some of the SDKs used here (mostly the AWS JavaScript SDK) will not work on older browsers.

Other things you will need to make this happen:

  • Fine Uploader S3 4.2+
  • OAuth/login JavaScript SDK from Google, Facebook, or Amazon
  • A simple web server to host your static content, such as a public-read S3 bucket
  • An AWS account
  • AWS JavaScript SDK

Concepts

You should be familiar, at a high-level, with OAuth 2.0, which is the standard used by Google, Amazon, Facebook, and other similar identity providers. An identity provider here will allow you to request temporary credentials from AWS on behalf of the authenticated user. These credentials are required by Fine Uploader S3 to upload files to your S3 bucket without any server-side intervention on your part. It is important to ensure traffic between your web app and the identity provider be secured via SSL (HTTPS) when using an OAuth 2.0 ID provider.

You must also be familiar with:

  • HTML
  • JavaScript
  • Amazon’s Simple Storage Service (S3)
  • Fine Uploader S3

Setting up your identity providers

The live demo of this workflow allows you to choose between Google, Facebook, and Amazon as identity providers. You will need to register your application with each of these identity providers, record the assigned client ID, and specify the domain(s) of your web application in order to ensure that authentication against your registered application can only occur on your application’s domain(s).

Google

1.) Login to the Google Cloud Console.

2.) Create a new project.
empty google cloud console project list

google cloud console create project

3.) Enable the “Google+ API”
enable Google+ API

4.) Create a new OAuth Client ID in the “Credentials” section of the “APIs & auth” side menu. The application type will be “Web application”. You should include the domain(s) of your web app in the “Authorized Javascript origins” text box. You can leave the “Authorized redirect URI” field blank.
create OAuth client ID

5.) Record the “Client ID for web application” value.
OAuth client ID

Facebook

1.) Visit the Facebook developers page.

2.) Invoke the “Apps” menu, and click “Create a new app”. Fill in the fields as appropriate.
create facebook app

3.) Record the App ID after creating the app.
facebook app ID

4.) Click on the “Settings” option on the right, and then click the “Add Platform” bar.
facebook app add platform

5.) Click “Website”.
facebook app choose app type

6.) Fill out the “Site URL” under the new “Website” section. This should be the domain of your web app. Finally, save your changes.
facebook app details

Amazon

1.) Sign in to Amazon’s App Console. with your AWS account. Click on the “Register new application” button.

2.) Fill out the relevant form fields. Note that all fields other than the logo URL are required.
register AWS app

3.) Record the App ID.
AWS app ID

4.) Expand the “Web Settings” section, and add your app’s domain name(s) in the “Allowed JavaScript Origins” section. Note that this URL must be SSL/HTTPS.
AWS web app settings

Creating and securing your S3 bucket

If you haven’t done so already, you will need to create an S3 bucket to receive your user’s files. This is covered in some detail in the “Configuring your buckets” section of the initial Fine Uploader S3 blog post.

In addition to the AllowedHeader values mentioned in the CORS section of the bucket configuration documentation, you will also need to ensure that the x-amz-security-token header is allowed.

Setting up your IAM roles

You will need to create a separate IAM role for each identity provider. Each role will link an identity provider to specific client-side permissions needed by Fine Uploader S3 to send files to your S3 bucket.

1.) Navigate to the IAM roles section of the AWS console.

2.) Click the “Create New Role” button & fill in a name.
IAM role name

3.) Choose the “Role for Identity Provider Access” option on the next step. Click the “Select” button next to “Grant access to web identity providers”.
IAM role for ID provider

4.) Pick an identity provider. If you are using Facebook or Amazon, paste the client ID you recorded when you registered your app in the “Application Id” field. If you are using Google, paste the application ID you recorded in the “Audience” field instead. Click “Continue”. You will be brought to a “Verify Role Trust” step. Click “Continue” again.
AWS role ID provider
AWS role verify ID provider

5.) Expand the “Policy Generator” section, and click “Select”.
AWS role policy generator

6.) You must now specify permissions for your S3 bucket. Fine Uploader S3 only needs the PutObject permission to upload files. However, if you intend to make all files publically viewable (as we do in the live demo), you will also need to include the PutObjectAcl permission. The Amazon Resource Name includes the name of the S3 bucket that will receive files, in the format “arn:aws:s3:::YOUR_BUCKET_NAME/*”. After you have filled all of this out, click “Add Statement”, then “Continue”.
IAM role S3 permissions
IAM role bucket name

7.) Click “Continue” on the “Set Permissions” page step that appears next, then “Create Role” on the final step.
IAM role set permissions

8.) Click on your new role in the roles list, then the “Summary” tab on the bottom pane, and record the Role ARN ID.
IAM role ARN

The code

There is a live demo with accompanying commented code as well. Note that the live demo is hosted in a public S3 bucket. This is more apparent when looking at the URL.

The live demo contains the following files:

index.html

Entry point for the live demo. It pulls in all other client-side files and resources. Also, it contains HTML for the Google, Facebook, and Amazon login buttons, as well as other elements required by the third-party JavaScript SDKs. A customized version of a Fine Uploader UI template is also present in the head element. Finally, there is some code to ensure the demo is only displayed if a modern browser is in use. We make use of conditional comments here to display & load the demo if a modern browser is in use, or a message explaining why the demo is not functional if IE9 or older is present.

3 JavaScript files to make use of the identity provider SDKs

We have one JavaScript file for each identity provider. These are used to track authentication requests and pass the token received from a successful auth request on to the AWS SDK. Also, they are used to notify the user when the bearer token has expired (asking them to re-authenticate by clicking on the login button). The files are amazon-auth.js, google-auth.js, and facebook-auth.js.

You must ensure the Role ARN and app IDs are filling in appropriately in these files. Note that the app ID for the Google ID provider is attached to the login button element in index.html as a data attribute. Also note that the facebook and aws files include a providerId in the call they make to the assumeRoleWithWebIdentity method. Google’s ID provider does not have such a property though.

aws-sdk-glue.js

Used to obtain temporary credentials (keys) supplied to Fine Uploader. The bearer tokens obtained from the identity providers are used to generate these credentials.

Fine Uploader S3 built source files & resources

We also must include the Fine Uploader UI S3 jQuery JavaScript, CSS, and other resource files (images/placeholders). You can generate your copy at http://fineuploader.com/customize.

custom.css

Some CSS to enhance the style of this demo.

fineuploader-glue.js

Creates an instance of Fine Uploader UI S3 jQuery. The “complete” and “credentialsExpired” events are observed. The former includes a button that links to the uploaded file in S3 next to the file item in the UI after a successful upload. The latter asks the AWS credentials code for new credentials before they expire.

Additional reading