Method to create a keyboardless Auth protected dashboard or digital sign. Powered by PubNub.

dashboard-secure.js

var dashboardSecure = {
    dashboardLog: function(message){
        console.log(message);
        $("#pubNubStatus").html(message);
    },
    runBoot: function(){
        dashboard.dashboardLog('Secure Dashboard is booting');
        dashboard.dashboardLog('Access Token is required');

        // Clear the HTML from the main page and present a non dismissable modal containing an access token
        //$("#dashboardContainer").html('');
        // The user then has to navigate to an auth page and input this token after validating their login credentials

        // The point here is to secure dashboards from anyone just being able to run the URL
        // It also gives admins a keyboard-less way of authenticating the page

        // Generate a 6 digit random string that can be presented to the user to ask them to verify
        const presentedAccessToken = dashboardSecure.generateRandomUUID(6);
        //console.log(presentedAccessToken);

        // Connect to PubNub and subcribe to the authToken channel
        // When an admin authorises this dashboard, PubNub will supply the auth payload to let the dashboard connect to the right channel(s)
        pubnub = new PubNub({
            publishKey : 'pub-put-your-token-here',
            subscribeKey : 'sub-put-your-token-here'
        });
           
        pubnub.addListener({
            status: function(statusEvent) {
                if (statusEvent.category === "PNConnectedCategory") {
                    //console.log(statusEvent);
                    //console.log('Event Channel Name: '+statusEvent.subscribedChannels[0]);
                    const subscribedChannel = statusEvent.subscribedChannels[0];
                    //dashboardSecure.dashboardLog('Waiting for authentication.');
                    if(subscribedChannel.startsWith("authentication-")){
                        dashboardSecure.dashboardLog('Waiting for authentication.');
                    }
                }
            },
            message: function(messagePayload) {
                console.log(messagePayload);
                if(messagePayload.message.type == "authentication"){
                    // A Sample Auth Payload from the auth server looks like: {"type":"authentication","accessToken":"M7YW4a","success":true,"channel":"BatteryPlaceDashboard"}
                    const authPayload = messagePayload.message;
                    if(authPayload.accessToken == presentedAccessToken && authPayload.success == true && authPayload.type == "authentication"){
                        // Disconnect from the auth server
                        pubnub.unsubscribe({channels: ['authentication-'+presentedAccessToken]});
                        const channelToJoin = authPayload.channel;
                        // Connect to the correct dashboard channel and listen for events as per normal
                        pubnub.subscribe({channels: [channelToJoin] });
                        // Close the modal and update the UI to reflect the connected status
                        dashboard.dashboardLog('Connected to PubNub!');
                        $('#accessRequiredModal').modal('hide');
                    }
                }
                if(messagePayload.message.type == 'MathewEvent'){
                    // dashboard.dashboardLog(msg.message.message);
                    // Update the UI for that type tile
                    $("#MathewCurrentMessage").html(messagePayload.message.message);
                    // Update the tile time stamp
                    let date = new Date();
                    let options = {
                        weekday: "short", year: "2-digit", month: "short",day: "numeric", hour: "2-digit", minute: "2-digit"
                    };  
                    console.log(date.toLocaleTimeString("en-us", options));
                    $("#MathewLastUpdate").html('<i class="fa fa-clock-o"></i> '+date.toLocaleTimeString("en-us", options));
                }
            },
            presence: function(presenceEvent) {
                // handle presence
            }
        })      
        console.log("Subscribing to authentication room for token "+presentedAccessToken);
        pubnub.subscribe({channels: ['authentication-'+presentedAccessToken]});

        // Update the HTML and then present the modal
        $("#modalAccessToken").html(presentedAccessToken);
        $('#accessRequiredModal').modal('show');
    },
    generateRandomUUID: function(length){
        var text = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        
        for (var i = 0; i < length; i++)
        text += possible.charAt(Math.floor(Math.random() * possible.length));
        
        return text;
    }
};

Method to create a keyboardless auth for dashboards and digital signs powered via PubNub.