Skip to main content

​
Overview

To ensure the authenticity of embedded sections, Fourthwall uses HMAC-SHA512 signatures to prove that the content is being embedded on a Fourthwall shop, for a specific supporter and tier.

​
Parameters

The following parameters are passed to your iframe:
ParameterDescription
hmacThe HMAC signature
timestampThe timestamp of when the signature was generated
shop_idYour shop ID
supporter_idSupporter ID of the logged-in member
tier_idTier ID of the supporter’s subscription

​
Verification

To verify the signature, recalculate the HMAC signature using the same parameters and your secret key. The data string format: 
shop_id=${shop_id}&supporter_id=${supporter_id}&tier_id=${tier_id}&timestamp=${timestamp}
Your secret key is available in your Developer settings. Never leak this secret in your code. If exposed, it can be used to impersonate any supporter on your shop.

​
JavaScript Example

async function getHmacKey(secret) {
  const encoder = new TextEncoder();
  const keyData = encoder.encode(secret);
  return await crypto.subtle.importKey(
    'raw',
    keyData,
    { name: 'HMAC', hash: 'SHA-512' },
    false,
    ['sign', 'verify']
  );
}

async function verifySignature(params, hmacSignature, secret) {
  const { shopId, supporterId, tierId, timestamp } = params;

  const encoder = new TextEncoder();
  const key = await getHmacKey(secret);

  const data = `shop_id=${shopId}&supporter_id=${supporterId}&tier_id=${tierId}&timestamp=${timestamp}`;

  const messageData = encoder.encode(data);
  const signature = await crypto.subtle.sign('HMAC', key, messageData);

  const generatedSignatureHex = uint8ArrayToHex(new Uint8Array(signature));

  return generatedSignatureHex === hmacSignature;
}