Introducing cookieless authentication beta with App Bridge

Highlighted
Shopify Partner
12 0 0

Yes, I figured out that was happening. Issue was on my end. My CustomRouter wasn't using the bridge properly. I realized that after posting.

0 Likes
Highlighted

Can Shopify provide better support for Python / Django? I find it hard to implment the new authentication on my own.

Now, I can only render a page with App Bridge setup. When I clicked Test app on development store => select my development store, it shows

  1. My test page with App Bridge under my URL. (Load skeleton like the doc said?)
  2. App Bridge force redirects me to Shopify admin (cannot create app with App Bridge here since the origins are unmatched)
  3. It redirects to https://mystore.com/admin/apps/appID/login/?hmac=a668c39fd49ca4ff80ce38dee3ae213072270ce8250188e9605... and gives 404, where [login] is the handle to my app url
  4. Stop here

I don't know how to go further. I suppose to load App Bridge in Shopify admin and get my session token with getSessionToken(App)

How can I go further?

SPO - SEO App to research keywords & edit social link preview
0 Likes
Highlighted
Shopify Partner
3 0 0

So if I'm understanding correctly, the jwt token replaces the old access_token? Instead of X-Shopify-Storefront-Access-Token as the header name and the access_token as the value, you send `Authorization: Bearer [JWT HERE]` to Shopify instead?

I can't use a react app or rails app on this project so the shopify provided examples aren't doing me much good. Plus I'm not a ruby dev and the code looks like a bunch of undocumented magic to me. My backend is a Golang app and my frontend is framework-less, bundled through webpack. Might throw VueJs in there eventually.

How is the app install process supposed to work now? Does app-bridge handle that...?

I really wish the docs had a step-by-step guide.

I'm not understanding what is now the job of the backend vs the frontend and what I'm supposed to do with the token that getSessionToken(window.app) returns. Should I be saving that somewhere like my db? Or in a session? If app-bridge is responsible for everything now, how is my frontend supposed to know that the app is already installed? How does app-bridge redirect to the install/permissions URL? What's my /auth/login/callback route supposed to do? Re-init app-bridge somehow and do [something] with it?

A step-by-step guide in the docs of what your backend _and_ frontend should be individually responsible for and how would be amazing. Right now I'm having to make a whooooole lot of assumptions.

 

0 Likes
Highlighted

Hi @Adriano_Corte_R 

After struggling for several hours, I found that there was a line from the doc

If your app doesn't have a shop token for the shop, then the route should respond with a redirect to send the user to the OAuth login flow. This ensures that the app is installed and receives its shop token. 

I guessed that it meant generating the permission url like OAuth does. After that, redirect user to the permission url so that the user can install your app. So I suppose it will reuse the OAuth install / permission flow before proceeding to the jwt auth flow.

After installation, redirect user to the redirect url which you set in the App setup page. The redirect url will "load skeleton" as the flow chart (under Authentication flow using JWT) in the doc. For testing, 'Load Skeleton' just renders a simple HTML template with the App Bridge init within the <head> tag. 

Now, I can successfully init App Bridge and see my embedded app.

This is crazy, I thought it would ask users to install app somewhere in the flow chart. 

SPO - SEO App to research keywords & edit social link preview
0 Likes
Highlighted
Shopify Partner
3 0 0

@sillycube 

So the backend first checks for the presence of a session token (or maybe it should check for a shop or hmac query param?), and if not redirects the user to the oauth permissions URL, correct?

The user then grants permissions and gets redirected to your callback URL. This callback URL loads the skeleton with app bridge and does nothing other than display the frontend and init app bridge?

Or should the callback URL also be redirecting back to your main app URL after doing something with the session token that app bridge responds with? Did you do something at this step like set a browser <-> server session to store the JWT or something?

0 Likes
Highlighted

My implementation is to check shop param. If it exists, construct the permission url for user installation.

Session token is given by App Bridge later.

The user then grants permissions and gets redirected to your callback URL. This callback URL loads the skeleton with app bridge and does nothing other than display the frontend and init app bridge?

Yes

After you get the session token, you can send it in your request. Your server-side (backend) will parse to get the info. I am handling this part today.

SPO - SEO App to research keywords & edit social link preview
0 Likes
Highlighted
Trailblazer
163 13 26

@Liam @Michael_Ragalie I'll admit I haven't yet attempted to implement this, but in plain English can you please help me understand the difference between the new JWT vs. authorizing requests using hmac validation (as appended by Shopify in every URL request to one's app)? 

In looking through the documentation, the two seem very similar - using SHA-256 and signing the string using the HS256 algorithm by using the app’s secret as the signing key. I get that the JWT is provided by App Bridge and doesn't just live in the URL like hmac (and perhaps therein lies its advantage security wise - I'm clearly not an expert on web security), but the main difference as far as I can tell is that it includes expiration while hmac doesn't expire. However, it should be simple to add one's own timestamp check (also provided by Shopify in each URL request) to confirm the request isn't too stale or being reused. In my mind, if one validates hmac and also checks the timestamp, it seems eminently difficult to spoof a URL and fool one's app into thinking it's a valid app request from Shopify.

Am I missing something here? Thank you!

0 Likes
Highlighted

How can I construct a session and activate it after decoding the JWT token?

From the doc, it said:

Add middleware that detects requests with a session token present and builds a session based on the shop and user information included in the token.

In the previous OAuth way with Python / Django, I can do this:

session = shopify.Session(shopname, API_version, access_token)
shopify.ShopifyResource.activate_session(session)

Now, how can I handle this? What should I put in for access token?

I've created an issue on Python API too.

SPO - SEO App to research keywords & edit social link preview
0 Likes
Highlighted
Shopify Staff
Shopify Staff
34 2 10

A problem with using the HMAC is that the mechanics for getting a new one are pretty ugly.

Every X minutes and every time a page navigation occurs, the app would need to redirect to Shopify and then Shopify would need to redirect back to the app with a new HMAC + timestamp.

Another issue is that the HMAC in the URL might show up in the Referer header, which could leak it to some other actor.

With the JWT mechanism via App Bridge, getting a new token is pretty seamless, delivery of that token to the correct origin is enforced by the browser, and the token is short-lived.

1 Like
Highlighted
Shopify Staff
Shopify Staff
34 2 10

When we say "session" we mean data associated with a certain shop/user. The idea is that we give you the shop/user via the session token, so you can use that to look up other data about that shop/user in your system, and build whatever session object you need.

In this case, presumably you persist the access_token somewhere after you get it. (The session token changes nothing about how you get the token originally, that's still just vanilla OAuth). After you have a token, when the session token comes in via an HTTP request, you can look up the access_token using the shop information in the session token, then run the code to build and activate the "Shopify session".

0 Likes