wix-fetch get with basic authorization

Ask the community
,
1

Hello,

we are trying to get a JSON table from a webservice. Can someone please help us to complete the code?

import { fetch } from ‘wix-fetch’;

export function getSendungJason() {
let username = ‘someusername’;
let password = ‘somepassword’;
let url = ‘someurl’;
let headers = {
“Authorization”: 'Basic ’ + Buffer.from(username + “:” + password, ‘base64’).toString(‘base64’),
“Content-Type”: ‘application/json’,
};
let options = {
method: ‘get’,
headers: headers
}

return fetch(url, options) 
    .then((httpResponse) => { 
        if (httpResponse.ok) { 
            return httpResponse.json(); 
        } else { 
            return Promise.reject("Fetch did not succeed"); 
        } 
    })

}

2

Try:

//
 "Authorization": 'Basic ' + Buffer.from(username + ":" + password, 'utf-8').toString('base64'),
//
  • Get rid of the trailing comma in the headers (although it’s not supposed to be a problem).

Does it work?

3

No it doesn’t. We have a new code now, but it’s still not working We can’t find out what the problem is…

import wixSecretsBackend from ‘wix-secrets-backend’ ;
import { fetch } from ‘wix-fetch’ ;
import { btoa , atob } from ‘Base64’ ;

export function getKey ( ) {
return wixSecretsBackend . getSecret ( “key” )
. then (( secret ) => {
let key = “:” + secret ;
return key ;
})
. catch (( error ) => {
console . error ( error );
});
}

export function getUser ( ) {
return wixSecretsBackend . getSecret ( “user” )
. then (( secret ) => {
let key = secret ;
return key ;
})
. catch (( error ) => {
console . error ( error );
});
}

export function encodeKeys ( user , key ) {
let encodedSecret = btoa ( user + key );
return encodedSecret ;
}

export async function doFetch ( ) {
const user = await getUser ();
const key = await getKey ();
const encodedSecret = await encodeKeys ( user , key );
const endpointUrl = “someurl” ;

**return**  fetch ( endpointUrl , { 
        "method" :  "get" , 
        "headers" : { 
            "Authorization" :  'Basic '  +  encodedSecret , 
            "Content-Type" :  "application/json" 
        } 
    }) 
    . then (( httpResponse ) => { 
        console . log ( "httpResponse:" ,  httpResponse ); 
        **if**  ( httpResponse . ok ) { 
            **return**  httpResponse . json (); 
        }  **else**  { 
            console . log ( "httpResponse:" ,  httpResponse ); 
            **return**  Promise . reject ( "Fetch did not succeed" ); 
        } 
    }) 
    . then (( json ) => { 
        **return**  json 
    }) 
    . **catch** ( err  =>  console . log ( err ));

}

4

Some potential debugging steps…

When you test this call elsewhere (like Postman) is is working?

If you hardcode all the information for the authorization, is it working?

I suspect like J.D said in their comment that it’s something in the passing of the auth, but you will want to narrow down for sure that the call is even working at all first

5

Hi, it didn’t work with Postman either but it worked with https://reqbin.com/. Also there in the console there is an Error without further information.

6

Try to console.log the response status. It may give you some idea about the problem root. Maybe you will see it’s unauthorized request / bad request or something else.

7

I just found out something. I added some console.logs, and in the function ist seams the encoding doesn’t work. It gives back the username and password correctly:

1605×205 11.2 KB

Look at the code in the comment below, that’s the code now. When I test this function on it’s own, it works correct:
exportfunction encodeKeys ( user , key ){ let encodedSecret = btoa ( user +“:”+ key ); return encodedSecret ;}

Only in the function itself, it won’t encode.

8

To help you better post if the Console give Errors. :slight_smile:

Try out:

import wixSecretsBackend from 'wix-secrets-backend';
import { fetch } from 'wix-fetch';

async function getKey() {
  try {
    const secret = await wixSecretsBackend.getSecret("key");
    return `:${secret}`;
  } catch (error) {
    console.error(error);
    return '';
  }
}

async function getUser() {
  try {
    const secret = await wixSecretsBackend.getSecret("user");
    return secret;
  } catch (error) {
    console.error(error);
    return '';
  }
}

function encodeKeys(user, key) {
  const encodedSecret = Buffer.from(`${user}${key}`).toString('base64');
  return encodedSecret;
}

async function doFetch() {
  const user = await getUser();
  const key = await getKey();
  const encodedSecret = encodeKeys(user, key);
  const endpointUrl = "someurl";

  try {
    const httpResponse = await fetch(endpointUrl, {
      method: "get",
      headers: {
        Authorization: `Basic ${encodedSecret}`,
        "Content-Type": "application/json",
      },
    });
    if (httpResponse.ok) {
      return httpResponse.json();
    }
    console.log("httpResponse:", httpResponse);
    return Promise.reject("Fetch did not succeed");
  } catch (error) {
    console.log(error);
    return null;
  }
}
9

Thanks for the reply. It doesn’t work either. I get the same results (see comment below).

It only says “Error” without further information:

10

btoa() on NodeJs only works on version 16, but currently Wix uses NodeJs version 14.