Child Item

Login to Dropbox from browser extension on Chrome

I'm using this fragment of code for OAuth URL:

self.m_dbxAuth.getAuthenticationUrl(
        self.m_fullReceiverPath, // [redirectUri]
        undefined,    // [state] To help prevent cross site scripting attacks.
        'code',       // [authType] Auth type, defaults to 'token' or 'code'
        'offline',     // [tokenAccessType] null, 'legacy', 'online', 'offline'
        undefined,    // [scope] Scopes to request for the grant
        undefined,    // [includeGrantedScopes] 'user', 'team'
        true          // [usePKCE]
        )
    .then(authUrl => {
      self.m_authUrl = authUrl
})

(followed by chrome.identity.launchWebAuthFlow() to execute the login workflow)

On Firefox this works flawlessly, I logged in once and never again I was asked to confirm to login again. But on Chrome I'm prompted every day to login again in the browser extension (even if I'm already logged in dropbox.com on that browser)

Is this the expected behaviour, why is it differnt in Firefox and Chrome, or are the parameters I chose for getAuthenticationUrl() wrong?

Thanks.

PS: The snipped of code is from this file: https://github.com/pmarinov/qfeeds/blob/master/qfeeds/connect_dbox.js

Find more posts tagged with

API

Abuse

Accepted answers

Здравко

@dbox-arg0 wrote:
...
One bad thing: I still can't re-use the login code if I reload the page. I assume I'm doing something wrong, please see these steps
...

Hi @dbox-arg0,

This isn't a bad thing, it's a normal thing - according the specification. The code you're receiving is "one shot" type - you can use it once and forget it. Where do you read that you would need it further?! 🧐 Wherever is this - it's wrong! 🤫

@dbox-arg0 wrote:
...
3. Down the line this gets to the call getAccessTokenFromCode(), this returns a refresh token. Then the extension can access the files in my Dropbox folders
...

Nice... 😇 That's exactly what you need, but where do you keep the received "refresh token" (the only token that never expire or until explicit revoke)? 🤔 If you forgot it here, you won't be able refresh your access token later (after the access token expires)!!!

@dbox-arg0 wrote:
...
5. I have my login code 40h...tbG5pCng in local browser storage, so the first function I call is getAccessTokenFromCode() with it, and I get HTTP 400. Why just seconds ago this gave me a refresh token and now I got 400. In the broswer I can see that the URL is exactly the same as used in step 3 above.
...

I hope you already know what's going wrong here. 😉 If not, take a look above once again.

@dbox-arg0 wrote:
...
(Another question, I also get an access token, not only a refresh token, why is that, do I have to use it?)
...

If you aren't using the refresh token in any way, why have you selected offline access? Do you really need offline access or not exactly? It's possible to implement your access in both ways. It's matter of your design decision. Read the resources, that Greg did link to above, once again and make your consistent decision - don't try mix different decisions.

All comments

Greg-DB

We can't offer support for the third party browsers or libraries themselves, as they're not made by Dropbox, so you may need to debug that to see what code/conditions trigger that getAuthenticationUrl/launchWebAuthFlow code path to run.

As for the Dropbox side of things, I see you are setting tokenAccessType to offline in getAuthenticationUrl, meaning that Dropbox will return a refresh token to enable the app to maintain long-term access without having the use re-authorize the app. (You can find more information in the OAuth Guide.) The Dropbox SDK will handle that for you automatically as long as you set the refresh token and app key in the client like in this example. Without using the refresh token, access from new authorizations would only last a few hours as new access tokens are "short-lived".

dbox-arg0

Thank you very much for your response.

I see my mistake as I haven't used the refresh token via setRefreshToken(), I've made the correction.

I will debug a bit more the code on my side the way I call the Dropbox API.

dbox-arg0

I've reverted the workflow on Chrome away from launchWebAuthFlow(), it wasn't needed on Chrome to begin with. One benefit is that now I can trace the complete workflow as I have my own OAuth receiver page.

One good thing: I no longer have to re-enter my user name and password if I'm already logged in on that Chrome browser.

One bad thing: I still can't re-use the login code if I reload the page. I assume I'm doing something wrong, please see these steps

1. I open the browser extension, I transition to the login page getAuthenticationUrl(), I click to instruct Dropbox to connect the app.

2. The OAuth receiver page get this URL, url: chrome-extension://kdjij.../qfeeds/oauth_receiver_dbox.html?code=40h...tbG5pCng

3. Down the line this gets to the call getAccessTokenFromCode(), this returns a refresh token. Then the extension can access the files in my Dropbox folders

URL is POST:
https://api.dropboxapi.com/oauth2/token?grant_type=authorization_code&code=40hlw...&client_id=25sck7...&code_verifier=MTEsMj...&redirect_uri=chrome-extension://kdjij.../qfeeds/oauth_receiver_dbox.html

Everything until this moment is good.

4. Now, I click Realod on the page of the extension

5. I have my login code 40h...tbG5pCng in local browser storage, so the first function I call is getAccessTokenFromCode() with it, and I get HTTP 400. Why just seconds ago this gave me a refresh token and now I got 400. In the broswer I can see that the URL is exactly the same as used in step 3 above.

(Another question, I also get an access token, not only a refresh token, why is that, do I have to use it?)

Thank you for taking the time to look into this

ps: The code has been updated on GitHub too
ps: I'm using the Javascript library that comes from Dropbox SDK, downloaded from here: https://unpkg.com/dropbox@10.12.0/dist/Dropbox-sdk.js

Здравко

@dbox-arg0 wrote:
...
One bad thing: I still can't re-use the login code if I reload the page. I assume I'm doing something wrong, please see these steps
...

Hi @dbox-arg0,

@dbox-arg0 wrote:
...
3. Down the line this gets to the call getAccessTokenFromCode(), this returns a refresh token. Then the extension can access the files in my Dropbox folders
...

@dbox-arg0 wrote:
...
5. I have my login code 40h...tbG5pCng in local browser storage, so the first function I call is getAccessTokenFromCode() with it, and I get HTTP 400. Why just seconds ago this gave me a refresh token and now I got 400. In the broswer I can see that the URL is exactly the same as used in step 3 above.
...

I hope you already know what's going wrong here. 😉 If not, take a look above once again.

@dbox-arg0 wrote:
...
(Another question, I also get an access token, not only a refresh token, why is that, do I have to use it?)
...

Greg-DB

@dbox-arg0 Здравко is correct. The "authorization code" can only be used once. You should use it to get the refresh token, and then you should store and re-use the refresh token.

Also, the initial authorization flow will give you an access token that you can use immediately, in addition to the refresh token. You can use that initial access token, but it's not required. You can instead just store the refresh token and use it to get a new access token later when needed.

dbox-arg0

Ah, it seems that I have gone in the wrong direction.

Yes, the documentation explains that the login code was one-time, I don't know why I got confused at some point in the implementation.

I've made the corrections -- the token obtained by getAccessTokenFromCode() yesterday, preserved in local storage, is valid today, even after reloading the browser extension. This is what I wanted.

Thank you for everything, this was a great help.

Мерси много!
🙂