Web triggers remote - Controlling kiosk from a mobile question

Hi All,

Given the current scenario, I’m looking to make a few of our Kiosks information boards that can be managed remotely, using the example: https://support.intuiface.com/hc/en-us/articles/360007180912--Web-Triggers-API-Demo-Sample

My question, is there a way to destroy the session after it is done?

I tested with two phones, and the first phone can still control after the second phone starts controlling.

I am wondering if there is a way to only allow the most recent, same when it times-out to the Splash screen, to destroy any connections.

<-- EDIT: I tried adding a random Number generator, and in the
URL Builder Text Manipulation operator do like:
http://intuiface-mobile-remote-control.webflow.io/?apikey={apikey}&deviceid={deviceID}{randomKEY}
but no joy… Had Hoped that you could use the deviceID plus a random string to make it a unique “current” controller.

Any assistance is greatly appreciated.

1 Like

… Well i’m not giving up on this, “beyond touch” is crucial with the current health restrictions.

I am looking for now to consider using a few tricks with jQuery, and web localStorage… Basically, if the user closes the browser, browses away etc, I hide the content using a localStorage variable… will also look to fire back a closing message to send the homescreen back (opposite of init).

Here’s a test i’ve done with localStorage if anyone interested

<-- Update…

Looking at:
var apikey = params[“apikey”];
var deviceID = params[“deviceid”];

//parse all buttons to add onclick functions with proper url
  $( ".webtrigger-button" ).each(function() {
    this.onclick= function() {             
            var url = rootPath+"?apikey="+apikey+"&playerDeviceIDs="+deviceID+"&message="+this.getAttribute("message");
            //parse potential parameters
            if (this.getAttribute("parameter1") != undefined)
            	url += "&parameter1="+this.getAttribute("parameter1");
      			if (this.getAttribute("parameter2") != undefined)
            	url += "&parameter2="+this.getAttribute("parameter2");
            if (this.getAttribute("parameter3") != undefined)
            	url += "&parameter3="+this.getAttribute("parameter3");
             
			 //DEBUG only: to display the request before being sent
			 //$('#request').html(url);
            var res = httpGet(url);
			
			//DEBUG only: to display the reponse
            //$('#response').html(res);
             
        };
  });
  
//send initialization message
var initUrl = rootPath+"?apikey="+apikey+"&playerDeviceIDs="+deviceID+"&message=init";
httpGet(initUrl);

});

I am now sending another parameter the value of my random “sessionID”, and that appears in the URL no worries…
so In theory I can edit

var initUrl = rootPath+"?apikey="+apikey+"&playerDeviceIDs="+deviceID+"&message=init";
httpGet(initUrl);

to be

var sessionID = params[“sessionid”];

var initUrl = rootPath+"?apikey="+apikey+"&playerDeviceIDs="+deviceID+"&sessionid="+sessionID+"&message=init";
httpGet(initUrl);

Currently not able to get the sessionid variable to show in my interface… anyhow, the logic makes sense…

… and yes,i’m aware I’m talking to myself =)

2 Likes

Hi @Ryan,

The approach looks good and it’s actually something I had on my todo list for a while: improving and securing this web trigger access.
I’d summarize my ideas in the following workflow:

  • Add a random session ID in the QR Code, or a timestamp (from the Clock IA) and save this in a variable in the XP.
  • When the code is scanned
    • Save the sessionID on the web page JS and send it back in all the web triggers, in Parameter 3 for example.
    • When the init is sent to the XP, the XP can generate the future ID that will be embedded in the next code
  • The XP should only accept web triggers where Parameter 3 is equal to the current session ID, using conditional triggers.

With some adjustment on session end (does it have to wait for a new one to begin, or can you explicitly close it from the mobile web page?), this should work to have only 1 user at a time interacting with a screen.

Let me know how it goes

1 Like

HI @Seb , I’m almost done with it.

I ended up with that approach, so thanks.
I have it fully working now, My ONLY issue right now is rebuilding the QR code, it currently keeps the existing random text sessionID (even though I rebuild it), (after timeout/session end I send them back to the intro which resets the sessionID variable).

Stay tuned, will share with you in a day or so, thanks for the great feedback!

1 Like

Updates and example:

What this does:
Creates a simple random generated number to use as a session, called “sessionID”
We then use this on each “message” call to the app, validating parameter3 on the users mobile device against the current sessionID variable in the Kiosk.

I also have a “popup” window if anyone touches the screen, it displays an overlay, yells (politely) at them to not touch the screen, and then disappears.

Scene Structure > Intro
Trigger and actions: on Has been entered:

  • generate number - Random Number Generator
  • clear - Global Variable sessionID
  • clear Text Manipulation Session Info
  • concatenate Text Manipulation Session Info - Session ID:
  • concatenate Text Manipulation Session Info - value from Random Number Generator
  • set text Intuiface-SessionID

timer has elapsed 4 sec:
simulate a tap > OK

Scene Structure > Layer 1 > Group-Configuration > OK
Trigger and actions: is released:
TODO: the issue still with the QR code generator not updating to the new sessionID, meaning the shortURL/QR code are still showing the last link generated.
I notice triggers and actions added to the ON button are overridden by the QR Generator after a few seconds… =(

Initial setup:

I removed API key from being input, and trigger an automatic button press.

Values that need adding:

Interface Assets > Value operators > Api Key: Add your API key
Interface Assets > Value operators > Text Manipulation URL Builder Original text: https://link-to-yourwebsite.com/?apikey={apikey}&deviceid={deviceID}&sessionid={sessionID}

Update to webflowMobile.js:

I simply added the variable “sessionID” and include this via parameter3 in the get & send functions
(my script actually destroys the current jquery session, but that includes a cookie plugin, so for simplicity, i haven’t included).

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script>
var rootPath = "https://api.intuiface.com/webTriggers/v1/sendMessage"
$(document).ready(function() { 
//parse window location to retrieve apikey & device id

var params = getJsonFromUrl();

var apikey = params["apikey"];
var deviceID = params["deviceid"];
var sessionID = params["sessionid"];

//parse all buttons to add onclick functions with proper url
  $( ".webtrigger-button" ).each(function() {
    this.onclick= function() {             
            var url = rootPath+"?apikey="+apikey+"&playerDeviceIDs="+deviceID+"&parameter3="+sessionID+"&message="+this.getAttribute("message");
            //parse potential parameters
            if (this.getAttribute("parameter1") != undefined)
            	url += "&parameter1="+this.getAttribute("parameter1");
      			if (this.getAttribute("parameter2") != undefined)
            	url += "&parameter2="+this.getAttribute("parameter2");
            if (this.getAttribute("parameter3") != undefined)
            	url += "&parameter3="+this.getAttribute("parameter3");
             
			 //DEBUG only: to display the request before being sent
			 //$('#request').html(url);
            var res = httpGet(url);
			
			//DEBUG only: to display the reponse
            //$('#response').html(res);
             
        };
  });
  
//send initialization message
var initUrl = rootPath+"?apikey="+apikey+"&playerDeviceIDs="+deviceID+"&message=init&parameter3="+sessionID;
httpGet(initUrl);

});

function getJsonFromUrl() {
  var query = location.search.substr(1);
  var result = {};
  query.split("&").forEach(function(part) {
    var item = part.split("=");
    result[item[0]] = decodeURIComponent(item[1]);
  });
  return result;
}

function httpGet(theUrl)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
    xmlHttp.send( null );
    return xmlHttp.responseText;
}

</script>

I’ll work on it over the next few nights after work, but in the meantime, if you want to take a look:

I couldn’t upload here (15mb, so have added to my OneDrive here)

2 Likes

Thanks for sharing this progress with us @Ryan.
If I may, you should remove this part of code in the JS, to avoid your session ID to be overridden:

 if (this.getAttribute("parameter3") != undefined)
            	url += "&parameter3="+this.getAttribute("parameter3");
2 Likes

Thanks @Seb
I also have a simple thought,
The user could tap their phone near an NFC chip, OR type in the URL of a bit.ly link, then in the mobile web browser that opens, they simply type in the code they see on-screen… which is the sessionID… if user input == sessionID they can control, and possibly even interact with bluetooth proximity, which would also kill session if they move away, or someone scans new code.

1 Like