I’ve created an embedded app using Ruby on Rails that is hosted on Heroku. I’ve connected the app to a remote sql database. Obviously, because this is an embedded app, you can only access it once you’ve logged into a Shopify store and installed it. I created a simple form on the main/index page of the app that asks for your first name and last name. When I access my app through the admin panel of a Shopify store, I can submit form data to my remote sql database without any issues.
The problem is that I am trying to collect form data from the front-end of the store and submit it to my remote sql database. That is what I cannot get to work. I’m not even sure if it’s possible to do using an embedded app. A couple of people have told me that it is possible, but haven’t been able to explain how it can be done.
The method that I’m using is as follows:
- Create a Ruby on Rails app with the shopify_app gem installed
- Create a ‘create’ action within the ‘home’ controller that catches the form data and submits it to the remote sql database> def create> @form = Form.new(form_params)> if @form.save> flash[:notice] = “Form saved successfully.”> redirect_to(:action => ‘index’)> else> flash[:notice] = “Form save unsuccessful.”> redirect_to(:action => ‘index’)> end> end
- Create an app proxy that points to the ‘create’ endpoint of my app
- Create an html form that appears on the front-end of my shopify store by editing a .liquid file
Perhaps I’m doing something incorrect on the Ruby on Rails side of things. Maybe @form.save only works if you are submitting form data from a form generated within the rails app. When I try to submit form data from the front-end of my store, it does not work because the user using the form is not logged into a Shopify store that has the app installed. I get redirected to the url: https://[STORE-DOMAIN]/login?shop=[STORE-DOMAIN] and a 404 error page from the store theme is displayed. When I view the POST request through the network tab of Firefox’s developer tools, I see a ‘302 Moved Temporarily’ status code. When I use Postman to try to submit a POST request directly to that endpoint and specify 2 header key-value pairs (for first name and last name), I get a response for the Shopify App Installation page.
Maybe the developers who have created embedded shopify apps used one method to collect form data from the admin panel of a shopify store, and different method entirely to collect form data from the front-end of a shop. Maybe there are headers that I have to send along with the POST request in order to simulate shop login and essentially trick the rails app into thinking the user is logged into a store. If that is the way to do this, how would I go about writing this?
Pretty much every major shopify app on the app store collects front-end data and stores it in a remote database, so I know this is possible. I just don’t know what I’m missing. If you have experience making Shopify apps or know where I could be going wrong here, please provide assistance.
Thank you.
Hey Ben,
I dont have as much experinece using Proxy apps as I would like haha but what Im thinking you would have to do is set the form page as a page that does not need login information. This must be somewhere on the code of the plugin. Im deveolping an app using PHP and my shopify plugin has a document where I can set up controllers which do not need to be authentificated by the shopify plugin. Im not 100% sure where it would be on your case, but a good place to start looking is for the install page which is a login free controller. I hope Im making sense here haha. After you do this, you should be able to see the form on your front end. If you are not able to, I would change the strategy to make it an Iframe and post it on your site. Either way I see it the problem lies with the auth of your API. If you show me the git plugin you used for the shopify plugin, maybe I could help you look for the way to make a certain function or class not need authentification from the plugin hehe. I hope I explained myself 
If you have any other questions please do ask 
Ill be keeping tabs on the thread.
Cheers & Good Coding
Hi Jurgen!
Thank you for responding! I’m not even sure if using an app proxy is necessarry. I just tried it because I thought it might grant the ability to have front-end users access part of my app without having to log in to a store. But that’s obviously not the case haha.
Your suggestion sounds like exactly what I need to make this work! In theory, setting up a controller that does not need to be authenticated by Shopify would solve the problem.
By the way, I made 2 different forms. The first one is in the rails app. At the moment, that form is only viewable when I access my app through the admin panel of a shopify store. Because there was no way (that I know of) to get that form to show up on the front-end of the store, I manually added a form (using html) to the theme of my shopify store. I then just set the action of that form to the controller/action of my rails app that handles the insertion of form data to my remote sql database.
Are you suggesting that I create a form in my rails app, in a view file (a .html.erb file) that does not have to be authenticated by Shopify (once we figure out how to disable shopify authentication), and then use an app proxy to display that form/html.erb file on the front-end of my store?
And you’re saying that you think the github page for the shopify_app gem might contain instructions to create controllers without shopify authentication? I believe this is the repository for the shopify_app gem installed on my app: https://github.com/Shopify/shopify_app
Thank you so much for helping me with this!
Hey Ben,
No problem Have you set up the porxy app to be validated, now that I remember I do have a login proxy app for our facebook login. What you need to do it validate the proxy url where you would be putting the form. Here:
https://github.com/Shopify/shopify_app#appproxyverification
Im not an expert on Ruby haha I’ve just had 1 course of it, but I do not work right now with it. But this might also help in generating the proxy controller:
https://github.com/Shopify/shopify_app#app-proxy-controller-generator
Im not sure if you use that line to create the Proxy Controller or not, but it might help the controller to be authentificated using the parameter which is on the first url I copied. Also you might want to read this:
https://github.com/Shopify/shopify_app#authenticatedcontroller
Here it says all controllers inherit a property for the plugin to know if it must be authentificated, if you dont get the proxy to work correctly you can prevent the controller from inheriting this property and it will not need to be authentificated. Just take out the “ShopifyApp::AuthenticatedController” that it inherits and you should be able to get to that specific controller without an auth Hope this helps
If you have any other questions Ill be around
Cheers & Good Coding!
Jurgen!
I got it to work! There were a few steps involved in getting it to happen, but one of those steps was definitely removing “ShopifyApp::AuthenticatedController” from the controller class and replacing it with “ApplicationController”. Another step was disabling the check for an authenticity token by adding the line “skip_before_action :verify_authenticity_token” to the top of the controller(I already had that in there). But the last step was actually pretty simple. In order for the POST data to be recognized by rails, I had to send a hash instead of a string. I did this by changing the name attribute of the html form. This StackOverflow thread detailed the process: http://stackoverflow.com/questions/16028633/how-can-i-submit-form-content-to-a-rails-app-from-an-outside-static-html-page
I wouldn’t have gotten on the path of solving this issue without your suggestion. Thank you so much for taking the time to help me out!
Awesome Ben! Nice going there! Im glad I was of help to you haha Best of lucks with the API!
Cheers & Happy Coding!