Hmac verification after installing app suddenly stop working

melonn
New Member
2 0 0
Hello,
 
We are having trouble validating the Hmac after installing our app. Everything was working fine and we were able to validate the hmac as specified in the documentation and suddenly it stopped working since yesterday.
 
This is how we are validating the hmac:
 

 

const payload = {
  code: this.inputs.code,
  timestamp: this.inputs.timestamp,
  state: this.inputs.state,
  shop: this.inputs.shop,
};
const keys = Object.keys(payload).sort();
const message = keys.map((key) => `${key}=${payload[key]}`).join("&");

const generatedHash = crypto
  .createHmac("sha256", this.parameters.apiSecret)
  .update(message)
  .digest("hex");

if (generatedHash !== this.inputs.hmac) {
  throw new Error("Unauthorized request");
}

 

 
We have double checked the apiSecret and apiKey of our up and everything is correct
 
0 Likes
melonn
New Member
2 0 0

It seems that shopify updated the way in which they generate the hmac (App Bridge 2.0). They are already including the host parameter, but they haven't fully updated their documentation.

As one can see in this page, precisely in the verification section: https://shopify.dev/tutorials/authenticate-with-oauth they are still not including the host. 


So to validadate the hmac:

const payload = {
  code: this.inputs.code,
  timestamp: this.inputs.timestamp,
  state: this.inputs.state,
  shop: this.inputs.shop,
  host: this.inputs.host
};
const keys = Object.keys(payload).sort();
const message = keys.map((key) => `${key}=${payload[key]}`).join("&");

const generatedHash = crypto
  .createHmac("sha256", this.parameters.apiSecret)
  .update(message)
  .digest("hex");

if (generatedHash !== this.inputs.hmac) {
  throw new Error("Unauthorized request");
}

 

I hope this can help anybody that suddenly started having trouble with this

0 Likes
_JB
Shopify Staff
Shopify Staff
817 96 176

Hey @melonn,

Thanks for sharing. Just wanted to note that the linked tutorial specifically mentions: 

This query string is merely an example, and the request parameters provided by Shopify could be subject to change. Your verification strategy should not depend on the parameters in the example above.

Rather than hardcoding the params you may want to consider grabbing the whole query string and just look for and remove the hmac param, and calculate the HMAC based on the remaining params.

JB | Developer Support @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

0 Likes
msdev1
Tourist
4 0 1

I wanted to chime in to mention that I'm also having issues with hmac verification but it could be my own issue. I'm including the new host parameter in my message such that my query looks like:

 

"code=foo6c7373c211c&host=fooG9waWZ5LmNvbS9hZG1pbg&shop=foostore.myshopify.com&state=my%7Cfoostate&timestamp=1618983332"

 

However I can't get it to match the hmac any longer, despite implementation working prior to this week. Is there anything else I should be aware of?

0 Likes
msdev1
Tourist
4 0 1

Update on my post above: I got it to work by removing the %7C character in my nonce generation (and therefore 'state' response from shopify) -- I think there was a mixup in hmac comparison because the %7C wasn't translating to the | character properly.

0 Likes