Hi, I’m trying to send data to a third party using a post request via Wix Fetch.
In order to get access to the third party, I need to use a Basic Auth authentication with a user name.
How can I add Basic Auth parameters to the “fetch” call?
This is how my code looks right now:
return fetch(“{Third Party API URL}”, {
method: ‘post’,
body: data
});
Here is your solution
Hi,
You can also view this article about how to access 3rd-Party services with the Fetch API.
Best,
Sapir
If you want a guide I wrote one here for you
https://wixshow.wixanswers.com/en/article/using-fetch-with-authorization
Hi Uriel:
OK let’s try to build on what Andreas and Sapir have suggested.
You already know about the wix-fetch API so that gets you close to where you need to go!
It is important that you understand what the third party means by “use a Basic Auth authentication with a user name” .
Basic authorisation generally means the simple use of a username and password. However how that information is sent to the third party service is important for your success.
As Andreas suggested, one way is to include the basic credentials (username and password) in the HTTP request Header. The link he posted shows two things:
- Sets up the credentials in the HTTP header
and
- Another proposal to include the credentials from a form that is also attached to the body of the http request.
Sometimes the credentials might be sent in the URL itself if using an HTTPS connection.
For your needs one or the other of these might be needed but the third party service you are connecting to will dictate this.
So how would we re-create the authentication from the stack overflow link in Wix Code?
Let’s look at the documentation…
The fetch function takes two arguments: url and options . You apparently have a url in mind to use so we will assume it is the correct URL.
Next we need to complete the options. In your post you have identified the body and the method as elements you want to send. But you probably need to send header information also. Lets revisit the WixFetchRequest definition.
In addition to the method and body you should consider (based on the third party requirements) adding headers .
OK so the important code from the stack overflow site is…
let url = 'http://eu.httpbin.org/basic-auth/user/passwd';
let username = 'user';
let password = 'passwd';
let headers = new Headers();
//headers.append('Content-Type', 'text/json');
headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));
fetch(url, {method:'GET',
headers: headers,
//credentials: 'user:passwd'
})
You can’t use this directly in Wix, we need to convert this to Wix Code which would look something like this:
import {fetch} from 'wix-fetch';
let url = 'http://eu.httpbin.org/basic-auth/user/passwd';
let username = 'user';
let password = 'passwd';
let headers = {
'Authorization': 'Basic ' + base64.encode(username + ":" + password)
};
let options = {
method:'POST',
headers: headers
}
fetch(url, options)
.then((httpResponse) => {
// Add code to check the response
}
Lastly, notice how the fetch function returns a Promise which requires some special handling. You can learn about Promises here but in simple terms when the function returns you access its result in a .then() function call. The information you can expect in an httpResponse is a WixFetchResponse and looks like this:
This should answer your question BUT as I mentioned above the each third party web site will likely have its own specific Auth model. If the documentation you have for it doesn’t fit with this description then you should share the URL for the site you need to connect to for specific help.
Steve
@stevendc Way to go Steve!!!
Thank you all very much for your help! I really appreciate it!
I’ve tried implementing your solution in my code, and I got into a problem with the base64 encoding. How can I import the right functions so it’d work?
Have you inserted that into the backend module?
@andreas-kviby I have inserted it into my code, and unfortunately got many errors…
@urielgolan Per my earlier post if you don’t show us your code or share the information about the site you are trying to authenticate to then all we are doing is guessing what your problem is.
If you are getting errors, telling us that you get error but not sharing what you are getting (cut and paste the text or send a screen shot) will not help us help you.
So if you can answer the following questions we will have a better chance of guiding you to a solution:
-
What is the url of your published web page?
-
What is the url you are trying to authenticate to?
-
Do you have a link to the authentication instructions? -
What errors are you seeing?
With this you will get the answers you are looking for.
Cheers
@stevendc I’m sorry, I didn’t realize…
Unfortunately, my site is not yet published. However, I can supply you with the other information:
- I’m trying to fill in a pdf form using the pdfotter.com API. Here is a link to their API Reference: PDF Otter API Reference
2. The way it works is by sending a POST Request to their api server (with the said authentication parameters) which includes the data to fill in the form. The response of the request should be the filled PDF file. (Which leads me into another problem where I need to receive and store the PDF file into a WIX Collection).
*After few more attempts, I think I succeed making a working connection between my site and the API server. However, I still don’t know how to handle the response which includes a PDF file.*
I need to store the said PDF file in a WIX Collection.
Thank you all for helping, once again.
Hi @sapirh and everyone,
I’m trying to connect MailChimp API to a Wix Website. The request I want to implement is the following:
https://developer.mailchimp.com/documentation/mailchimp/reference/lists/members/#create-post_lists_list_id_members
I can call the API through curl with a command like this:
curl --request POST \
--url 'https://usX.api.mailchimp.com/3.0/lists/57afe96172/members' \
--user 'anystring:apikey' \
--header 'content-type: application/json' \
--data '{"email_address":"urist.mcvankab+3@freddiesjokes.com", "status":"subscribed", "tags":["a tag", "another tag"]}' \
--include
But I don’t understand how to implement this in the Backend .jsw file of the Wix website. I have something that looks like this, but that can’t authenticate to the API
import {fetch} from 'wix-fetch';
fetch ('https://us20.api.mailchimp.com/3.0/lists/57afe96172/members/',
{method: 'post',
headers: {
user:'anystring:apikey'
},
body: JSON.stringify(
{
email_address: "urist.mcvankab+3@freddiesjokes.com",
status:"subscribed",
tags:["a tag", "another tag"]
})
})
Do you have any idea how to replicate the
--user 'anystring:apikey' \
in the Wix fetch function?
Thanks a lot for your help.
Backend fetch uses the nodejs node-fetch package. If you look at the docs for this that might help you out.
have you tried the mailchimp api plugin?
https://support.wix.com/en/article/connecting-your-wix-contacts-with-mailchimp
Hi @stevendc , thanks for you answer! I couldn’t use MailChimp API plugin since I needed a more custom integration with my website. I eventually found this article How to integrate MailChimp in a JavaScript web app which explained pretty well how to use the BasicAuth between node fetch & mailchimp API.
I still get a 400 error when I send a POST request to write in my MailChimp database of contacts, but it’s writing in the database though! So I won’t investigate more 
@sachaizadi The bad request error may not be due to your fetch request then.
@stevendc Thanks for the help! I am running into one issue with my code.
let headers = {
'Authorization': 'Basic ' + base64.encode(username + ":" + password)
};
Wix Code is not able to use the command base64.encode, or at least on the website I am creating it is failing. Is there a library/class you imported to achieve this?
Hi @hello44 , I’m trying to click the link above but it won’t let me access it for some reason? Do I need a different account then the one I have here?
Thanks,
Tom