oauth 2.0 - How do I get an access token using UrlFetchApp with GAS

Question

I am learning how to use the REST endpoints with Google Apps Script (GAS) and want to get the access token like the example here

I'm using Google Sites, here is the script

function doGet(e) {
  var app = UiApp.createApplication().setTitle('test OAuth 2.0');

  var mainPanel = app.createVerticalPanel();
  app.add(mainPanel);

  var url = "https://accounts.google.com/o/oauth2/auth" + 
                     "?scope=https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile" +
                     "&state=/profile" +
                     "&redirect_uri=http://<mySite>.com/gas/home/oauth2apis" +
                     "&response_type=token" +
                     "&client_id=812741506391.apps.googleusercontent.com" +
                     "&approval_prompt=force";
  Logger.log("encodeURI(url):"+encodeURI(url));

  try{
    var response = UrlFetchApp.fetch(encodeURI(url));
  }catch(e){
    Logger.log("caught this:" + e);
  }

  Logger.log("Response code:"+response.getResponseCode());
  Logger.log("X-Auto-Login Response code:"+response.getHeaders());

  var returned = app.createTextArea().setHeight(600).setValue(response.getContentText());
  mainPanel.add(returned);
  return app;
}

and the Logger.log

Response code:200
X-Auto-Login Response code:({'Cache-control':"no-cache, no-store", Expires:"Mon, 01-Jan-1990 00:00:00 GMT", 'X-XSS-Protection':"1; mode=block", 'Set-Cookie':"GALX=m0d9oxyH-kQ;Path=/;Secure", 'X-Google-Cache-Control':"remote-fetch", Server:"GSE", Pragma:"no-cache", 'X-Content-Type-Options':"nosniff", 'X-Frame-Options':"Deny", 'X-Auto-Login':"realm=com.google&args=service%3Dlso%26continue%3Dhttps%253A%252F%252Faccounts.google.com%252Fo%252Foauth2%252Fauth%253Fresponse_type%253Dtoken%2526scope%253Dhttps%253A%252F%252Fwww.googleapis.com%252Fauth%252Fuserinfo.email%252Bhttps%253A%252F%252Fwww.googleapis.com%252Fauth%252Fuserinfo.profile%2526redirect_uri%253Dhttp%253A%252F%252F<mySite>.com%252Fgas%252Fhome%252Foauth2apis%2526approval_prompt%253Dforce%2526state%253D%252Fprofile%2526client_id%253D812741506391.apps.googleusercontent.com%2526hl%253Den-US%2526from_login%253D1%2526as%253D6991e98fb6d20df3", 'Strict-Transport-Security':"max-age=2592000; includeSubDomains", Date:"Sat, 16 Jun 2012 12:46:26 GMT", Via:"HTTP/1.1 GWA", 'Content-Type':"text/html; charset=UTF-8"})

mySite is mapped and in dns.

It looks like it is trying to do a redirect (which makes sense to me with my limited understanding of OAuth) but the return code is a 200 and a redirect is a 302?

Can I use urlFetchApp to get the access token?

Answer 1

The URL you're trying to retrieve shouldn't be retrieved by your app-- you need to redirect the end-user to the URL. The end-user then grants the ability for your app to access their data, and then Google will redirect the user back to your app.

Since I don't believe Google provides the ability to run client-side JavaScript from Google Apps Script, you're going to want to use the web server (authorization code) flow. This means that the URL will contain an authorization code when the user is redirected back to your app. You then do a server-to-server request from Apps Script to the OAuth 2.0 token endpoint to exchange the authorization code for an OAuth access token.

Here's some example code (without proper error handling, etc.. but it runs):

function doGet(e) {
  var scriptUri = "https://docs.google.com/macros/s/AKfycbzg1LZIqKlKu5f7TtRL4VuleEjExXVCEqH15fI3/exec";
  var clientId = "764634415739.apps.googleusercontent.com";
  var clientSecret = "XXXXXXX-YYYYYYYYY";
  var scope = "https://www.googleapis.com/auth/plus.me";


  var app = UiApp.createApplication().setTitle("");
  var div = app.createVerticalPanel();

  if (e.parameter && e.parameter.code) {
    var redirectUri = scriptUri;
    var tokenEndpoint = "https://accounts.google.com/o/oauth2/token";

    var postPayload = {
      "code" : e.parameter.code,
      "client_id" : clientId,
      "client_secret" : clientSecret,
      "redirect_uri" : redirectUri,
      "grant_type" : "authorization_code"
    };

     var options = {
      "method" : "post",
      "payload" : postPayload
    };

    // do a URL fetch to POST the authorization code to google
    // and get an access token back
    var response = UrlFetchApp.fetch(tokenEndpoint, options);
    var tokenData  = Utilities.jsonParse(response.getContentText());

    // call the Google+ API and get response
    var plusOptions = {
      "headers" : {
        "Authorization" : "Bearer " + tokenData.access_token
      }
    };
    var plusResponse = UrlFetchApp.fetch(
      "https://www.googleapis.com/plus/v1/people/me", plusOptions);
    var plusData = Utilities.jsonParse(plusResponse.getContentText());

    div.add(app.createLabel(plusData.displayName));
    div.add(app.createLabel(plusData.url));

  } else {
    // ask user to go over to Google to grant access
    var redirectUri = scriptUri;
    var url1 = "https://accounts.google.com/o/oauth2/auth?client_id=" + clientId + 
        "%26response_type=code" +
        "%26scope=" + scope +
        "%26redirect_uri=" + redirectUri; 
    div.add(app.createAnchor('Grant data access at Google',url1));   
  }
  app.add(div);


  return app;
}

Here's the code in action: https://docs.google.com/macros/s/AKfycbzg1LZIqKlKu5f7TtRL4VuleEjExXVCEqH15fI3/exec