How do I mask API credentials in my theme code?

Solved
Highlighted
Tourist
12 1 1

I am trying to write an ajax call that requires an API key.

 

$.ajax({
type: "POST",
url: "URLHERE",
contentType: 'application/json',
data: JSON.stringify({
"type": "CustomAction",
"merchant_id": "", // take it from admin's settings section
"api_key": "", // take it from admin's settings section
"action_name": "", // take it from custom action campaign
"customer_email": ""
}),
success: function(msg) { },
error: function(a, b, c) { }
});
 
However, this is sensitive info that I do not want living in my theme code. Is there a way to mask this?
 
0 Likes
Highlighted
Shopify Partner
110 23 26

Hi jpranimPF,

 

If you have sensitive information you need to hide than consider make the request server-side instead of client-side.

 

Unfortunately I'm not aware of an effective way to hide information client-side. 

- Yes, we build Shopify Apps. Hit me with your idea: https://vellir.tech
- Let customers preview your products and easily add them to cart with Peek Mode
- Add free, good looking social share icons with built-in analytics to your store with Share Lab
0 Likes
Highlighted
Tourist
12 1 1
How are you able to make a server-side request? In Shopify I can only see a
place to manage themes aka the front end.
0 Likes
Highlighted
Shopify Partner
110 23 26

That requires that have a server running somewhere (node/php/python etc) that will act as a middleman between your frontend code and the API you're trying to use. Using a combination of AWS API Gateway / Lambda is also an option.

 

It's a bit more work but it's the proper way to do it if you want to keep sensitive information such as API Keys safe.

- Yes, we build Shopify Apps. Hit me with your idea: https://vellir.tech
- Let customers preview your products and easily add them to cart with Peek Mode
- Add free, good looking social share icons with built-in analytics to your store with Share Lab
0 Likes
Highlighted
Tourist
12 1 1

@Vellir Do you know of any tutorials that would be of use here? I cannot find any documentation on connecting a server to Shopify.

0 Likes
Highlighted
Shopify Partner
110 23 26

This is an accepted solution.

You don't need to connect a server to Shopify, you simply replace you ajax call so it calls your server.

 

So it will act like this:

 

1) Your ajax request calls your server side code;

2) Your server side code uses the API keys to connect to the API;

3) API sends response to your server side code;

4) Your server code sends the response to your ajax code

 

Sorry if it sounds too complicated.

- Yes, we build Shopify Apps. Hit me with your idea: https://vellir.tech
- Let customers preview your products and easily add them to cart with Peek Mode
- Add free, good looking social share icons with built-in analytics to your store with Share Lab
0 Likes
Highlighted
Tourist
12 1 1

Ahh I see what you mean! This makes sense. I'll see what I can do to set that up. I appreciate the input, thanks!

0 Likes