React example

[mkromann]

Hi,

I am playing with qz and got printing working but I am having trouble getting my head around signing to allow for silent printing (just trying with dev certificate for now).

I'd like to do it client side, as the use-case is for an internal secured environment. Do you by any chance know or have an example of how to set it up in a React fashion?

Thanks for this library. 🙏

Magnus

[tresf]

Not yet. We do have an angular/ TS example here... Perhaps this has some pointers? https://github.com/qzind/tray/blob/f2761f83177bc6ac1db7a318dd059c7a4b03b2ee/assets/signing/sign-message.ts

[tomashlavac]

@mkromann Hi, here is example of signing certificate on client side.

export const initQzCerts = () => {
  qz.security.setCertificatePromise((resolve) =>
    fetch("/cert.pem", {
      cache: "no-store",
      headers: { "Content-Type": "text/plain" },
    })
      .then((data) => data.text())
      .then((text) => resolve(text)),
  );
  qz.security.setSignatureAlgorithm("SHA512");
  qz.security.setSignaturePromise(
    (dataToSign) => (resolve, reject) =>
      fetch("/key.pem", {
        cache: "no-store",
        headers: { "Content-Type": "text/plain" },
      })
        .then((wrapped) => wrapped.text())
        .then((data) => {
          const pk = KEYUTIL.getKey(data);
          const sig = new KJUR.crypto.Signature({ alg: "SHA512withRSA" });
          sig.init(pk);
          sig.updateString(dataToSign);
          const hex = sig.sign();
          console.log("DEBUG: \n\n" + stob64(hextorstr(hex)));
          resolve(stob64(hextorstr(hex)));
        })
        .catch((error) => reject(error)),
  );
}; 

You can use it in App.tsx with useEffect like this:

useEffect(() => {
    initQzCerts();
}, []);

[tresf]

Thanks @mkromann!