6

I'm trying to use the chrome.identity.launchWebAuthFlow method to authenticate the Google user's login in my chrome extension to get his email address, and my code is:

Manifest.json

"key": "Key_here",
"oauth2": {
    "client_id": "my_client_id.apps.googleusercontent.com",
    "scopes": [
        "https://www.googleapis.com/auth/userinfo.email"
    ]
}

popup.js

function startOAuth() {
    chrome.runtime.sendMessage({"message": "start_oauth"});
}

$("#login").on("click", startOAuth);

background.js

var manifest = chrome.runtime.getManifest();
var clientId = encodeURIComponent(manifest.oauth2.client_id);
var scopes = encodeURIComponent(manifest.oauth2.scopes.join(' '));
var redirect_uri = chrome.identity.getRedirectURL();

chrome.runtime.onMessage.addListener(
        function (request, sender, sendResponse) {
            if (request.message === "start_oauth") {
                chrome.identity.launchWebAuthFlow({
                    "url": "https://accounts.google.com/o/oauth2/v2/auth?" +
                            $.param({
                                "scope": scopes,
                                "response_type": "token",
                                "client_id": clientId,
                                "redirect_uri": redirect_uri,
                                "prompt": "consent"
                            }),
                    "interactive": true
                }, function (response) {
                    console.log('response: ' + response);
                });
            }
        }
);

But when I click the popup icon, I get in the background's console:

response: undefined

Unchecked runtime.lastError while running identity.launchWebAuthFlow: Authorization page could not be loaded.

When I open the url in the browser: 

https://accounts.google.com/o/oauth2/v2/auth?scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&response_type=token&client_id=<my_client_id>&redirect_uri=https%3A%2F%2F<extension-id>.chromiumapp.org%2F&prompt=consent

I get the error:

Error: redirect_uri_mismatch

I'm loading the extension as unpacked extension, have put the extension's id, which appears under its name in the chrome://extensions/, in the Application ID in the Google API's credentials

But under this field it said:

Application ID

Last part of your app's Chrome Web Store URL

Does this means that I have to publish the extension to the Chrome web store in order to make the redirect_uri match ?

Note:

To get the extension's key, which I'm putting in the manifest and referring to it as "Key_here", I uploaded the manifest of the extension to the chrome web store developer's dashboard, as a draft, and got the public key from there and put in the manifest.

Now the redirect_uri is the same in the the Google API's console and in my unpacked extension id, what am I missing?

user7607751
  • 465
  • 7
  • 27

1 Answers1

0

The answer is NO, it's not required to publish your Chrome extension to the Chrome web store in order to use Google oAuth.

You just need to make sure your extension's ID is consistent during development, and to do so, you'll need to add the key to your manifest, then after that you can use the extension ID to generate the redirect_uri like this:

https://{YOUR_EXTENSION_ID}.chromiumapp.org/

This is the URL you're going to use in your Google Cloud Console project as a redirect-uri

Now, back to generating the key, uploading the extension to the Chrome web store is one way to generate a key, but, it's not the only way.

You can generate it locally, as explained here.

user7607751
  • 465
  • 7
  • 27