Using a Trusted Certificate (from QZ-Print) in an angular 7 app

258 views
Skip to first unread message

Harry Whitehouse

unread,
Feb 28, 2019, 5:33:51 AM2/28/19
to qz-print
And I have some test code which works very nicely to test reading a USB scale. It's in the  ngOnInit() section of a particular component.  This works fine, although the security dialog pops up 3 times as each function is called.

  qz.websocket.connect().then(function() {
          let deviceInfo = {"vendorId" : "0x0d8f", "productId" : "0x0200",  "usagePage" : "0x008d"};
          return qz.hid.claimDevice(deviceInfo);
        }).then(function() {
           //console.log("scale device claimed!!");
        }).then(function() {
          let deviceInfo = {"vendorId" : "0x0d8f", "productId" : "0x0200",  "usagePage" : "0x008d", "responseSize" : 20};
          return qz.hid.readData(deviceInfo);
        }).then(function(data) {
           console.log(data);       
       // }).then(function() {
       //   return qz.websocket.disconnect();
       }).catch(function(err) {
          console.error(err);
       }); 

Because I purchased premium support, I was able to use this https://qz.io/wiki/generate-certificate as a guide and quick generate my private & public key along with the signed certificate on the QZ website (very slick BTW).

But now I'm a bit confused on how and where to add this cryptographic subsystem.

1.  When the trusted certificate is properly installed, does it just popup once for a given browser session?  Suppose I move back and forth to other components/pages?  Or will the "allow" feature stay enabled between sessions provides cookies are not cleared?

2.  Am I correct in assuming that all the required keys and certs are installed as part of the Angular code and does not involve the server-side?  I plan to monitor a local USB scale and print label ZPL payload  which is received from our server to a local printer  So I'm assuming that I don't need to install any of the QZ crypto on in our docker containers or any other server-based systems.  

3.  It appears like I would add the code below ahead of my code above with this format:

qz.security.setCertificatePromise(function(resolve, reject) {
    $.ajax({ url: "path/to/digital-certificate.txt", cache: false, dataType: "text" }).then(resolve, reject);
});

where my path might reflect my project directory, e.g. app/assets/certs/digital-certification.txt.

I am a bit confused about the $.ajax -- I haven't used any ajax libraries in Angular thus far -- I suspect they are more known to JS programmers.

Let me stop here before moving on to Signatures. 

Thanks for reading!

Harry

Tres Finocchiaro

unread,
Feb 28, 2019, 1:06:51 PM2/28/19
to Harry Whitehouse, qz-print
1.  When the trusted certificate is properly installed, does it just popup once for a given browser session?  Suppose I move back and forth to other components/pages?  Or will the "allow" feature stay enabled between sessions provides cookies are not cleared?

The "Always allow" won't be affected by cleared cookies, it's stored on the client in %appdata%\qz (or OS equivalent)

If you use the "qz:launch" URI, that will be affected by cookies.  That is a technique to launch QZ Tray from a browser link.  The "Remember" checkbox is generally cleared with the cookies.
 
2.  Am I correct in assuming that all the required keys and certs are installed as part of the Angular code and does not involve the server-side?  I plan to monitor a local USB scale and print label ZPL payload  which is received from our server to a local printer  So I'm assuming that I don't need to install any of the QZ crypto on in our docker containers or any other server-based systems.  

Certificate: 100% JavaScript
Signature:  Prefered to be back-end to avoid private-key theft but client-side JavaScript is also supported.  We use jsrsasign library for it in JS.
 
3.  It appears like I would add the code below ahead of my code above with this format:
qz.security.setCertificatePromise(function(resolve, reject) {
    $.ajax({ url: "path/to/digital-certificate.txt", cache: false, dataType: "text" }).then(resolve, reject);
});
where my path might reflect my project directory, e.g. app/assets/certs/digital-certification.txt.
I am a bit confused about the $.ajax -- I haven't used any ajax libraries in Angular thus far -- I suspect they are more known to JS programmers.


It's a jQuery function.  You can use fetch(...) or XHR instead if you'd like.  fetch(...) wasn't common when the API was written.  We may incorporate it in a future version to avoid unnecessary jQuery confusion.


--
You received this message because you are subscribed to the Google Groups "qz-print" group.
To unsubscribe from this group and stop receiving emails from it, send an email to qz-print+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages