Customer authentication for app proxy

Highlighted
New Member
2 0 1

I want to build an app to extend our customer's profiles, but can't seem to find a clear way to make sure the customer hitting our api is who they say they are. I found this article but its a bit dated now. Has Shopify added an easier way to authenticate customers for third party api's yet or is the another way?

1 Like
Highlighted
New Member
2 0 1

Bump

0 Likes
Highlighted
Shopify Partner
2 0 0

Any news?

0 Likes
Highlighted
Shopify Partner
15 0 1

Could we have an answer from Shopify on this topic? Please let us know if a solution is planned in your roadmap or if we have to reimplement customer's authentication on our own :)

It doesn't feel very tricky for you to add a HTTP_X_LOGGED_IN_CUSTOMER_ID HTTP header alongside the already existing boolean HTTP_X_LOGGED_IN_CUSTOMER, but I guess there's a reason you're not doing it?

 

Thanks!

0 Likes
Highlighted
Tourist
11 0 1

Bump - I would like some clarification on this too... 

From the looks of this unanswered thread it doesn't look like any of my questions will be answered too.

0 Likes
Highlighted
Shopify Partner
530 38 109

For me, the easiest thing to implement was having Shopify hit my own service through an app proxy. See https://shopify.dev/tutorials/display-data-on-an-online-store-with-an-application-proxy-app-extensio... for an introduction. Anything coming through the app proxy has an HMAC signature that I can validate. To ensure the request is coming through the proper channel. Once that's validated, I can process things as needed and pass back the result to the caller. This HMAC verification is the same as validating that webhooks are really coming from Shopify. See that section here for details --> https://shopify.dev/tutorials/manage-webhooks

That's likely the cleanest way to handle things. I tried implementing connectivity using various JWT acquisitions. Based on my service authenticating the caller via their provided credentials. But since the Shopify end is implemented heavily reliant upon JavaScript I didn't feel comfortable exposing things to the user. 

1 Like
Highlighted
Tourist
11 0 1

Thanks for your reply!

I did quite a bit of research on App Proxies for Shopify and looked through a lot of examples, and it looks like the way to go for what I want to achieve.

 

From what I understood, the user journey/flow of data can be represented as the following:

User -> Shopify --- > App Proxy --- > Shopfy App (My Web App) -> User

The response should go directly back to the user no problems, right?

One thing I am unsure about is the authentication procedure.

Let's say the User is logged into the Storefront and authenticated on Client-side (in my case some iOS Device).

Is there some sort of authentication I need to do on the Shopify App (My Web App) to ensure that the user is the one making the request to access the response from the Shopify App (My Web App)? 

 

Proposal 1: The solution I think I would need to implement to achieve this is: 

1. Grab the Customer ID of the user and add it into the Request Header 

2. Check on the Shopify App (My Web App) for the customer's data (such as an order) using that Customer ID through the Admin API or Storefront API  directly

3. Do whatever I need to do and send a response back

Or

Proposal 2

1. Grab the Customer ID AND email of the user and add it into the Request Header 

2. Check on the Shopify App (My Web App) for the customer, Customer ID through the Admin API or Storefront API   

3. Verify customer email against queried Customer object. 

4. Do whatever I need to do and send a response back

 

Is Step 3 in proposal 2 unnecessary? 

Or is there an alternative way to do this whole dance that I am unaware of at the moment?

 

0 Likes
Highlighted
Shopify Partner
530 38 109

You are on the right track! The authentication procedure will take place on your own app. You just validate the HMAC signature that is automatically included by Shopify as a request header through the app proxy call. The app proxy call itself will just be a JavaScript function in your Shopify page content. And the response from that function is what your Shopify page has to work with. What the response contains is up to your own app. 

There is likely no need to worry about creating custom page headers to pass along certain values, such as a customer ID, e-mail address, etc. If it was me, I would just make the JavaScript function a POST request to the app proxy, with the JSON body containing the values your own app needs. Like this:

{ customer_id: "1234567", customer_email: "joe.schmoe@widgets.inc" }

So let's say your app proxy is defined as https://widgets.myshopify.com/apps/my_own_app.  And let's say your own app has an endpoint for that can accept a POST request with that JSON body. Here is how a jQuery function call could look on the Shopify page:

 

$.post("https://widgets.myshopify.com/apps/my_own_app", { json_string:JSON.stringify({customer_id:"1234567", customer_email:"joe.schmoe@widgets.inc"}) });

 

Of course you'd need to build in success or failure functions off of the response to handle things in the Shopify page. But at least this offers some general direction, right?

0 Likes