How to use oauth2 for dropbox via Javascript/HTML

[solsubzero]

Currently I am using the below code, but either No 'Access-Control-Allow-Origin' header or error 400 comes up everytime. I have looked for guides about No 'Access-Control-Allow-Origin' header, but haven't found any of use. My goal is to just grab the users username so I can use it in combination with an app I have created.

$('#LoginBtn').click(function () {
$.ajax({
url: Url,
data: {
client_id: "App_Key",
response_type: "code",
},
dataType: 'jsonp',
type: 'GET',
success: function(response) {
alert('Success!')
},
error: function(errorThrown) {
alert(errorThrown.error);
}})
});

[Greg-DB]

Based on your code here, it looks like you're attempting to access www.dropbox.com/oauth2/authorize via an ajax call, but it's actually a web page, not an API endpoint, so you shouldn't access it via ajax.

You should send the user to the www.dropbox.com/oauth2/authorize page as a URL in their browser. There, they can choose whether or not to allow the app to connect to their account. 

You can find more information on how the OAuth flow works in the OAuth guide. You can find the information for using the www.dropbox.com/oauth2/authorize page in particular in the documentation.

Also, for integrating with the Dropbox API via JavaScript, I recommend using the official Dropbox API v2 JavaScript SDK if you can. It comes with an example of using the app authorization flow.

[solsubzero]

Apologies, I don't think I explained my problem well.

Currently attempting to authenticate and get a users username via a webpage. This username will correspond to a list of links on that webpage.

Recently I created an app that works fine with communicating to dropbox via flutter and swift code.

I have tried many different solutions such as ajax, but they usually come up with No 'Access-Control-Allow-Origin' header or error 400. I have also tried the official Dropbox API for Javascript, but it seems to have issues with 

var fetch = require('isomorphic-fetch');

Also, recently tried this.

The goal is only to authenticate and grab the users username and that username will be a link between my already created app and the webpage that I am working on.

[Greg-DB · Accepted solution]

To get user information, such as their name or Dropbox account ID, you should use the /2/users/get_current_account API endpoint. (That's usersGetCurrentAccount in the official Dropbox JavaScript SDK.)

In order to make that API call though, you first need an access token for the user. You can get an access token for the user by sending them through the OAuth app authorization flow (details and links in my previous comment). That involves sending them to the Dropbox web page where they can choose whether or not to authorize your app. Unlike actual API calls, such as /2/users/get_current_account, that step on the www.dropbox.com/oauth2/authorize web page cannot be done programmatically via ajax.

Regarding the issues you mentioned with the 'fetch' line, note that that example is for Node.js. If you're running in front-end browser JavaScript, that won't work. (There's more information on setting up different environments here.)

So, the basic flow would be something like this:

1. The user arrives at your app's web page.
2. Your app sends the user to the Dropbox app authorization web page.
3. The user approves your app.
4. Dropbox sends the user back to your app's web page.
5. Your app receives the resulting access token.
6. Your app uses the access token to make Dropbox API calls as needed, e.g., to retrieve the Dropbox account information.