Quick-start sample app for JavaScript

This quick-start sample app is built in JavaScript and lets you get started with the Google+ platform in a few minutes. The app demonstrates:

  • Using the Google+ Sign-In button to get an OAuth 2.0 refresh token.
  • Exchanging the refresh token for an access token.
  • Making Google+ API requests with the access token, including getting a list of people that the user has circled.
  • Disconnecting the app from the user's Google account and revoking tokens.

System requirements

Step 1: Enable the Google+ API

Create a Google Developers Console project, OAuth 2.0 client ID, and register your JavaScript origins:

  1. Go to the Google Developers Console .
  2. Select a project, or create a new one by clicking Create Project:

    Note: Use a single project to hold all platform instances of your app (Android, iOS, web, etc.), each with a different Client ID.

    1. In the Project name field, type in a name for your project.
    2. In the Project ID field, optionally type in a project ID for your project or use the one that the console has created for you. This ID must be unique world-wide.
    3. Click the Create button and wait for the project to be created.
    4. Click on the new project name in the list to start editing the project.
  3. In the left sidebar, select the APIs item below "APIs & auth". A list of Google web services appears.
  4. Find the Google+ API service and set its status to ON—notice that this action moves the service to the top of the list. You can turn off the Google Cloud services.
  5. In the sidebar under "APIs & auth", select Consent screen.
    1. Choose an Email Address and specify a Product Name.
  6. In the sidebar under "APIs & auth", select Credentials.
  7. Click Create a new Client ID — a dialog box appears.
    Register the origins from which your app is allowed to access the Google APIs, as follows. An origin is a unique combination of protocol, hostname, and port.
    1. In the Application type section of the dialog, select Web application.
    2. In the Authorized JavaScript origins field, enter the origin for your app. You can enter multiple origins to allow for your app to run on different protocols, domains, or subdomains. Wildcards are not allowed. In the example below, the second URL could be a production URL.
    3. In the Authorized redirect URI field, delete the default value. Redirect URIs are not used with JavaScript APIs.
    4. Click the Create Client ID button.
  8. In the resulting Client ID for web application section, copy the Client ID and Client secret that your app will need to use to access the APIs.

Step 2: Set up the JavaScript quick-start app

  1. Get the latest version of the quick-start. One way is to use git to clone the application repository.

    git clone https://github.com/googleplus/gplus-quickstart-javascript.git

    Or, download the application as a zip file, and extract the library and quick-start code:

    wget https://github.com/googleplus/gplus-quickstart-javascript/archive/master.zip -o gplus-quickstart-javascript.zip
    unzip gplus-quickstart-javascript.zip
  2. Change directory into the quick-start app

    cd gplus-quickstart-javascript
  3. Edit index.html, and replace YOUR_CLIENT_ID with the value that you generated in Step 1.

Step 3: Run the quick-start app

After you have set up your Google Developers Console project and configured the quick-start app, the app is ready to run.

Because you registered http://localhost:4567 as an Authorized JavaScript origin in the Google Developers Console (in step 1), you will run the sample from that location.

  1. Now you need to start a server. For example:

    python -m SimpleHTTPServer 4567
  2. Browse to your quick-start app, which by default is at http://localhost:4567.

After you sign in, the application uses the JavaScript client library to retrieve your profile, as well as the people visible to the app.

Clicking Disconnect from Google+ results in the server making a call to Google to revoke the refresh token. The server then removes any data that it acquired from Google about the user to disconnect the app and follow the developer policies.

Send feedback about...

Google+ Platform for Web
Google+ Platform for Web