You might see that the Dropbox Community team have been busy working on some major updates to the Community itself! So, here is some info on what’s changed, what’s staying the same and what you can expect from the Dropbox Community overall.

Forum Discussion

dbox-arg0's avatar
dbox-arg0
Explorer | Level 4
3 years ago

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

 


  • 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.

  • Greg-DB's avatar
    Greg-DB
    Icon for Dropbox Staff rankDropbox Staff

    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's avatar
      dbox-arg0
      Explorer | Level 4

      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's avatar
        dbox-arg0
        Explorer | Level 4

        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

         

About Dropbox API Support & Feedback

Node avatar for Dropbox API Support & Feedback

Find help with the Dropbox API from other developers.

5,910 PostsLatest Activity: 3 days ago
333 Following

If you need more help you can view your support options (expected response time for an email or ticket is 24 hours), or contact us on X or Facebook.

For more info on available support options for your Dropbox plan, see this article.

If you found the answer to your question in this Community thread, please 'like' the post to say thanks and to let us know it was useful!