Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can chrome.identity.launchWebAuthFlow be used to authenticate against Google APIs?

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.

like image 231
A.K. Farrell Avatar asked Nov 03 '16 21:11

A.K. Farrell


People also ask

How do I use Chrome token?

Go to chrome://flags/#enable-token-binding and do that, and retry the TLS request. No need to restart apache.

What is identity extension?

Google Chrome browser extension of Compact Identity. This extension is required for any web based application that is extension based. Compact Identity extension will perform a credential replay activity to ensure seamless access to enterprise applications from Compact Identity Launchpad. 9.1. April 29, 2021.

How to use the chrome Identity API to authenticate users?

Use the Chrome Identity API to authenticate users: the getAuthToken for users logged into their Google Account and the launchWebAuthFlow for users logged into a non-Google account. If your app uses its own server to authenticate users, you will need to use the latter. API Samples: Want to play with the code?

What happens if launchwebauthflow () is omitted or false?

If omitted or false, forces the flow to complete silently, without any user interaction. If the user is already signed in and has already granted access for the extension, then launchWebAuthFlow () can complete silently, without any user interaction.

How do I get an OAuth2 token for a Chrome app?

Chrome Apps users have a Google account associated with their profile. Apps can get OAuth2 tokens for these users using the getAuthToken API. Apps that want to perform authentication with non-Google identity providers must call launchWebAuthFlow.

How to authenticate an app with a non-Google identity provider?

Apps that want to perform authentication with non-Google identity providers must call launchWebAuthFlow. This method uses a browser pop-up to show the provider pages and captures redirects to the specific URL patterns. The redirect URLs are passed to the app and the app extracts the token from the URL.


2 Answers

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: '[email protected]' // 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);
});
like image 177
Armand Avatar answered Sep 20 '22 02:09

Armand


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.

like image 35
lgaud Avatar answered Sep 23 '22 02:09

lgaud