DeviantArt Oauth authentication with JavaScript

Question

I am trying to get an Oauth access token through JavaScript. In partilar I want to authenticate to DeviantArt API keeping as simple as it can be. Here are my approaches, I only need one but anyone is working so just one solution for any of the will be enough.

1. Since it is a Cross-Origin I tried using ajax. This is the code:

   var response_type = "code";
   var client_id =  "1234"; //Random clientId for stackoverflow
   var redirect_uri = "http://localhost:8080/my-project/authDeviantArt.html";
   var authorization1 = "https://www.deviantart.com/oauth2/authorize";
   var authorization2 = "https://www.deviantart.com/oauth2/token";
   var client_secret = "qwerty12345"; //Random secret for stackoverflow
   var grant_type1 = "authorization_code";
   var grant_type2 = "client_credentials";
   var scopes = "basic";
   
   //Using The Authorization Code Grant
   var request1 = authorization1+'?response_type='+response_type+'client_id='+client_id+'&redirect_uri='+redirect_uri;
   //Using The Client Credentials Grant
   var request2 = authorization2+'?client_id='+client_id+'&client_secret='+client_secret+'&grant_type='+grant_type2;
   
   $.ajax({
      url: request1,
      dataType: "jsonp",
      success: function (res){
      console.log("Response: "+res.access_token);
   });
   

The problem is that I allways get the following error

Uncaught SyntaxError: Unexpected token :

but clicking on the error in the JavasCript console I can see the response JSON:

{"access_token":"662b..5d58","token_type":"Bearer","expires_in":3600,"status":"success"}

and the Concole.log prints Error: [object Object] (despite chrome console does not throw any error in that line).

2. I also tried with the library JSO but I don't achieve saving the token neither.

3. I also tried with the library Hello.js but it does not support DeviantArt and my approaches modifying it had neither any success.

4. I tried also trying to modify headers in XMLHttpRequest() or adding options to getJson but always CORS error, no matter what I try.

I have been trying tens of solutions posted on stackoverflow but no one works for me :(

Answer 1

I've had a similar problem while trying to obtain a simple client access token, and I've come to the conclusion that the Deviantart API does not support CORS at all. I'm not 100% certain, but no attempt of mine (either through ajax or XMLHttpRequest or even test-cors.org) gave any indication that the response contained the proper CORS header (Access-Control-Allow-Origin).

It would make sense, too. This way of using the API forces you to expose your client secret in your JS code (as you have in your example). I believe the API was meant to be used on the back-end or by programs (either desktop or mobile) that would hide their client secret in their code or some encrypted configuration file. This comment on another question led me to that conclusion.

I would recommend you handle the API communication server-side if possible. You may also want to take a look at their oEmbed implementation.