Can chrome.identity.launchWebAuthFlow be used to a

Question

I'm writing a Chrome extension and have been trying to use chrome.identity.launchWebAuthFlow to authenticate with Google. I would prefer this to chrome.identity.getAuthToken (which does work) because getAuthToken gets the token for the user currently logged in to Chrome -- who may be logged in to multiple Google accounts. I want the user to be able to hook up a specific Google calendar to my extension, and that calendar might belong to a different user than they've logged in to Chrome as.

So, I've been trying to do this with chrome.identity.launchWebAuthFlow and generally failing around a mismatched redirect_uri. I've tried just about every type of credential you can set up in the Google APIs developer console. ("Chrome App" seemed like the right thing, but I have also tried Web application, Other, and iOS.) I've tried using the results of both chrome.extension.getURL('string') and chrome.app.getRedirectURL('string') as my redirect_uri.

I tried out the example app referred to by https://stackoverflow.com/questions/40384255/oauth2-angular-chrome-extension but have not been able to get that to work either.

I have a suspicion I'm trying to do something that either used to be allowed and no longer is, or just never worked.

Here's an example of my code, but I think my problem is really in the API dev console -- I don't see a way to set up a configuration that will work for an extension:

    var auth_url = 'https://accounts.google.com/o/oauth2/v2/auth';
    var client_key = *[client id from API dev console]*
    var auth_params = { 
                        client_id: client_key,
                        redirect_uri: chrome.identity.getRedirectURL("oauth2.html")
                        scope: 'https://www.googleapis.com/auth/calendar'
                      };
    auth_url += '?' + $.param(auth_params);

    chrome.identity.launchWebAuthFlow({url: auth_url, interactive: true}, function(token) { console.log(token); });

(I have also tried the https://accounts.google.com/o/oauth2/auth endpoint.)

Solution:

After reading the accepted answer, I wound up with this:

var auth_url = 'https://accounts.google.com/o/oauth2/auth';
var client_id = '[client ID from console]';
var redirect_url = chrome.identity.getRedirectURL("oauth2.html");
var auth_params = {
    client_id: client_id,
    redirect_uri: redirect_url,
    response_type: 'token',
    scope: 'profile'
};
auth_url += '?' + $.param(auth_params);
console.log(auth_url);
chrome.identity.launchWebAuthFlow({url: auth_url, interactive: true}, function(responseUrl) { console.log(responseUrl); });

The responseUrl is my redirect_uri with parameters -- so Google oauth returned that instead of redirecting the browser to it -- and I could go on from there.

Answer 1

To get the Angular sample running, I needed to:

1. Create my own Web Application client ID in the Google developer console with an Authorized redirect URI of https://bcgajjfnjjgadphgiodlifoaclnemcbk.chromiumapp.org/oauth2

2. Copy that client ID into the config.json file of the sample.

The call to get redirectURI in that sample is like chrome.identity.getRedirectURL("oauth2"), the string parameter gets appended to the end of the URL based on extension ID.

Answer 2

Yes, in 2019 it still works. Finally got it working...

manifest.json

{
   "name": "Extension Name",
   "description": "Description",
   "version": "1.0.0",
   "manifest_version": 2,
   "icons": {
      "48": "icons/icon_48.png",
      "128": "icons/icon_128.png"
   },
   "background": {
      "scripts": [
         "background.js"
      ],
      "persistent": false
   },
   "oauth2": {
      "client_id": "Your Client ID from Google Develpers console (Must be Web Application)",
      "scopes": [
         "openid", "email", "profile"
      ]
   },
   "permissions": [
      "identity"
   ],
   "key": "Your Key from Google Developer Dashboard"
}

background.js

chrome.windows.create({
    'url': './content/auth/auth.html',
    'width': 454,
    'height': 540,
    'type': 'popup'
});

auth.html

standard HTML markup that calls auth.js file

auth.js

var auth_url = 'https://accounts.google.com/o/oauth2/auth?';
var client_id = '<Client ID>';  // must be Web Application type
var redirect_url = chrome.identity.getRedirectURL(); // make sure to define Authorised redirect URIs in the Google Console such as https://<-your-extension-ID->.chromiumapp.org/

var auth_params = {
    client_id: client_id,
    redirect_uri: redirect_url,
    response_type: 'token',
    scope: 'https://mail.google.com/',
    login_hint: '[e-mail]' // fake or non-existent won't work
};

const url = new URLSearchParams(Object.entries(auth_params));
url.toString();
auth_url += url;

chrome.identity.launchWebAuthFlow({url: auth_url, interactive: true}, function(responseUrl) { 
    console.log(responseUrl);
});