POST request to the Admin API from the Storefront

ysemennikov
Shopify Partner
1 0 0

In our store we sell individual signatures (digital goods). The buyer has three free signature revisions. In the personal account, we need to make an order confirmation button (if the user clicks on it, he agrees with the current version of the signature, this data is stored in order's metafields). I planned to implement this using a POST request in the frontend to the Shopify Admin API. I expected to do this using the Arigato proxy application (https://www.bonify.io/pages/arigato-automation ), that will then send a request directly to the Shopify Admin API. The code is below:

 

$(document).on('click', ".product-card-btn[data-action='approve']", function () {
    if (!(localStorage.getItem(`order_${orderID}_approve_sent`) === "true")) {
        $.ajax({
            type: "POST",
            url: "<arigato-api-url>",
            headers: {
                "X-Token": "<our-token>"
            },
            data: JSON.stringify({
                "order_id": orderID,
                "namespace": "artlogo",
                "key": "is_order_approved",
                "value": "1",
            }),
        });
        localStorage.setItem(`order_${orderID}_approve_sent`, true);
        location.reload;
    }
});

 

 

However, as I try to send this request, I get an error:

Access to XMLHttpRequest at '<arigato-api-url>' from origin 'https://artlogo.co' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

If I disable the X-Token in the Arigato app, the requests are being sent without any problems. Requests sent via Postman, even with the X-Token, occur without any problems.

 

I have found some information about the Shopify App Proxy, but I don't understand how I can use it in our case. What can the App Proxy exactly do in this case? Do I have to create any additional server-side app (e.g. created on Node.JS) that will handle request from the App Proxy, verify its signature and send it next to the Arigato app? How can App Proxy improve the security of our store?

 

As I understand it now, it is necessary to use the following scheme:

Storefront --> POST request to Shopify App Proxy --> Verifying proxy request signatures in the additional app --> POST request to the Arigato app --> POST request to the Shopify Admin API

 

I would be very grateful if you could explain to me exactly how this functionality can be implemented in our case.

Replies 0 (0)