Google Cloud Platform
Hide
Google Cloud Storage
Write Feedback

JavaScript Example

This page shows how you can use the Google APIs Client Library for JavaScript to send requests to the Google Cloud Storage JSON API. Specifically, the GitHub sample storage-getting-started-javascript is discussed. You can also watch the related video, Google Cloud Storage - Getting started with the JavaScript Sample Application.

This document assumes that you are familiar with JavaScript and the Google Cloud Storage concepts and operations presented in the Getting Started: Using the Developers Console guide.

1. Generate a Client ID

The client ID identifies who is making the request. You can create and use different client IDs for different applications.

When you create a client ID for a web application, make sure to add a JavaScript origin of http://localhost:8000 because you will run the sample on your local host.

To generate a client ID for a web application:

  1. Go to the Google Developers Console.
  2. Select a project to which the client ID will be associated.
  3. In the left sidebar, select APIs & auth > Credentials.
  4. Click Create new Client ID.
  5. In the Create Client ID window, choose Web application.
  6. In the Authorized JavaScript Origins box, specify a JavaScript origin.
  7. In the Authorized Redirect URI box, specify a redirect URI.
  8. Click Create Client ID.

    The resulting client ID will look like the following example:

    Client ID for a web application
  9. If you need to make changes to the origin settings, you can return here and click Edit settings.

2. Generate an API key

The API key authenticates the application with Google services like Google Cloud Storage. The key enables Google Cloud Storage to tie a request to a specific project in order to monitor traffic, enforce quotas, and handle billing. It does not require any user action or consent, does not grant access to any account information, and is not used for authorization.

To generate an API key:

  1. Go to the Google Developers Console.
  2. Select a project to which the API key will be associated.
  3. In the left sidebar, select APIs & auth > Credentials.
  4. Find the Public API access section on the page and click Create new Key.
  5. In the Create a new key window, choose Browser key.
  6. In the Create a browser key and configure allowed referrers configure web sites from which requests will be accepted.
  7. Click Create.

    The resulting key will look like the following example:

    API key example
  8. If you need to make changes to the allowed web sites, you can return here and click Edit allowed referrers.

3. Get a project member group ID

The example shows common operations on a bucket, including modifying permissions, which requires that the request be made by a project member. Therefore, the code uses the ID of a project member.

To get a project member ID:

  1. Go to the Google Developers Console.
  2. Select a project.
  3. In the left sidebar, click Cloud Storage > Storage access.
  4. For this example, use the Owners, Editors, or Team group ID.

4. Create a web page

This example consists of one HTML page that uses the Google APIs Client Library for JavaScript. In the code shown below you will need to make the following changes:

  • Set the PROJECT to that your project ID.
  • Set the clientID to the client ID you created.
  • Set the apiKey to the API key your generated.
  • Set the GROUP to the group ID (project member ID).

index.html

5. Run the sample

Test the sample by hosting it locally at http://localhost:8000. We chose this as a JavaScript origin when we created the client ID.

If you have Python installed, you can test the page with the following command:

$ python -m SimpleHTTPServer

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.