Google Cloud Storage JavaScript Sample Application

Description

This is a simple web-based example of calling the Google Cloud Storage API in JavaScript.

Summary

This sample app consists of one monolithic file (index.html) that includes the HTML and JavaScript code needed to support the following capabilities:

• Authorize access to a Google Cloud Storage account using OAuth 2.0.

• Accept a user supplied bucket name and use the Google Cloud Storage JSON API to obtain and display a formatted list of bucket contents.

Google Cloud Storage documentation is available at http://developers.google.com/storage/

Setup

PREREQUISITE: Enable "Google Cloud Storage" and the "Google Cloud Storage JSON API" for your project by selecting “APIs & auth” and then the “APIs” subsection in the Google Developers Console. (https://cloud.google.com/console)

Also setup billing so that you'll be authorized to use Google Cloud Storage with this app. See this page for more details: https://developers.google.com/storage/docs/signup.

1. Download the two files: index.html and README.md (this file).

2. Open the index.html file with a text editor and make the following changes:

• Create a Client ID for Web Applications via the "APIs & auth", “Credentials” section in the Google Developers Console (https://cloud.google.com/console).

• Again in the same section, add your JavaScript origin (the root URL from which your application will run) to the "JavaScript Origins" section of your Client ID. If you're not sure what this is, you can skip this step and continue with the remaining steps below - in that case, when you get to the point where you try the app, you'll see a dialog showing "Error: origin_mismatch". Expand the error message and you should see request details like these:

####Request Details

• scope=https://www.googleapis.com/auth/devstorage.full_control
• response_type=token
• access_type=online
• redirect_uri=postmessage
• approval_prompt=auto
• proxy=oauth2relay1195330867
• origin=[redacted]
• state=501277282
• client_id=[redacted]
• authuser=0

The value shown for the "origin" field is the one you'll want to add in the “JavaScript Origins” section in the Developers Console under “APIs & auth” and then “Credentials”.

• In the Developers Console under “APIs & auth”, “Credentials”, scroll down to the "Public API Access" section and replace the apiKey value "YOUR_API_KEY" in index.html with the “API Key” value listed there. If you plan on running the sample on localhost then delete any "Referers" so the console displays "Any referer allowed."

• In index.html, search and replace all strings starting with "YOUR_" with their associated values. Also update the variable titled "BUCKET" with your own bucket name to be created. The guidelines for bucket naming can be found here: https://developers.google.com/storage/docs/bucketnaming Finally update the variable titled “GROUP” with your own GROUP ID. Get this value from the Developers Console. Click on the “Cloud Storage” service in the Left column and then select “Project Dashboard”. Use one of the Google Cloud Storage IDs listed combined with the prefix “group-”, resulting in a string like: 'group-0000000000000000000000000000000000000000000000000000000000000000'

3. Save the changes to index.html.

Usage

Copy your updated index.html to a web server and then open it in a web browser. Click the "Authorize" button near the top left of the page. This will request access to your Google account. Access will be valid for about an hour.

Select the "List Buckets" API command from the drop-down menu to obtain a listing of your project's buckets. You should see a formatted report appended to the bottom of the page with the results of the bucket list.