Capturing API response in a variable, object or array

[PurVies]

I have used a form block and turned it into an API form, and managed to set it up to send my username and password, along with an Acess token in the header, to an API, and receive a 200 OK response. I can see the following JSON response using inspector in Chrome:

{“data”:{“id”:“94379”,“type”:“session-tokens”,“attributes”:{“auth-token”:“DELETEDBYME”,“expires-at”:“2030-05-30T20:59:52.873Z”,“renewed-at”:“2020-06-01T22:59:52.873+02:00”,“can”:{}},“relationships”:{“user”:{“data”:{“id”:“3743”,“type”:“users”}},“user-device”:{“data”:null}}},“meta”:{“locale”:“en”}}

But I cannot figure out how to capture the “auth-token” into a variable. I need the auth-token to make new API requests to different endpoints.

I figured I would add a step to a dynamic “submit” event, but these are the only options there, and none of them allow me to specify an object to capture in a variable, because i cannot “Define API schema” as the login form does not have a valid session token yet.

Is there a way to save the response using Wappler, or do I need to write some Javascript myself?

Any help or pointers is appreciated! Thanks in advance.

[psweb]

To be very honest and I know this does not answer the question you have actually asked, if you are dealing with an API that requires authentication tokens I would suggest you use the “Server Connect” side for this rather, if you do it client side like you are doing, it is going to allow anyone to see your tokens and replicate whatever they like using your credentials.
Also the server side is more geared toward token handling, so it will all be easier too.

[PurVies]

Thanks for the suggestion. Nobody will be able to use the Access token for anything other than getting Session tokens, which will only let them see their own data. Also, the site will be behind an administrator login anyway.
If I don’t get any better answers, I guess I will consider using Server Connect. But does that work with API’s? I guess you are saying I should be using a direct link to the database, rather than playing with API?

[psweb]

No not at all server connect works perfectly with APIs there is an OAuth as well as an API Action and it is highly geared around access tokens and session tokens etc.

[PurVies]

I tried making a server connect form instead of API form, but it seems to me that I am lacking options like Headers and Params. I don’t see how I can use it to do anything API related really? Any hints? Or are you using some experimental features?

In any case, I would really like to know how to bind an API response to a variable. I can easily get API data from a API data source into tables, but I cannot figure out how to get it from a form. I tried manually recreating the API schema, but it does not seem to capture the actual data from the response - probably because i need to set up some async await or promise thingy that I cant find. A response listener of sorts?

I thank you for taking the time to reply @psweb and hope you might link me some relevant resources, or know who to ask. From looking around here on the forums, it seems you have had your run-ins with API too

[psweb]

Could you give me an indication what API service you are trying to connect to please also what version of Wappler you are testing with, the new beta 3 or the current stable release. Lastly out of interest are you using php server model or something else.
Once I know these few answers I can try give you some precise answers.

[PurVies]

Yes, of course

I am connecting to a somewhat Open API made by an internet of things company that produces GPS trackers. So, using a Bearer token I make a request for a session token. This token can be used to see different things related to the device, including coordinates, depending on the endpoint. I can see the session token in Chrome, but cannot figure out how to store it. I suppose it would be safest to store the tokens in a database.
I can set up a PHP database, kinda already did. But I haven’t used it yet. I figured i would get to that later, if I could figure this out first - but I agree that it is probably the way to go. Otherwise, tokens and passwords could get intercepted, as the API is not using SSL.
My Wappler installation is version 2.9.1, but I don’t mind trying out the new beta.

Thanks a lot in advance! This would be a pretty big win for me personally.

[psweb]

So for Server Connect there are basically 3 different components

As you can see I have added all 3 components in my screenshot.

If your API wants highly secure OAuth2 then you add the OAuth2 Provider like I have.

Under the service dropdown, you may just find the service you are wanting to connect to right away, but if not, this is a custom setup i used for QuickBooks API tonight to assist another user.

Once this step is added you can access any property the step returns with the dynamic data selectors

So here I am able to access the stored data access_token from the step above to use in my next actions.

Then I have my OAuth2 Authorise step

Here i define scopes and params, and again after the step I can access the properties it returns

As you can see now I can access the returned data from both the steps above to use the results in my next steps if needed.

Lastly I have an API Action step.

From the API provider documentation I check what they want me to use, you can see here I can add Input Data, Query Parameters, as well as Headers, and I can use any dynamic data returned from the other steps to form the action, I can choose different methods like POST, GET, I can even write in my own JSON if that is what your API provider expects.

Once this is setup and saved you can click the run in browser command directly from Server Connect to check the data returned.
Client Side in App Connect you can add a Data > Server Connect component that will then run the Server Action as well as give you client side access to any of the API Actions you have enabled Output on.

Please note that if you are wanting to use your Provider step for other actions then you must click the link icon.

This will allow you to use the provider over multiple actions.

The refresh token is stored inside a session variable and refreshed when needed automatically if the API provider provides the refresh token on each API call, If they do not give the API refresh token then you have to store the refresh token in a database for later use, this is what Google OAuth does as an example.