I'm trying to implement this post request using curl in the JS Fetch API:
curl --user apikey:{my_secret_apikey} --request POST --header "Content-Type: application/json" --data "{\"text\":[\"Hello\"],\"model_id\":\"en-es\"}" "{my_secret_url}/v3/translate?version=2018-05-01"
I'm having trouble implementing the API key.
I tried this, but it doesn't work. I get a 401 unauthorized error back from the server.
fetch(url, {
method: "POST",
headers: { 'Content-Type': 'application/json' },
user: {
"apikey": blablabla_api_key
}
body: {
"text": [term],
"model_id": "en-hi"
}
}).then(res ........
Any help is appreciated!
edit: if you have any other suggestion as to how to implement this post request into JS using some other HTTP library, that helpful too!
Edited code with auth header:
let headers = new Headers();
headers.append('Authorization', 'Basic ' + btoa("apikey" + ":" + "my_api_key"));
headers.append('Content-Type', 'application/json');
fetch(url, {
method: "POST",
headers: headers,
body: {
"text": ["Hello"],
"model_id": "en-es"
}
}).then(result => {
console.log(result);
resolve(result.translations[0].translation);
}).catch(err => console.log(err));
This results in a 400 Bad Request error, even though the curl request works fine.
hopefully, I am not too late with answering your question.
I encountered the same problem as you did and my solution was to encode the authorization into base64.
https://observablehq.com/#mbostock/fetch-with-basic-auth#:~:text=To%20use%20basic%20authentication%20with,result%20in%20a%20401%20error.
I am using Node.js, so I needed to use a Buffer for the encoding process.
If I understood your problem correctly, you'd have to do the following:
let buffer = Buffer.from(apikey:{my_secret_apikey})
let base64data = buff.toString('base64')
Your authorization header should then be set to something like this:
headers: {'Authorization': `Basic ${base64data}`}
This helped me a to solve at least the problem I was struggling with. Hope it works for you as well!
Related
I am trying to connect to payment api named PayU, they provide example on how to connect via curl one is to connect via rest api
curl -X POST https://secure.payu.com/pl/standard/user/oauth/authorize \
-d 'grant_type=client_credentials&client_id=145227&client_secret=12f071174cb7eb79d4aac5bc2f07563f'
and one is to connect via SDK which I would also like to use, but this one needs additional settings in the shop, and I'm having trouble with the first one so if someone would be kind enough to decipher the other one as well would be great
curl -X POST https://secure.payu.com/pl/standard/user/oauth/authorize \
-H "Cache-Control: no-cache"
-H "Content-Type: application/x-www-form-urlencoded"
-d 'grant_type=trusted_merchant&client_id=[provided by PayU]&client_secret=[provided by PayU]&email=[users email]&ext_customer_id=[Id of the customer used in merchant system]'
In curl the first one delivered the token without problems, however I am trying to do this same in code, and I am unable to. This is my code:
fetch('https://secure.payu.com/pl/standard/user/oauth/authorize', {
method: 'POST',
body: JSON.stringify({
'grant_type': 'client_credentials',
'client_id': '145227',
'client_secret': '12f071174cb7eb79d4aac5bc2f07563f',
})
}).then(res => {
if (!res.ok) {
throw new Error("Fetching payU failed, please try again later!");
}
return res;
})
.then(data => {
console.log(data)
return { payUdata: data }
})
.catch(err => {
console.log(err);
});
A basic Post body isn't a serialized json, data looks like query params, just like in the curl
{
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
body: "grant_type=client_credentials&client_id=145227&client_secret=12f071174cb7eb79d4aac5bc2f07563f")
}
from #BankBuilder comment:
function querifyObject(obj){
return new URLSearchParams(Object.entries(obj)).toString();
}
and then:
{
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
body: querifyObject({
'grant_type': 'client_credentials',
'client_id': '145227',
'client_secret': '12f071174cb7eb79d4aac5bc2f07563f',
})
}
I am trying to make a call using JavaScript's Fetch API to generate an OAuth Token but I keep receiving a 400 response code and I'm not sure why. I wrote the key and secret to the console to verify their values, and I made the same API call using cURL (with the response I expected). Is there a small issue in my syntax?
fetch('https://api.petfinder.com/v2/oauth2/token', {
method: 'POST',
body: 'grant_type=client_credentials&client_id=' + key + '&client_secret=' + secret
}).then(r => { response = r.json() });
If the request body is a string, the Content-Type header is set to text/plain;charset=UTF-8 by default. Since you're sending urlencoded data, you have to set the Content-Type header to application/x-www-form-urlencoded.
fetch('https://api.petfinder.com/v2/oauth2/token', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'grant_type=client_credentials&client_id=' + key + '&client_secret=' + secret
})
As I mentioned in a comment, you shouldn't make the above request from a browser since it exposes the client secret.
Thanks to #Arun's recommendation of adding Content-Type, I am getting the right response now.
Also, for any other JavaScript newbies playing around with the petfinder API, this is the chain that I used to extract the token from the response:
fetch('https://api.petfinder.com/v2/oauth2/token', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'grant_type=client_credentials&client_id=' + key + '&client_secret=' + secret
}).then(response => response.json().then(data => ({
data: data,
status: response.status})
).then(function(res) {
console.log(res.status, res.data.access_token);
}));
Below is the following code I am using to access a remote server:
axios({
method: 'post',
url: 'SERVER URI',
data: {"key1": "val1","key2": "val2"},
headers: {
'Authorization': 'Bearer ${token}',
'Accept': 'application/json',
'Content-Type': 'application/json',
}
})
.then((res) => {
console.log('Response **', res);
resolve(res.data);
}).catch(err => {
console.log('Error from server is ***', err.response);
reject(err.response.data);
});
here token is an oauth2 bearer token using client credentials as grant-type. I am getting a 404 response for this with data: {message: ''}. But I tried the same in postman as well as with a curl request. For both these instances, I got back a valid 200 response.
I am attaching the curl request also,
curl --location --request POST 'URI' \
--header 'Accept: application/json' \
--header 'Authorization: Bearer TOKEN' \
--header 'Content-Type: application/json' \
--data-raw '{"key1": "val1","key2": "val2"}'
I may be overlooking something but I am going crazy as to not understanding what I am missing. Any help for this is appreciated
You can try to use formData like that:
const data = new FormData()
data.append('key1', 'val1')
data.append('key2', 'val2')
axios({
method: 'post',
url: 'SERVER URI',
data: data,
headers: {
'Authorization': 'Bearer ${token}',
'Accept': 'application/json',
'Content-Type': 'application/json',
}
})
.then((res) => {
console.log('Response **', res);
resolve(res.data);
}).catch(err => {
console.log('Error from server is ***', err.response);
reject(err.response.data);
});
A 404 response makes me think that maybe the url has a typo in it, but I have seen APIs that respond with 404 as a security measure when authorization fails so it could be a bad Authorization header, too.
There's a typo in the code sample from the original question:
headers: {
'Authorization': 'Bearer ${token}',
...
}
the single quotes surrounding the Bearer ${token} would need to be changed to backticks in order for the template string to actually be expanded.
As it is now, the Authorization header is actually being sent with the literal string ${token} as your token.
I'm trying to write a Post method with Axios in NodeJS.
I have following things to pass as param in post method
url = http:/xyz/oauthToken
header 'authorization: Basic kdbvkjhdkhdskhjkjkv='\
header 'cache-control:no-cache'
header 'content-type: application/x-www-form-urlencoded'
data 'grant_type=password&username=user123&password=password123'
As I tried with following code but new to Axioz not sure how can exactly implement the header with grant type of body response.
var config = {
headers: {'Authorization': "bearer " + token}
};
var bodyParameters = {
data 'grant_type=password&username=user123&password=password123'
}
Axios.post(
'http:/xyz/oauthToken',
bodyParameters,
config
).then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
});
Any help/suggestion would be appreciated :-)
Currently, axios does not make it convenient to use form-encoded data; it's mostly optimized toward JSON. It's possible, though, as documented here.
const querystring = require('querystring');
const body = querystring.stringify({
grant_type: 'password',
username: 'user123',
password: 'password123'
});
axios.post('http:/xyz/oauthToken', body, {
headers: {
authorization: `bearer ${token}`,
'content-type': 'application/x-www-form-urlencoded'
}
});
My RESTful service allows batching requests.
I'm trying to combine requests into one batch with help of Fetch API:
let req1 = {
url: "/cups/count",
options: {
method: 'GET',
headers: {
'Content-Type': 'application/http'
}
}
},
req2 = {
url: "/spoons/count",
options: {
method: 'GET',
headers: {
'Content-Type': 'application/http'
}
}
},
authToken = "Bearer my_token123",
batchUrl = "http://something.com/batch",
options = {
method: 'POST',
headers: {
'Authorization': authToken,
'Content-Type': 'multipart/mixed'
},
body: {req1, req2}
};
return fetch(batchUrl, options)
.then(response => response.json())
.then(items => dispatch(batchSuccess(items)))
.catch((err) => {
console.log(err)
});
However it returns an error - bad request. I suppose I may combine HTTP requests in wrong way.
Is there simpler way of doing this?
Where in Network Chrome Dev Tools can I see nested HTTP requests?
Your code does not work because it does not follow multipart/mixed request format:
In Content-Type header, there is no boundary information.
The child requests are not divided by boundary, instead they will be sent as plain text of req1 & req2 object.
In order to send valid multipart/mixed request, there is a node.js module batchelor. According to the introduction page, its usage is pretty simple.
If you want to send multipart/mixed request from browser, you can use build tool (gulp, webpack etc.) to compile batchelor into something like "batchelor-compiled.js" and import it in HTML.
For developer tool, I didn't find anything in Chrome, but the child requests are visible in Firefox debug window's "Params" tab.
Here is an example of a batch request using the Fetch API with the Gmail Batch REST API.
This will get the content of several messages at once.
const response = await fetch("https://www.googleapis.com/batch/gmail/v1", {
headers: {
"Content-Type": "multipart/mixed; boundary=batch_boundary",
Authorization: "Bearer <access_token>",
},
method: "POST",
body: `--batch_boundary
Content-Type: application/http
Content-ID: 1
GET /gmail/v1/users/me/messages/{message-id-1}
--batch_boundary
Content-Type: application/http
Content-ID: 2
GET /gmail/v1/users/me/messages/{message-id-2}
--batch_boundary--`,
});
console.log(await response.text());