ngrok.html

<script type="text/javascript">
    RED.nodes.registerType('ngrok', {
        category: 'network',
        color: '#008080',
        defaults: {
            buttonState: { value: false },
            port: { value: "" },
            portType: { value: "node-red" },
            host: { value: "" },
            hostType: { value: "localhost" },
            creds: { value: "", type: "ngrokauth", required: true },
            proto: { value: 'http' },
            bind_tls: { value: "https" },
            bind_tlsType: { value: "https" },
            subdomain: { value: "" },
            subdomainType: { value: "none" },
            auth: { value: "" },
            authType: { value: "none" },
            hostHeader: { value: "" },
            hostHeaderType: { value: "none" },
            name: { value: "" },
            inputtype: { value: "button" },
            inputs: { value: 0 }
        },
        inputs: 1,
        outputs: 1,
        icon: "white-globe.png",
        label: function () {
            return this.name || "ngrok";
        },
        oneditprepare: function () {

            var makeTypedInputOpt = function (label, value) {
                return {
                    value: value,
                    label: label,
                    hasValue: false
                }
            }

            $("#node-input-port").typedInput({
                default: "node-red",
                types: [makeTypedInputOpt("Node-RED port", "node-red"),'num', 'msg', 'flow', 'global', 'env'
                ],
                typeField: $("#node-input-portType"),
            })
            $("#node-input-host").typedInput({
                default: "localhost",
                types: [makeTypedInputOpt("localhost", "localhost"),'str', 'msg', 'flow', 'global', 'env'
                ],
                typeField: $("#node-input-hostType"),
            })
            $("#node-input-subdomain").typedInput({
                default: "none",
                types: [makeTypedInputOpt("None", "none"), 'str', 'msg', 'flow', 'global', 'env'
                ],
                typeField: $("#node-input-subdomainType"),
            })
            $("#node-input-bind_tls").typedInput({
                default: "https",
                types: [
                    makeTypedInputOpt("HTTPS", "https"),
                    makeTypedInputOpt("HTTP", "http"),
                    'msg', 'flow', 'global', 'env'
                ],
                typeField: $("#node-input-bind_tlsType"),
            })
            $("#node-input-auth").typedInput({
                default: "none",
                types: [makeTypedInputOpt("None", "none"), 'str', 'msg', 'flow', 'global', 'env'
                ],
                typeField: $("#node-input-authType"),
            })
            $("#node-input-hostHeader").typedInput({
                default: "none",
                types: [makeTypedInputOpt("None", "none"), 'str', 'msg', 'flow', 'global', 'env'
                ],
                typeField: $("#node-input-hostHeaderType"),
            })
           
        },
        oneditsave: function () {
            this.inputs.value = $("#node-input-inputs").val()
        },
        button: {
            visible: function () {
                if (this.inputtype == 'button') {
                    return true
                } else {
                    return false
                }
            },
            toggle: "buttonState",
            onclick: function () {
                var node = this;
                $.ajax({
                    url: "ngrokInject/" + this.id,
                    type: "POST",
                    data: { "on": this.buttonState },
                    success: function (resp, ) {
                        if (node.buttonState) {
                            RED.notify("Connecting", {type: "success"});
                        }  else {
                            RED.notify("Disconnecting", {type: "success"});
                        }

                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.error(errorThrown)
                        console.error(textStatus)
                        if (jqXHR.status == 404) {
                            RED.notify("ERROR Not Deployed", {type: "error"});
                        } else {
                            RED.notify("ERROR -- View Log", {type: "error"});
                        }
                    }
                });
            }
        }
    });
</script>

<script type="text/html" data-template-name="ngrok">
    <div class="form-row">
        <label for="node-config-input-privatekey">Authtoken</label>
        <input type="text" id="node-input-creds" style="width:70%;">
    </div>

    <div class="form-row">
        <label for="node-input-proto">Protocol</label>
        <select type="text" id="node-input-proto" style="width:70%;" onchange="toggleProtocol(this.value)">
            <option value="http">HTTP</option>
            <option value="https">HTTPS</option>
            <option value="tcp">TCP</option>
            <option value="tls">TLS</option>
        </select>
    </div>

    <div class="form-row">
        <label for="node-input-port">Port</label>
        <input type="hidden" id="node-input-portType">
        <input type="text" id="node-input-port" style="width:70%;" placeholder="port">
    </div>

    <div class="form-row">
        <label for="node-input-host">Host</label>
        <input type="hidden" id="node-input-hostType">
        <input type="text" id="node-input-host" style="width:70%;" placeholder="host">
    </div>

    <div id="node-ngrok-bind_tls" class="form-row">
        <label for="node-input-bind_tls">Binding</label>
        <input type="hidden" id="node-input-bind_tlsType">
        <input type="text" id="node-input-bind_tls" style="width:70%;" placeholder="https/http/both">
    </div>

    <div id="node-ngrok-subdomain" class="form-row">
        <label for="node-input-subdomain">Domain</label>
        <input type="hidden" id="node-input-subdomainType">
        <input type="text" id="node-input-subdomain" style="width:70%;" placeholder="domain">
    </div>

    <div id="node-ngrok-hostHeader" class="form-row">
        <label for="node-input-hostHeader">Host Header</label>
        <input type="hidden" id="node-input-hostHeaderType">
        <input type="text" id="node-input-hostHeader" style="width:70%;" placeholder="localhost">
    </div>

    <div id="node-ngrok-auth" class="form-row">
        <label for="node-input-auth">Auth</label>
        <input type="hidden" id="node-input-authType">
        <input type="text" id="node-input-auth" style="width:70%;" placeholder="username:password">
    </div>

    <div class="form-row">
        <label for="node-input-inputtype">Trigger</label>
        <select type="text" id="node-input-inputtype" style="width:70%;" onchange="toggleInputType(this.value)">
            <option value="button">Button</option>
            <option value="port">Input Port</option>
        </select>
    <input type='hidden' id="node-input-inputs">
    </div>

    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="ngrok">
    </div>

</script>

<script>
    function toggleProtocol(proto) {
        if (proto == 'http') {
            document.getElementById("node-ngrok-subdomain").style.display = "block";
            document.getElementById("node-ngrok-auth").style.display = "block";
            document.getElementById("node-ngrok-bind_tls").style.display = "block";
            document.getElementById("node-ngrok-hostHeader").style.display = "block";
        }
        else if (proto == 'tcp') {
            document.getElementById("node-ngrok-subdomain").style.display = "none";
            document.getElementById("node-ngrok-auth").style.display = "none";
            document.getElementById("node-ngrok-bind_tls").style.display = "none";
            document.getElementById("node-ngrok-hostHeader").style.display = "none";
        }
    }
    function toggleInputType(v) {
        if (v == 'button') {
            $("#node-input-inputs").val(0)
        } else if (v == 'port') {
            $("#node-input-inputs").val(1)
        }
    }
</script>

<script type="text/html" data-help-name="ngrok">
    <p>A node that wraps the ngrok controller and also adds the ngrok binary.</p>

    <h3 id="node-ngrok-info-inputs">Inputs</h3>
    <dl class="message-properties">
        <dt>payload<span class="property-type">string | boolean</span></dt>
        <dd>When the Trigger is set for <b>Input Port</b> you can start and stop the connection via a msg. Set <code>msg.payload</code> to either <code>"on"</code> or <code>true</code> to start the tunnel.  Set <code>msg.payload</code> to either <code>"off"</code> or <code>false</code> to stop the tunnel. </dd>
    </dl>
     <h3>Outputs</h3>
     <dl class="message-properties">
         <dt>payload<span class="property-type">string</span></dt>
         <dd> <code>msg.payload</code> will contain the ngrok public url that is established or null if the tunnel was stopped</dd>
     </dl>

    <h3>Properties</h3>
    <p><code>Authtoken</code> - while ngrok require account registration</p>
    <p><code>Protocol</code> - The protocol used by the upstream server you are connecting to;
    <ul>
        <li><code>HTTP</code> This isused for most service, like node-red webserver is using plain HTTP</li>
        <li><code>HTTPS</code></li> This is where the local server uses HTTPS, note if the server is using a self signed cert this may not work see https://github.com/ngrok/ngrok-javascript/issues/119
        <li><code>TCP</code></li> This is for plain TCP connections for other protocols
        <li><code>TLS</code></li> This forwards a TLS connection directly to the client exposing the upstream servers certificate.
    </ul>
    </p>
    <p><code>Port</code> - allows you to specify the local port number. Set to "Node-RED port" to use the current Node-RED port number</p>
    <p><code>Host</code> - allows you to specify the the host that ngrok will forward requests to in the local network, usually this is localhost</p>
    <p><code>Binding</code> - bind an HTTPS or HTTP endpoint or both. Expected values are <code>["http"]</code>, or <code>["https"]</code>. It is <b>STRONGLY</b> recommended to use HTTPS. Only valid when protocol is "http"</p>
    <p><code>Domain</code> - enable you to create Endpoints to listen for traffic on those domain (one free domain) names. Domains may be a subdomain of an ngrok-managed base domain like foo.ngrok.app or you can bring your own branded domain like foo.example.com (<a target="_blank" href="https://ngrok.com/docs/network-edge/domains-and-tcp-addresses/#domains">more</a>). Only valid when protocol is "http"</p>
    <p><code>Host Header</code> - allows you to rewrite the HTTP Host Header to this value. Only valid when protocol is "http"</p>
    <p><code>Auth</code> - this is the username and password ngrok will request before permitting connection. The format must be <code>username:password</code>. Only valid when protocol is "http"</p>
    <p>Refer to <a target="_blank" href="https://www.npmjs.com/package/ngrok#options">connection options</a> for more details</p>

    <h3>Trigger</h3>
    <p>
        When the trigger is set to <b>Button</b>, an inject button will be shown on the left hand side of the node that can be used to toggle the connection.
        When the trigger is set to <b>Input Port</b> you can open and close the tunnel via a msg - see <a href="#node-ngrok-info-inputs">Inputs - payload</a>.
    </p>

    <h3>Ngrok Dashboard</h3>
    <p>The dashboard previously available on port 4040 has been removed with the latest ngrok client,<br>
       ngrok now has a new dashboard in your ngrok.com account pages, 
       as of Feb 2024 this was in private beta but should roll out soon.
    </p>

    <h3>Debugging</h3>
    If your node-red logging level is set to <code>debug</code> then the full set of options being passed to the ngrok client (ngrok.forward) will be logged to the console, including the authtoken,
    This can be useful when trying to diagnose issues and may be asked for by ngrok support.<br>
    The simplest way to enable this logging if running node-red from the command line is to launch with the command <code>node-red -D logging.console.level=debug</code>

</script>


<script type="text/javascript">
    RED.nodes.registerType('ngrokauth',{
        category: 'config',
        credentials: {
          authtoken: {}
        },
        defaults :{
            name: {}
        },
        label: function() {
            return this.name || "Authtoken";
        }
    });
</script>

<script type="text/html" data-template-name="ngrokauth">
  <div class="form-row">
      <label for="node-config-input-authtoken">Authtoken</label>
      <input type="text" id="node-config-input-authtoken" placeholder="Authtoken">
  </div>
  <div class="form-row">
    <label for="node-config-input-name">Name</label>
    <input type="text" id="node-config-input-name" placeholder="Name">
  </div>

</script>

<script type="text/html" data-help-name="ngrokauth">
   <p>Ngrok Authtoken </p>
   <h3>Details</h3>
   <p> You must set an Authtoken obtained from ngrok.com, this is required</p>
</script>