Merge pull request #3 from bartbutenaers/master

Keys in credentials & button to generate keypair

Author: webmaxru

vapid-configuration.html

@@ -3,13 +3,63 @@
         category: 'config',
         defaults: {
             subject: { value: "", required: true },
-            publicKey: { value: "", required: true },
-            privateKey: { value: "", required: true },
+            // The below 3 key fields are not used anymore (i.e. replaced by credentials) but we cannot
+            // remove them here, otherwise the keys of old existing nodes would be lost ...
+            publicKey: { value: ""},
+            privateKey: { value: ""},
             gcmApiKey: { value: "" },
             name: { value: "" }
         },
+        credentials: {
+            // TODO how make credentials required??
+            publicKey2: {type:"password"},
+            privateKey2: {type: "password"},
+            gcmApiKey2: {type:"password"}
+        },
         label: function () {
             return this.name || this.subject;
+        },
+        oneditprepare: function () {
+            var node = this;
+            
+            // For old nodes (without credentials), the (unsecure) keys should be converted to credentials.  Some remarks:
+            // - The old html screen elements should remain available, in order to keep the old node values.
+            // - The new keys have postfix '2', otherwise Node-RED binds the html screen element to both old and new node fields.
+            // - We will manipulate the html screen element values, so Node-RED will automatically sync the node values (at 'Done' or 'Cancel').
+            if (node.publicKey) {
+                $('#node-config-input-publicKey').val("");
+                $('#node-config-input-publicKey2').val(node.publicKey);
+            }
+            if (node.privateKey) {
+                $('#node-config-input-privateKey').val("");
+                $('#node-config-input-privateKey2').val(node.privateKey);
+            }
+            if (node.gcmApiKey) {
+                $('#node-config-input-gcmApiKey').val("");
+                $('#node-config-input-gcmApiKey2').val(node.gcmApiKey);
+            }
+        
+            $("#node-input-generateKeyPair").click(function () {
+                if ($("#node-config-input-publicKey2").val() || $("#node-config-input-privateKey2").val()) {
+                    if (!confirm("The current keypair will be overwritten!  Are you sure to continue?")) {
+                        // The user has clicked the 'Cancel' button
+                        return;
+                    }
+                }
+                
+                // Ask the server side flow to generate a new key pair
+                $.getJSON('vapid_configuration/generate_key_pair', function(jsonData) {
+                    // Show the new keys on the config screen
+                    $("#node-config-input-publicKey2").val(jsonData.publicKey);
+                    $("#node-config-input-privateKey2").val(jsonData.privateKey);
+                    
+                    // Make sure the validators are being triggerd, otherwise the red border will remain around the input fields
+                    $("#node-config-input-publicKey2").change();
+                    $("#node-config-input-privateKey2").change();
+                }).error(function() {
+                    RED.notify("Cannot create VAPID key pair.  See Node-RED log for more details...", "error");
+                });
+            });
         }
     });
 
@@ -21,16 +71,26 @@
         <input type="text" id="node-config-input-subject" placeholder="This must be either a URL or a 'mailto:' address.">
     </div>
     <div class="form-row">
-        <label for="node-config-input-publicKey"><i class="icon-tag"></i> Public Key</label>
-        <input type="text" id="node-config-input-publicKey" placeholder="The public VAPID key">
+        <label>&nbsp;</label>
+        <button id="node-input-generateKeyPair"><i class="fa fa-exchange"></i> Generate VAPID keypair</button>
+    </div>
+    <div class="form-row" hidden>
+        <!-- Unused hidden fields to bind the old (unsecure) keys in the node instance -->
+        <input type="text" id="node-config-input-publicKey">
+        <input type="text" id="node-config-input-privateKey">
+        <input type="text" id="node-config-input-gcmApiKey">
+    </div>
+    <div class="form-row">
+        <label for="node-config-input-publicKey2"><i class="icon-tag"></i> Public Key</label>
+        <input type="password" id="node-config-input-publicKey2">
     </div>
     <div class="form-row">
-        <label for="node-config-input-privateKey"><i class="icon-tag"></i> Private Key</label>
-        <input type="text" id="node-config-input-privateKey" placeholder="The public VAPID key">
+        <label for="node-config-input-privateKey2"><i class="icon-tag"></i> Private Key</label>
+        <input type="password" id="node-config-input-privateKey2">
     </div>
     <div class="form-row">
-        <label for="node-config-input-gcmApiKey"><i class="icon-tag"></i> GCM API Key (for older browsers)</label>
-        <input type="text" id="node-config-input-gcmApiKey" placeholder="The API key to send with the GCM request">
+        <label for="node-config-input-gcmApiKey2"><i class="icon-tag"></i> GCM API Key (for older browsers)</label>
+        <input type="password" id="node-config-input-gcmApiKey2">
     </div>
     <div class="form-row">
         <label for="node-config-input-name"><i class="icon-tag"></i> Name</label>
@@ -41,4 +101,4 @@
 <script type="text/x-red" data-help-name="vapid-configuration">
     <p>Configuration for VAPID. You can generate the key pair using <code>generateVAPIDKeys()</code> method of <a href="https://www.npmjs.com/package/web-push" target="_blank">web-push</a> library or online here: <a href="https://web-push-codelab.glitch.me/" target="_blank">https://web-push-codelab.glitch.me</a>.</p>
     <p>For Chrome prior to version 52 and some old browsers, you're also still required to include a <code>gcm_sender_id</code> in your web app's manifest.json.</p>
-</script>
+</script>

vapid-configuration.js

@@ -1,10 +1,51 @@
 module.exports = function (RED) {
+  const webpush = require('web-push');
+    
   function VapidConfigurationNode (config) {
     RED.nodes.createNode(this, config)
     this.subject = config.subject
+    // Keep the old key fields, to support old nodes (without credentials)
     this.publicKey = config.publicKey
     this.privateKey = config.privateKey
     this.gcmApiKey = config.gcmApiKey
+    
+    var node = this;
+    
+    // Allow other nodes to access the secure node private credentials.
+    // This is not good practice, but don't see a better approach since these nodes were designed originally without credentials ...
+    this.getKeys = function () {
+        // Use the new keys in the credentials, unless we are dealing with an old node (without credentials)
+        return {
+            publicKey : node.credentials.publicKey2  || node.publicKey,
+            privateKey: node.credentials.privateKey2 || node.privateKey,
+            gcmApiKey : node.credentials.gcmApiKey2  || node.gcmApiKey
+        }
+    }
   }
-  RED.nodes.registerType('vapid-configuration', VapidConfigurationNode)
+  
+  RED.nodes.registerType("vapid-configuration", VapidConfigurationNode,{
+    credentials: {
+      publicKey2: {type: "password"},
+      privateKey2: {type: "password"},
+      gcmApiKey2: {type: "password"}
+    }
+  });
+  
+  // Make the key pair generation available to the config screen (in the flow editor)
+  RED.httpAdmin.get('/vapid_configuration/generate_key_pair', RED.auth.needsPermission('vapid-configuration.write'), async function(req, res){
+    try {
+      // Generate a VAPID keypair
+      const vapidKeys = webpush.generateVAPIDKeys();
+ 
+      // Return public key and private key to the config screen (since they need to be stored in the node's credentials)
+      res.json({
+        publicKey: vapidKeys.publicKey,
+        privateKey: vapidKeys.privateKey
+      })
+    }
+    catch (err) {
+      console.log("Error while generating VAPID keypair: " + err)
+      res.status(500).json({error: 'Error while generating VAPID keypair'})
+    }
+  });
 }

web-push.js

@@ -16,16 +16,19 @@ module.exports = function (RED) {
 
         let options
         if (node.vapidConfiguration) {
+          // Get the secure keys from the VAPID configuration credentials
+          var keys = node.vapidConfiguration.getKeys();
+          
           options = {
             vapidDetails: {
               subject: node.vapidConfiguration.subject,
-              publicKey: node.vapidConfiguration.publicKey,
-              privateKey: node.vapidConfiguration.privateKey
+              publicKey: keys.publicKey,
+              privateKey: keys.privateKey
             }
           }
 
-          if (node.vapidConfiguration.gcmApiKey) {
-            options['gcmAPIKey'] = node.vapidConfiguration.gcmApiKey
+          if (keys.gcmApiKey) {
+            options['gcmAPIKey'] = keys.gcmApiKey
           }
         }