Signed requests

Signed requests allow you to generate images with dynamic content and protect your API key from unauthorized access. You can use it to create social media banners, article covers, or any other image with dynamic content. Links to the images needs to be generated on your server, and provided to the client. Creating a signed request requires a template identifier, changes in the template, and a signature generated with your API key. Image is generated on the fly, and returned to the client on the first request.

How to start?

Create a meta-link according to the following format:

https://get.renderform.io/signed/{templateIdentifier}.jpg?c={changesJson}&s={signature}

Change values:

• {templateIdentifier} - with your template identifier,
• {changesJson} - JSON with changes in the template encoded in base64,
• {signature} - signature generated with HMAC-SHA256 algorithm.

Create signed URL

Start from installing crypto-js package:

npm install crypto-js

Create a function that will generate signed URL for your template:

import Base64 from "crypto-js/enc-base64";
import Utf8 from "crypto-js/enc-utf8";
import hmacSHA256 from "crypto-js/hmac-sha256";

const createSignedUrl = (title: string): string => {
  const template = "my-template-identifier";
  const baseUri = `https://get.renderform.io/signed/${template}.jpg`;
  const apiKey = "my-api-key";
  const changes: Array<any> = [
    {
      id: "title",
      text: title
    }
  ];
  const changesParam = "?c=" + Base64.stringify(Utf8.parse(JSON.stringify(changes)));
  const signatureParam = "&s=" + hmacSHA256(baseUri + changesParam, apiKey);
  return baseUri + changesParam + signatureParam;
};

export { createSignedUrl };

Usage

Function above does not render the image, it only creates a signed URL. You can use it in your React component like this:

import React from "react";
import { createSignedUrl } from "./createSignedUrl";
export async function getStaticProps({ params }) {
  const document = getDocument(params.id);
  const previewUrl = createSignedUrl(document.title);
  return {
    props: {
      previewUrl,
      document
    },
  };
}

Image will be rendered on the first request, and cached for the next 24 hours. You can use it in your HTML code like this:

<meta property="og:image" content={previewUrl}/>
<meta name="thumbnail" content={previewUrl}/>
<meta name="twitter:image" content={previewUrl}/>
<link rel="preload" as="image" href={previewUrl}/>

Where {previewUrl} is the URL generated by createSignedUrl function.