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.
2.) Create a new project.
3.) Enable the “Google+ API”
5.) Record the “Client ID for web application” value.
1.) Visit the Facebook developers page.
2.) Invoke the “Apps” menu, and click “Create a new app”. Fill in the fields as appropriate.
3.) Record the App ID after creating the app.
4.) Click on the “Settings” option on the right, and then click the “Add Platform” bar.
5.) Click “Website”.
6.) Fill out the “Site URL” under the new “Website” section. This should be the domain of your web app. Finally, save your changes.
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.
3.) Record the App ID.
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.
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”.
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.
5.) Expand the “Policy Generator” section, and click “Select”.
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”.
7.) Click “Continue” on the “Set Permissions” page step that appears next, then “Create Role” on the final step.
8.) Click on your new role in the roles list, then the “Summary” tab on the bottom pane, and record the Role ARN ID.
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:
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.