AdSense Management API

OAuth 2.0 client-side authorization

Goal

This tutorial describes how to implement an OAuth 2.0 client-side authorization flow using the JavaScript programming language.

Time to complete

Approximately 30 minutes.

Prerequisites
Before you start this tutorial:
Overview

The tutorial is composed of the following sections:

  1. Configure the project on the Google APIs console
  2. Configure the local project
  3. Request authorization
  4. Validate the access token
  5. Send authorized requests using JSONP
  6. Store the access token using HTML5 localStorage

1. Configure the project on the Google APIs console

Before starting, we need to configure our project in the Google APIs console. We need to generate a Client ID for web applications and to set the allowed redirect URI and JavaScript origins.

  1. Open the Google APIs Console.
  2. Open the tab API Access and go to Create another Client ID....
  3. In the Create Client ID window, make sure that the selected value for Application type is web application. Ignore the other options and go to Create Client ID.
  4. Click on Edit settings... for the generated client. Add the authorized redirect URI and the JavaScript origins for the project, then go to Update. If for instance you are serving the source code from http://example.com/index.html, you will need to add http://example.com to the JavaScript origins and http://example.com/index.html to the redirect URIs.

2. Configure the local project

  1. Download the tutorial's source code into the folder published by your webserver.
  2. Open conf.js and replace the placeholder strings for client ID and redirect URI with the appropriate values for your project.
  3. Download the Google Closure Library. Extract the content of the zip file to the root of the example code, and rename the folder closure-library-xxxxxxxx-rxxxx to closure-library, where xxxxxxxx-rxxxx is the latest revision of the library (20111110-r1376 at the time of writing).

    After unpacking, the content of the example directory should look like this:

     - closure-library
         - closure
             - bin
             - css
             - goog
             - known_issues
     - conf.js
     - index.html
     - step3.js
     - step4.js
     - step5.js
     - step6.js
              

    The step3.js file implements the flow described in step 3, the step4.js implements the flow described in step 4 and so on. When loading the example code you will always load index.html. You will only need to change the included JavaScript according to the step you want to execute.

3. Request authorization

The client-side authorization flow begins by redirecting a browser (full page or popup) to a Google URL with a set of query parameters. These indicate the type of Google API access the application requires.

Load index.html in your browser and you will be redirected to the Google Authorization Server. You might have to log into your Google Account if you’re not logged in yet, and then you’ll have to authorize the example application to access your AdSense data.

Google will return an access token to your application if the user grants your application the permissions it requested. The access token is returned to your application in the fragment identifier as part of the access_token parameter. Since a fragment is not returned to the server, the client-side script must parse the fragment and extract the value of the access_token parameter. This is what we do at the beginning of the function authorize. If we have a fragment, we decode the access token and print its value into an alert popup, otherwise we redirect to the authentication server.

4. Validate the access token

Tokens received on the fragment must be explicitly validated.

Open index.html and change script type="text/javascript" src="step3.js" to script type="text/javascript" src="step4.js", then load the example in the browser.

When we receive the access token on the fragment, we send a request to get info about the token that we have received. If the server replies with an Invalid token error or if the token is not intended for our app, we discard the token and redirect to the authorization server to restart the flow. If the token is valid, we print the value of the token into an alert popup.

5. Send authorized requests using JSONP

After your application has obtained an access token, it can access a Google API by including its value in an access_token query parameter.

Open index.html and change script type="text/javascript" src="step4.js" to script type="text/javascript" src="step5.js", then load the example in the browser.

We use a JSONP request to GET the list of AdClients for the logged in account, adding the access token value to the query.

6. Store the access token using HTML5 localStorage

The validity of the obtained access token is expressed in seconds by the value of the field expires_in. For this reason, after obtaining a new access token, we save the value of the token and the expiration time using localStorage. When calculating the expiration time, we subtract 100 seconds from the real value to preemptively renew the access token.

Open index.html and change script type="text/javascript" src="step5.js" to script type="text/javascript" src="step6.js", then load the example in the browser using a JavaScript debugger to inspect the flow when a new token is obtained and when we already have one saved in localStorage.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.