How use Basic authorization in API Action on frontend

Wappler General How To
#1

Is there a way to use basic authentication on the frontend side?

#2

in Server Action we have parameters like this

aut_back
aut_back908×1276 65.1 KB

the external API service wants something like this in JS

// btoa and fetch are needed
global.btoa = (b) => Buffer.from(b).toString('base64')
const fetch = require('node-fetch')

fetch('https://api.pdfshift.io/v3/convert/pdf', {
    method: 'POST',
    headers: {
        Authorization: 'Basic ' + btoa('api:your_api_key'),
        'Content-type': 'application/json'
    },
    body: JSON.stringify({
        source: 'https://en.wikipedia.org/wiki/PDF',
        landscape: false,
        use_print: false
    })
}).then(response => {
    response.body.pipe(fs.createWriteStream('wikipedia.pdf'))
})

How to do this in Wappler?
#3

In the user name, try putting the api key by itself there. In general, that works. If it does not, then its a trial and error of some combination of api:apikey.

Sadly, API is not universally the same as of yet.

#4

How to do this in a Server Action is clear, but how can you do this in an API Action on a page? There is no choice of authorization method.

api
api1098×1652 90.8 KB

#6

Unfortunately, I do not typically use the API Action on the front end so I am not sure if it can be done that way.

Have you thought about having a form on the front end that is filled out to accomplish what you are doing and then using the POST results in the Server action?

#7

Of course, I started with this, but a very strange problem arose which I described in another post

#8

Is this api key for all users or each user will have their own api key?

#9

one key for all,
I just don’t know how to implement this conversion in wappler

global.btoa = (b) => Buffer.from(b).toString('base64')
const fetch = require('node-fetch')
#10

ok, then I recommend doing this server side. You’re exposing the API key to all users if you perform the api action client side.

The basic authentication process does the base64 encoding for you, so there’s nothing you need to do outside of putting api in username field and your api key in password field.

#11

if it worked, then of course I would do that, but on the server side it doesn’t work

#12

It should, so it might be better to focus on fixing whatever is causing your issue.

#13

I just spent a few days already and haven’t made much progress in finding a solution

#14

At the end of a long search, I found a way around the problem, but I still didn’t understand the reason :frowning:

#15

I have the best success with Wappler when using its built-in features. It’s really easy to setup another remote instance and see if deploying to it makes a difference, so I would recommend the following.

  1. Use docker for all projects and targets. This will greatly reduce the differences in environments between your local development instance and your remote instances. This is even more helpful when you have more than one developer.

  2. Use the Database Manager to create and manage your databases. Unless you’re a DBA and know how to wield SQL like a Jedi ninja, then the Database Manager is a great part of Wappler to use. There’s a lot of features in it that you’ll probably find valuable in the future.

  3. Use the Resource Manager. This makes creating remote servers and related services quick and easy. Plus it also makes it simple to relate them to project targets. You won’t have to enter urls, ports, or credentials as it’s all part of the initial creation of the server in the Resource Manager.

Maybe a 30 min zoom to discuss would help? Send me a private message if you’re interested and we can set it up.

#16

@kfawcett thanks for your suggestion, I think I should first learn a little more about Resource Manager and Docker in Wappler so as not to waste your time :blush:

1 Like