Send POST Data From Frontend of Shopify Store to SQL Database

[OneMangaTwoMang]

I need assistance figuring out how to send data from the frontend of a Shopify store to a sql database.  I've done it by making the action of the form submit to a php page hosted on a different server that then inserts it into a sql database on that same server, but when transmitting data between two sites, you get this error message before the data is submitted:

Every Shopify app that I've used that features customer registration collects user submitted data without triggering this alert to pop up, and the collected data can also be accessed (i.e. when a customer logs into to a service provided by the app), so I know that this is possible to do.

I've made Shopify apps in the past using Ruby on Rails, but if I need to learn some other language/technology in order to get this to work, I am open to that.  I'd really just like to be pointed in the right direction by someone who has experience connecting a Shopify store to an external database.

Thank you.

[OneMangaTwoMang]

Anyone?

[OneMangaTwoMang]

Any ideas?

[Gavinator]

It's a bit hard to say without more details, but to me it looks like you are posting via http. Try https.

[OneMangaTwoMang]

Well, that got rid of the security alert.  However, because the website is http and not https, the post data is not successfully transmitted.  When I use http, the data goes through, but there's a security alert.  When I use https, the data does not go through, but there is no security alert.

I suppose my next step would be changing the website receiving the POST data to https, instead of http, which is a separate issue.

The only reason I'm going through this method (

1) Creating an html form on shopify inside of a liquid template

2) Setting the action of the html form to a PHP page hosted on a separate cPanel regulated server

3) Writing code on the PHP page that catches the POST data and inserts it into a sql database hosted on the cPanel regulated server

)

is because I was unable to transfer POST data from the frontend of a Shopify store into a sql database using an embedded app.

Previously I created a Shopify app using Ruby on Rails that was hosted on Heroku.  I connected the Heroku app to an AWS RDS.  I then installed the app onto my Shopify store as an embedded app.  When I created an html form in the embedded app (which was only viewable in the shopify admin panel after clicking on the app), I could submit POST data from my Shopify store to my AWS RDS just fine.  However, when I created an html form on the frontend my shopify store and set the action of the form to the url of my app (specifically to a controller/action that would handle the insertion of the data into the AWS RDS), I could not get the POST data to successfully submit. 

From what I could gather, my inability to get frontend POST data insertion to work the way I was able to get admin panel POST data insertion to work is because when you create an embedded app and connect it to a shopify store, there is authentication involved.  An embedded app has to be connected to a store and you have to log in to your store before you can access the apps connected to your store.  So when you submit data from the admin panel, the data goes through because you're signed in and authenticated.  A customer browsing the store would not be signed in to the admin panel of the shopify store at which they're shopping, so the necessary authentication to submit data to the Shopify app connected to an AWS RDS does not exist.

I believe there may be a way to circumvent the issue by manually sending data along with the POST data that will, for all intents and purposes, simulate a login to the shopify store connected to the app, which would force authentication, but I'm not sure how to go about it.

If you know how to get this to work using an embedded app, that would be great.  If you're familiar with another (more efficient) method to transfer POST data from the frontend of a shop to a sql database, I'm willing to start from scratch and acquire the necessary resources.

Thank you.

[Gavinator]

When I use https, the data does not go through, but there is no security alert.

Ok, so I would start there.

If you know how to get this to work using an embedded app

Embedded Apps are designed to work inside of Shopify Admin. If you have one already installed then you can use an App proxy to show a form in the storefront.

HTH, Gavin.

[OneMangaTwoMang]

Yes, I will look into changing my site to https.  Thank you.

I forgot to mention it, but I was using an app proxy with the embedded app.  I've read that App Proxy doc many times, but I don't understand what you mean by:

you can use an App proxy to show a form in the storefront.

 The way I set it up was this

1) I created an app proxy in the settings of my app.

2) I set the proxy url of the app proxy to " https://[insert-app-name-here].herokuapp.com/proxy/create" (<< that is a controller action created to submit the received POST data into the database connected to the Ruby on Rails app).

3) I set the sub path prefix of the app proxy to 'apps'.

4) I set the url of the app proxy to 'form'.

5) My embedded app loads a script tag into whatever store it is installed to.

6) The script tag inserts a form onto a specific page with jquery.

7) The action of the form is set to " https://[insert-shopify-domain-here]/apps/form"

😎 The script tag removes the form from the page after data submission using ajax.

When I checked the status of the POST method in the Firefox network tab, I would see a 400 error.

Are you saying there is a way to add a form to a Shopify page directly using only an app proxy?

[Gavinator]

Are you saying there is a way to add a form to a Shopify page directly using only an app proxy?

No. I meant you can create a page under your proxy app address that has your form in it already. Sounds like you are already doing that.

When I checked the status of the POST method in the Firefox network tab, I would see a 400 error.

Overall your approach sounds like it should work. A 400 error means there is a problem on the client side when it is submitting the request, so I'd check the payload is correct (maybe there are missing required parameters). Maybe try using a tool like Postman to debug in the browser, or trying posting using curl outside of the browser.

HTH, Gavin.

[OneMangaTwoMang]

I meant you can create a page under your proxy app address that has your form in it already

Do you mean create a page with a form in the Ruby on Rails app (the form would be within a .erb file), and then have users fill out that form by visiting the app proxy url?

(I'm not sure how that would work.  Once you install the 'shopify_app' gem, the frontend of the Ruby on Rails app is only visible once you've logged into a Shopify store.  So if I put a hyperlink on a page with text that said "Click here to sign up", which pointed to "https://[insert-shopify-domain-here]/apps/form", the user would be prompted to log in to their Shopify store after clicking the link.

Or do you mean create a form in the Shopify admin panel (either in a template or a snippet) and then set the action of the form to the app proxy url like I described?

Yes, I think the problem is that there are missing parameters, and I think it has to do with the fact that you have to be logged in to a Shopify store before you can access the contents of the app.  I'm curious if anyone knows what parameters would have to be sent along with the POST data in order for the submission to go through. 

This is likely a Ruby on Rails specific issue.  Someone was helping me out with this issue in the past and said that rails by default protects requests from forgery.  So if I was trying to submit data to a rails app without using a form generated inside of rails, I would have to either disable authentication within the rails app, or generate an auth token and send it along with my request.  I disabled the authentication and the 400 error still persisted.  I have not tried generating an auth token, because I don't know how to go about doing that.

But if the process that I described in my previous post should work, then maybe there's some minor error that I'm overlooking.  I will try submitting data to my ruby on rails app with curl to get a more detailed error message (though I'm not sure that it'll work given that I won't be logged into a Shopify store), and I will look into Postman.

Thank you.