Napster API Auth - BAD Request / Unauthorized - reactjs

I am coding in Reactjs and trying to Auth/Outh into the Napster Web API, followed the information on this page: https://developer.napster.com/api/v2.2#authentication
A sample of my current code:
const API_KEY = 'OWIxMjhlY2MtOTA3Yi00NWJiLThiYTktODc3OTNiYTQ4MGU4';
const API_KEY_SECRET = 'OWIxMjhlY2MtOTA3Yi00NWJiLThiYTktODc3OTNiYTQ4MGU4';
url: 'https://api.napster.com/oauth/access_token',
method: 'post',
params: {
client_id: API_KEY,
client_secret: API_KEY_SECRET
},
headers: {
'Accept':'application/json',
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Bearer ' + (new Buffer(API_KEY + ':' + API_KEY_SECRET).toString('base64'))
},
data: querystring.stringify({ grant_type: 'authorization_code' })
Response Payload:
{"code":"UnauthorizedError","message":"Authentication code not valid"}
{"code":"BadRequestError","message":"Invalid grant_type parameter"}

According to the documentation and sample below....
curl -v -X POST -d "client_id={api_key}&client_secret={api_secret}&response_type=code&grant_type=authorization_code&redirect_uri={redirect_uri}&code={temporary_code}" "https://api.napster.com/oauth/access_token"
...You don't need to send Authorization headers. It's a normal form post with all the parameters. So If you include the rest of the parameters along with client_id : API_KEY... it should do the trick.

Related

Axios post spotify api request return 400

I am using spotify api for a project. Every request I made work fine except this one. I want to be able to create a new playlist. The scope was already checked, it's not the source of the problem. For this I made the following request
axios('https://api.spotify.com/v1/users/' + ID + '/playlists', {
method: 'POST',
headers: {
'Authorization' : 'Bearer ' + data.data.access_token,
"Content-Type" : "application/json"
},
data: {
name: Name,
Description: Description
}
})
when I tried it, I've got 400 Bad Request - The request could not be understood by the server due to malformed syntax. The message body will contain more information
Here's the link for the spotify api references
https://developer.spotify.com/documentation/web-api/reference/playlists/create-playlist/
assuming your ID is defined. You need to stringify your json.
Been a while since I used axios,
axios('https://api.spotify.com/v1/users/' + ID + '/playlists', {
method: 'POST',
headers: {
'Authorization' : 'Bearer ' + data.data.access_token,
'Content-Type': 'application/json'
},
data: JSON.stringify({
name: Name,
description: Description
})
})

Convert this CURL Command to Javascript fetch()

I have a problem, I'm trying to access an API via javascript fetch().
In their documentation, they only have the curl guide
curl https://test.com/form/{form_id}/data \
-u apikey:'some-key'
Can you guys help me convert it to javascript fetch?
I tested the code below but the browser console says error 401 now I don't think I did put the apikey on the right location.
fetch(https://test.com/form/371489/data', {
method: 'GET',
headers: {
'Accept': 'application/json',
apikey : 'some-ley',
'Content-Type': 'application/json'
}
})
Thanks in advance. :)
I think what is failing there is the type of header you are sending in fetch.
The -u option in curl translates to the "authorization" header in fetch. So it would be something like this.
fetch(https://test.com/form/371489/data', {
method: 'GET',
headers: {
'Accept': 'application/json',
'authorization' : 'Basic apikey:some-key',
'Content-Type': 'application/json'
}
})
Although probably you would need to base64 encode the apikey:some-key portion before sending it.
Try this format:
fetch("https://test.com/form/{form_id}/data", {
headers: {
Authorization: "apikey ABCDEFGHIJK.."
}
})
Try these awesome online cURL converters!
Here is the output when you paste the cURL command and select the Javascript target:
fetch('https://test.com/form/371489/data', {
headers: {
'Authorization': 'Basic ' + btoa('apikey:some-key')
}
});

Basic authenticiation in $http Get request

I am trying to access a REST API service with basic authenticiation.
This works perfectly as a curl request:
curl -D- -X GET -H "Authorization: Basic eW**********0NQ==" -H "Content-Type: application/json" "https://api.domain.com/api/users/email/first.last#domain.com"
In angular, I tried this and it does not seem to work as I get a 501 error...
var _url = "https://api.domain.com/api/users/email/first.last#domain.com";
var _authdata = Base64.encode('MyUsername' + ':' + 'MyPassword');
var _headers = {
'Authorization': 'Basic eWd***********0NQ==',
'Content-Type': 'application/json'
};
$http({
method: 'GET',
url: _url,
headers: _headers
}).then(function(request) {
console.log('request');
});
I am trying to understand why this isn't working out properly. CORS are not the problem...
Any suggestions ?
Base64.encode is not understandable by angular-js either you can use javascript "btao" and "atob" or you can include the base64 through npm
Maybe the following code snippet will help you.
var _url = "https://api.domain.com/api/users/email/first.last#domain.com";
var _authdata = btoa('MyUsername' + ':' + 'MyPassword');
var _headers = {
'Authorization': 'Basic' + _authdata,
'Content-Type': 'application/json'
};
$http({
method: 'GET',
url: _url,
json: true,
headers: _headers
}).then(function(request) {
console.log('request');
});
or you can include the Angular-base64 dependency using npm:
https://www.npmjs.com/package/angular-base64

Making OAuth2 request in angularjs

I'm trying to make a request in angularjs to retrieve an access token, but I'm not 100% sure how to go about it. Here's the request in curl
curl -X POST -d
"grant_type=password&username=&password=&scope=read"
-u":" http://localhost:8000/o/token/
any and all help is appreciated
I think you need to post with query string parameters
To do that you need to make some modifications in your post request
var request = $http({
method: "POST",
url: "",
transformRequest: transformRequestAsFormPost,
data: {
grant_type: "password",
username: "Kim",
password: "123",
scope: "read"
}
});
Here is explanation in more details https://www.bennadel.com/blog/2615-posting-form-data-with-http-in-angularjs.htm
I figured it out
var data = "grant_type=password" + "&username="+cred.username + "&password="+cred.password +
"&client_id=" + cred.client_id +
"&client_secret=" + cred.client_secret;
$http({
method: 'POST',
url: 'BaseUrl',
data: data,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

AngularJs $http.post -> Error: Unexpected Request POST ; no more request expected

I've got a working curl request here:
curl -u testclient:testpass http://mybackend.somedomain.com/token.php -d 'grant_type=client_credentials'
Now I try to translate this to my angularJs (ionicframework) frontend.
(The php-backend is on a different server, so this might maybe have something to do with CORS, too, though I don't know how)
In my frontend I try:
var username = 'testclient';
var password = 'testpass';
var url = 'http://mybackend.somedomain.com/token.php';
var request = $http({
method: "post",
url: url,
data: {
username: username,
password: password
},
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
This results in something weird, the POST request isn't executed, but instead I get the error message:
Error: Unexpected request: POST http://mybackend.somedomain.com/token.php No more request expected
What am I doing wrong here ?
There is a mistake in your Angular POST, your data is encoded as JSON instead of what you claim in headers application/x-www-form-urlencoded. First you should change your code to below.
$http({
method: 'POST',
url: url,
data: $.param({
username: username,
password: password
}),
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})

Resources