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.
The workflow is simple:
- authenticate your users with the help of an identity provider, such as Google
- Use the temporary token from your ID provider to grab temporary access keys from AWS
- Pass the keys on to Fine Uploader S3
- Your users can now upload to your S3 bucket
Other things you will need to make this happen:
- Fine Uploader S3 4.2+
- A simple web server to host your static content, such as a public-read S3 bucket
- An AWS account
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:
- 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).
1.) Login to the Google Cloud Console.
1.) Visit the Facebook developers page.
1.) Sign in to Amazon’s App Console. with your AWS account. Click on the “Register new application” button.
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.
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.
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”.
The live demo contains the following files:
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.
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
Some CSS to enhance the style of this demo.
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.