176
Views
15
Comments
Solved
Can't acess RestAPI in JS method
Question

Hi!

I'm trying to access a Rest API in POST method using JS, because I can't consume this API in INTEGRATIONS. This is the code that is already done in IUGU site, and returns 200 (OK): 

var data = JSON.stringify({

  "email": "financeiro@example.com.br",

  "name": "Bruno Guidetti",

  "notes": "TEST",

  "phone": 997020000,

  "phone_prefix": 19,

  "cpf_cnpj": "4987******",

  "zip_code": "1328****",

  "number": "1490",

  "street": "street",

  "city": "Vinhedo",

  "state": "SP",

  "district": "district",

  "complement": "Casa"

});


var xhr = new XMLHttpRequest();


xhr.addEventListener("readystatechange", function () {

  if (this.readyState === this.DONE) {

    console.log(this.responseText);

  }

});

{

xhr.open("POST", "https://api.iugu.com/v1/customers?api_token=********************");

xhr.setRequestHeader("content-type", "application/json");


xhr.send(data);

$resolve();

}


$parameters.Data = data,//Save the data to JSONDeserialize


alert("Working")



But this code doesn't access the API and post Data. Is anything I'm doing wrong? If anyone have an documentation explaining access API in JS, can share it with me? Sorry if the question is trivial, I'm starting in JS an Outsystems now. This is my flow: 


Bst Regards, Stay Safe



2020-08-11 18-30-15
Marcos Woody
Solution

Bruno, Kilian really have a point. 

I was  focused in help you with your issue so i forget we are using Outsystems!!

Just tell me, why you cannot use the REST functionalities from OutSystems to consume this API?

I think it will be better for you. If you need help with that just say :)


2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Hi Bruno,

Your question leaves me with a bunch of other questions. You say "I can't consume this API in INTEGRATIONS". Why can't you do that? What is so special about it you cannot do this?

Secondly, if you try to access an API via JavaScript, the request is made from the local device, not from the server where APIs normally originate from. Are you aware of this, and its implications? Certain APIs may have whitelisted your server's IP address, so calling them from a device may not be possible.

Thirdly, OutSystems is a low code development environment. Though some JavaScript may come in handy, especially when using Mobile or Reactive, always try to do everything withing the framwork, unless you really cannot.

UserImage.jpg
Bruno Guidetti

Hi! 

This is the error that the server returns to me:

IUGU its a payment environment, I think that its a security error.

I really think that the API in the server it's the best way, but with this access error, I don't know if there is any way to solve this. Like I told I'm new in programming, but in apps with credit card payment they access the API via server or via device?



2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Hi Bruno,

The "(401) Unautorized" means that the remote server does not grant you access. Common reasons are that you didn't supply the right username/password, or access token, or client certificate. It depends on the reason that this error occurs how to solve it. But I would bet you get the exact same error if you would be trying this from JavaScript.

UserImage.jpg
Bruno Guidetti

Hi! 

I don't understand why this error occurs, when I access the API via Chrome and https://reqbin.com/  it works.

Can you tell me what I should do? Contact the company? Try to find errors in JS code? I really don't know what to do. 

2020-08-11 18-30-15
Marcos Woody

Hi there Bruno!

Some servers checks the Browser Agent before delivery the content.

I recomend you check the header of your ajax request to simulate some Chrome Agent .

Add this line :


xhr.setRequestHeader('User-Agent', 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36');

Before this:


xhr.setRequestHeader("content-type", "application/json");



Bruno Guidetti wrote:




I don't understand why this error occurs, when I access the API via Chrome and https://reqbin.com/  it works.

Can you tell me what I should do? Contact the company? Try to find errors in JS code? I really don't know what to do. 

 

 

UserImage.jpg
Bruno Guidetti

Hi, Marcos. Thanks for your reply!!


I tried but nothing changed, I added too all the functions library in the JS just to make this test: https://js.iugu.com/v1 , so now I have this:

Even with all the library in the JS the request wasn't made.


Bst Regards!

2020-08-11 18-30-15
Marcos Woody

the Iugu usually use an HTTP Basic Auth to allow access to API, so you have to generate a Token in Configuration and send in header this token. 

xml.setRequestHeader('Authorization', auth);

take a look in this URL, maybe it could help you.

https://dev.iugu.com/reference#autentica%C3%A7%C3%A3o

But if you said that it works on https://reqbin.com/  its sounds weird : /



UserImage.jpg
Bruno Guidetti

Hi, Marcos! 

I'm using this IUGU documentation and using the same JS code that they use. I tried to put this:

xhr.open("POST", "https://api.iugu.com/v1/customers?api_token=d2cdd7aba71878b94192dd6e24523629");
xhr.setRequestHeader('Authorization', "d2cdd7aba71878b94192dd6e24523629");
xhr.setRequestHeader('User-Agent', 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36');
xhr.setRequestHeader("content-type", "application/json");

But any response yet. It's working perfectly on https://reqbin.com/ just passing the JSON data.

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Again, I advise strongly against using JavaScript for this. Also, this is no longer OutSystems-related, so if you persist in not using OutSystems for this, I'm going to close this topic as off-topic. Take your JavaScript questions to StackOverflow or elsewhere, thanks.

2020-08-11 18-30-15
Marcos Woody
Solution

Bruno, Kilian really have a point. 

I was  focused in help you with your issue so i forget we are using Outsystems!!

Just tell me, why you cannot use the REST functionalities from OutSystems to consume this API?

I think it will be better for you. If you need help with that just say :)


UserImage.jpg
Bruno Guidetti

Hi, again!!

Reading the IUGU documentation all the API's it's suffixed in: https://api.iugu.com/v1, but when I try to consume this in "integrations", returns me (404) Not found, I don't know why. When I use other API like Create a Client: 

https://api.iugu.com/v1/customers?api_token=MY_API_TOKEN

even when I pass my API token, returns me (401) Unauthorized. This leaves me a question, because in https://reqbin.com/ I pass the same API with the API_TOKEN and it works. I don't know if am I doing something wrong, this is the way I'm doing:

  1. Click Integration
  2. Consume REST API...
  3. ADD ALL METHODS
  4. Put the https
  5. Returns me the error

Instead of add all methods I will try to add a single method. Just a minute!

UserImage.jpg
Bruno Guidetti

Hi! 

Now seems that it's working : 

I made the request and I received the response in IUGU site.


Thank you very much, you helped me so much!!!

2020-09-21 08-42-47
Vincent Koning

Hi Bruno,

To help future developers with this issue, what is it that you changed to make this work?

Greetings,

Vincent

UserImage.jpg
Bruno Guidetti

Hi, Vincent the solution was simple, I was doing this

  1. Click Integration
  2. Consume REST API...
  3. ADD ALL METHODS
  4. Put the https
  5. Returns me the error, 401 or 404

Then I go to JS trying to access the API via Client, but the IUGU code didn't work like expected. 

Then Marcos Woody  and Kilian Hekhuis, told me to try again to consume the API in Integrations, so I tried the other way to consume API (ADD SINGLE METHOD). This was the solution, I just don't know why wasn't working in ADD ALL METHODS, I think maybe they can explain why. 


Bst Regards

2020-09-21 08-42-47
Vincent Koning

The issue that you had with Add All Methods is that you need to have access to the Swagger definition file(!) on the remote server. This is probably prohibited by the supplier. Using Add Single Method doesn't rely on Swagger so you can always use it. 

Happy coding,

Vincent

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.