Error 403 when I try to call an API

Hi Everyone.

Hope you are doing well. Right now I’m building an end-user-app. This custom app consists in:

I have an input inside the portal_ticket_new_sidebar. Here is the screenshot:

Then thing is: When a user put a serie of numbers, I need to call an API and I would like to bring the information about that number. Right now I only got it a 403. Here is my manifest.json:

{
  "platform-version": "2.2",
  "product": {
    "freshdesk": {
      "location": {
        "portal_tickets_new_sidebar": {
          "url": "index.html",
          "icon": "styles/images/icon.svg"
        }
      }, 
      "functions": {
        "serverMethod": {
            "timeout": 10
        }
    }
  }
  },
  "whitelisted-domains": [],
  "engines": {
    "node": "14.17.3",
    "fdk": "8.4.0"
  }
}

Here is my server.js:

var request = require('request');

exports = {
    serverMethod:  function(options) {
      var options = 
      {
        method : "POST",
        url : "URL TO PAST THE CREDENTIALS",
       headers: 
        {
          'Content-Type': 'application/json',
         },
         body: JSON.stringify({ grant_type :"password",
     client_id : client_id ,
     client_secret : client_secret ,
     username : username,
     password : password})
        }
      request(options, function(error, response, body) {
     
        renderData(null, body);
        
      })

     
    }
  }

Here is my app.js:



document.onreadystatechange = function () {
  if (document.readyState === 'interactive') renderApp();

  async function renderApp() {
    try {
      window.client = await app.initialized();
      client.events.on('app.activated', onAppActivate);

      //

      const selectElement = document.getElementById("vin_moto");
      console.log(selectElement);

      if(selectElement) { 

        selectElement.addEventListener('change', (event) => {

          const vinMoto= document.getElementById("vin_moto").value;
          console.log(vinMoto);
          
          //
          client.request.invoke("serverMethod", {}).then(function(data) {

            objToken = JSON.parse(data.response);
            console.log(objToken.access_token, "TOKEN"); 

            var url_search =  url_search
            var headers = { "Authorization": "Bearer " +  objToken.access_token, 
            'Content-Type': 'application/json'
            }; 
           
          //  var body = {
            //  "search": "3MUCBGBD4N1003251"
            // };
            var options = {
              headers: headers, 
              body: JSON.stringify({"search": "3MUCBGBD4N1003251" })
            
            }

            console.log(headers, "HEADER CON TOKEN");
            console.log(options, "HEADER AND BODY");


            client.request.post(url_search,  options).then(
      
              function(data) {
        
                console.log("HOLA");
                
        
            }, 
            
              function(error){
                
              });



          })


         });

      }


      //
    } catch (err) {
      handleErr(err);
    }
  }
};

async function onAppActivate() {
  try {
    let { portal } = await client.data.get('portal');

    let textElement = document.getElementById('apptext');
    textElement.innerHTML = ` name: ${portal.name}`;
  } catch (err) {
    handleErr(err);
  }
}

function handleErr(err) {
  console.error(`Error occured. Details:`, err);
}

Here is the screenshot of the message:

Can you help me please?

Regards

Hi @Andrea_Lopez_Vargas

Have you added the external URL in the whitelisted-domains of your app manifest?

1 Like

Hi @Andrea_Lopez_Vargas,

The Request Method is not allowed from the end-user apps. Could you try making the same API request in the server method and directly return the result from the response to the frontend app to show?

If $request is used in the server method, as @Sachin_Kumar mentioned, ensure the domain of the API endpoint is added to the whitelisted-domains array in the manifest.json file. You can refer to this sample app that makes an API from the end-user app.

1 Like

Hi Raviraj!

Hope you are doing well. Got it, so If a try to making the same API request in the server method it will be work right?

Regards

1 Like

Hi Sachin,

Hope you are doing well. Yes, Im added the external url in the domains. I would try the Raviraj answer, I would making the same API request in the server method.

Regards

1 Like

Yes, @Andrea_Lopez_Vargas.

From the platform, it will work without any restriction if the API is made from the server method.

If any other error is faced, it would be directly from the API service.

Hi Raviraj

Hope you are doing well. I have another question: I pass the value obtained from the input field through the server method right ? Im doing everything in the server.js including the creation of new inputs fields? or I need use the app.js as well.

Thank you so much for your help.

Regards

Hi Raviraj

I have another question. In this conection Im trying to get a value to send it to the server.js to obtain the result and display one again in the front app. How I supposed to do it ? I cant find a way to get a value from app.js and send it to server.js. Please help me.

Regards

@Andrea_Lopez_Vargas A JSON object can be sent as parameters to the Server Method Invocation (SMI) in the second argument. The same will be available in the server method’s argument.

This particular sample app showcases how to send some data from the frontend app to the SMI function.