Authentication

Yofi tries to use industry common paradigm for authentication of frontend and backend

Let's use a shared secret for all operations. This will be simpler. We can use one secret for all operations.

For Frontend API - JWT Authentication

To embed the Yofi UI into your website, you need to generate a JWT for authorization. The authorization in the HTTP header is a JWT token using HS256 algorithm.

Please use the secret key(provided by Yofi) to generate a token. An example of token claims is shown below:

{
  "iss": "partner_id", // Partner ID
  "exp": 1716123456,   // Expiration Time
  "iat": 1716113456,   // The time at which the JWT was issued.
  "aud": "Yofi",       // Audience, case-sensitive
  "sub": "the-shopify-store.myshopify.com" // Shopify shop url, without https://
}

Next send a SET_TOKEN message with JWT token to Yofi UI like this:

const message = {
  type: 'SET_TOKEN',
  data: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJwYXJ0bmVyX2lkIiwiYXVkIjoiWW9maSIsInN1YiI6InRoZS1zaG9waWZ5LXN0b3JlLm15c2hvcGlmeS5jb20iLCJleHAiOjE3NDM1ODkwMTcsImlhdCI6MTcxNTk0MzI4OX0.P5utgEsZo1i_h_kAhvapMESTwF3_-queBmU1xpPKhUQ' 
};
iframeRef.current.contentWindow.postMessage(message, 'THE-EMBED-ORIGIN');

For Webhook API

The signature of the payload is put in the HTTP header using base64-encoded SHA-256 HMAC algorithm.

Sending Data to Yofi

Yofi API Webhooks

Receiving Data from Yofi

Receive data via Webhook