What Redirect URL can I set for oauth2 callback in a chrome extension?

Question

I want to use Imgur API in a chrome extension. The authentification response from user's input is sent to a "redirect url" set up in my application profile on the imgur web page.

How can I set that "redirect url" to point to the chrome browser extension of a user ?

I see only the heavy solution of setting up a tiny server to keep track of my users' tokens :

1. My extension checks for an imgur token : if found, start extension workflow, else go to step 2.
2. My extension asks the imgur api for its authentification form.
3. the user fills the form, which is self-managed, and the form sends back its username/password to the imgur server.
4. The Imgur server sends a query request containing the token to the 'redirect-url' specified.
5. This 'redirect url' is my server url and it retrieve the token.
6. [no idea how to do this step] the server and the extension exchange and the extension retrieves at least the precious token.
7. With that token, the extension can at least display imgur pictures.

Their documentation mentions localhost as a possible url redirect. I am digging in this general direction but it fails to make sense to me : is seems to be more like about local test for developer than the answer I am looking for.

Thanks for any input.

Rahn

Answer 1

In most cases token gets appended to redirect url. So you can listen to tab update using chrome.tabs.onUpdated.addListener() and check when tab url contains "access_token=". Now it will listen to every tab. If you are creating authentication tab by yourself, you will get an id in its callback. Using this id you can check inside chrome.tabs.onUpdated.addListener() callback that it is the same tab that you created or you can just match if tab url matches with redirect url. Both would work.

Example Code:

      chrome.tabs.onUpdated.addListener(function authorizationHook(tabId, changeInfo, tab) {
                if (tabId === authenticationTabId && tab.title.indexOf(redirectUrl) >= 0) {
                    //If you don't have the authentication tab id remove that part 
                          if(tab.title.indexOf("access_token=") >=0){//tab url consists of access_token
                            var url = tab.title;
                            /* 
                               Code to extract token from url
                            */
                            chrome.tabs.onUpdated.removeListener(authorizationHook);          
                          }                 
                }
       });

Also you would need "tabs" permission for it to work

EDIT: You can also use chrome.identity.launchWebAuthFlow(). You would have to use :

Javascript origins: https://<extensionid>.chromiumapp.org

redirect url: https://<extensionid>.chromiumapp.org/provider_cb

Here is a great example of github-auth app which uses chrome.identity.launchWebAuthFlow(). Same code can be used in extension.

Mistletoe

Edit : wait, how will the callback be redirect to my tab in the first time ? What value should be set up to redirect Url ? – Rahn

I answered what you asked in the question. You need to provide more details like are you using popup or tab. You mentioned in your question that redirect uri is your web server so use that. – Mistletoe

no, no, no. I asked what Url Redirect should I put to get back the token to my Chrome extension tab, or popup or whatever is best suited. I don't see any solution. Consequently, I think about setting up a server to receive the callback. But before doing so, I asked the community if someone knows a way to receive OAuth2 callback to a chrome extension. Sorry, English is not my first language. – Rahn

For redirect uri any url with https:// or http:// protocol should work. Also i edited my answer to add another method to get access token. It might help you. – Mistletoe

Maybe I am dense as rocks but the chromium application is using a redirect URL as seen in the code example provide for the github auth application : var redirectUri = chrome.identity.getRedirectURL('provider_cb'); . From the chromium documentation, this url will be : https://<app-id>.chromiumapp.org/* + 'provider_cb' value. That example shows that one needs a running server to be able to provide a redirect URL. Don't you agree ? – Rahn

Chrome pages follows a chrome-extension:// protocol which is invalid for a redirect url. So chrome has provided a way to provide redirect url of an extension in the form https://<app-id>.chromiumapp.org/* + 'provider_cb' which works pretty well with chrome.identity.launchWebAuthFlow(). You dont need a runnning server for it. More info : developer.chrome.com/apps/app_identity#non – Mistletoe

The github-auth example app url referenced above has changed since the original reply in 2015. it's now github.com/GoogleChrome/chrome-extensions-samples/tree/main/… – Honor

@Honor the github link is dead :( – Bernadettebernadina

Answer 2

It is important to understand that all https actions and calls should be made in background.js thru the chrome.identity api. So the best approach is to send a message, from wherever you are starting the action, to the backgound.js and there you get the redirectURL thru:

const REDIRECT_URL = chrome.identity.getRedirectURL();

Be aware that for oauth process you need to use

chrome.identity.launchWebAuthFlow

Also make sure to add the identity to your manifest.

I hope it could help you

Laudatory

launchWebAuthFlow shows no existing logged-in accounts and also doesn't let password managers fill the creds – Grizzly

This has been updated relatively recently and uses the main cookie store now so should list expected accounts – Vicechancellor