How can I authenticate by rest api oauth2

[umeshhodwala]

I am new to wappler and trying to build mobile app. I want to authenticate from my rest server, which require this curl for token -
POST {{Server URI}}
Authorization: Basic {{client_id}} {{client_secret}}
Content-Type: application/x-www-form-urlencoded

grant_type=password
&username={{username}}
&password={{password}}

Which API action i should use and how to configure above curl post request in wappler.

Thanks

[AdrianoLuiz]

In order to make a POST request with cURL, you need to use the -X flag to specify the request method (POST in this case) and the -d flag to specify the body of the request (the username and password in this case).
The command should look something like this:
curl -X POST -d “grant_type=password&username={{username}}&password={{password}}” {{Server URI}} -H “Authorization: Basic {{client_id}} {{client_secret}}” -H “Content-Type: application/x-www-form-urlencoded”


I don’t know if I understood what you said, but let’s wait for more answers.

[umeshhodwala]

Thanks @AdrianoLuiz for your guidance , I miscommunicated in my post. My question was how to configure this in wappler api action/data source? (this way i will get authentication token from rest server) and witch component, i should use api action/datasource?

Thanks

[scalaris]

Use API action. Set to POST and add other params/headers

[kfawcett]

This is not going to be exact to your needs as the grant_type is different, but if may be helpful to understand how others have setup oauth in Wappler. There’s four parts in different posts.

https://community.wappler.io/search?q=google%20oauth%20%26%20photos%20%40Heather_Mann

[umeshhodwala]

Thanks @kfawcett @scalaris,

I will go through the documents and try.

[umeshhodwala]

I have my own backend project which will be used in mobile app in wappler for all data/authenticate with rest api. Do I still need to make/host web data project to authenticate/get data in mobile app. (mobile app api action don’t have secret ket etc)

Regards

[kfawcett]

If your backend project already handles authentication and data, then you do not need to host anything for Wappler. You just create a mobile project and use Wappler to create the mobile app and connect it to your backend.

[umeshhodwala]

thanks @kfawcett,

Where/How i should give clientid and secret, it is not available in mobile api action but available only in web app oauth?

This is the data, i should be using to get token:
POST {{Server URI}}
Authorization: Basic {{client_id}} {{client_secret}}
Content-Type: application/x-www-form-urlencoded

grant_type=password
&username={{username}}
&password={{password}}

In react, i am giving like this in httpclient -

const ss = ‘client1234900:secret45216546’;
const body = ‘grant_type=password&username=’ + username + ‘&password=’ + password;
const url = ‘https://stscsurvey.cloudjiffy.net/oauth/token’;
const httpOptions = {
headers: new HttpHeaders({
‘Content-Type’: ‘application/x-www-form-urlencoded’,
‘Authorization’: 'Basic ’ + btoa(ss),
‘Access’: ‘/’
})

[kfawcett]

@umeshhodwala

‘Authorization’: 'Basic ’ + btoa(ss),

You can see your ss const is being converted using btoa() in the Authorization field. The btoa function is not standard in Wappler, so you’ll need to set up a custom formatter.

Decode Base64 on Frontend

Perhaps I should make a tutorial on how to create your own custom formatters for App Connect. Here a very simple one for base64 encoding: dmx.Formatters('string', { encodeBase64: btoa, decodeBase64: atob }); Usage: {{ 'Hello world'.encodeBase64() }} becomes SGVsbG8gd29ybGQ= {{ 'SGVsbG8gd29ybGQ='.decodeBase64() }} becomes Hello world

Writing Custom Modules and Formatters (NodeJS)

Writing your own Formatters Location All formatters are being placed in the extensions/server_connect/formatters folder. A single file can contain multiple formatters and you can have multiple files. Best practice is to group formatters that belong together in a single file. For example you to keep all array specific formatters in a file called array.js . File Structure Here a sample of how such a formatter file looks like. exports.uppercase = function(str) { return str.toUpperCase(); }…

I would think your API Action would look something like this.

[umeshhodwala]

I am able to get access_token in web app server connect by these settings

However, it is not working and giving 401 error in app connect api action.

SC has form data type but AC has only json or text. It is working only if form data type is selected in SC also.

Any suggestion?

[kfawcett]

What error do you see in the Network tab for the request?

What do the request headers show as well?

[umeshhodwala]

preflight is successful but then 401 error.

1. Request URL:

https://sheelonline.cloudjiffy.net/oauth/token?

2. Request Method:

POST

3. Status Code:

401

4. Remote Address:

103.217.220.9:443

5. Referrer Policy:

strict-origin-when-cross-origin

This is the same error, if i use json or text in data type in SC. Only Form works as data type.

[kfawcett]

401 is an unauthorized response.

Can you post screenshots of the Request Headers? Here’s an example.

Also, the Preview and/or Response tab.

[umeshhodwala]

But same this is working in SC when data_type is form is selected. AC don’t have data_type = form and Sc giges same error if data_type is not json or text. (I think passing grant_type, username and password in body is problem, if data_type is not form)

[kfawcett]

Your first image is only showing the Response Headers. Please show the Request Headers which appear below the Response Headers.

[umeshhodwala]

This is response in SC:

{“api”:{“status”:200,“headers”:{“server”:“openresty”,“date”:“Tue, 07 Mar 2023 17:22:18 GMT”,“content-type”:“application/json;charset=UTF-8”,“transfer-encoding”:“chunked”,“connection”:“close”,“vary”:“Origin, Access-Control-Request-Method, Access-Control-Request-Headers”,“x-frame-options”:“DENY”,“x-content-type-options”:“nosniff”,“x-xss-protection”:“1; mode=block”,“set-cookie”:[“JSESSIONID=3BE50B15AC6CFE373C3B0D865F0F6659; Path=/; HttpOnly”],“cache-control”:“no-store”,“pragma”:“no-cache”,“x-resolver-ip”:“103.217.220.249”,“strict-transport-security”:“max-age=15811200”},“data”:{“access_token”:“9R0Z7PaZd-uU4BFlW1jXU2q4ZP0”,“token_type”:“bearer”,“refresh_token”:“Q9VXYhxTqZ9mUek6NNgBOkZGTC0”,“expires_in”:43199,“scope”:“api”,“OAuth2.SESSION_ID”:“3BE50B15AC6CFE373C3B0D865F0F6659”}},

[kfawcett]

I don’t think you are sending your Client ID and Client Secret in Authorization Header. That is probably why you’re getting a 401 unauthorized response.

[kfawcett]

Also, what do you see in the Payload tab?

[umeshhodwala]

It is set - 'Basic '+var1.value.encodeBase64()

where var1.value is client_id:secret