In this article I’m going to show you how to automatically log into an ASP.NET website running on a kiosk.
This comes in handy when you’re reusing your existing website and want to host it on a kiosk, but want to automate the login process. Often times in this scenario it doesn’t make sense for the user to log in manually.
KioskSimple makes it easy to securely host your website on a kiosk and automatically log in using a little JavaScript injection.
One of the coolest things about this solution is that it doesn’t require any code changes to your website.
You’ll simple create a JavaScript file that will detect if you’re on the login screen and then have it submit your credentials.
The JavaScript file can be hosted on your kiosk or a remote web server.
The following script is a detailed example of how to log in to your website automatically using the KioskSimple JavaScript injection feature. You’ll want to change the login URL and credentials to match your own.
Chrome Engine Example (Recommended)
Use the following example when using the Chrome Engine (BROWSER->BROWSER SETTINGS->Web Browser = Chrome Engine)
document.addEventListener("DOMContentLoaded", init);
function init() {
if (window.location.href.indexOf("mywebsite.com/Login/") > -1) {
if (document.getElementById("txtUserName") != null) {
// Username
document.getElementById("txtUserName").value = 'MyUsername';
// Password
document.getElementById("txtPassword").value = 'MyPassword';
document.forms["aspnetForm"].elements["btnLogin"].click();
}
}
}
Internet Explorer Example
Use the following example when using Internet Explorer (BROWSER->BROWSER SETTINGS->Web Browser = Internet Explorer)
if (window.location.href.indexOf("mywebsite.com/Login/") > -1) {
if (document.getElementById("txtUserName") != null) {
// Username
document.getElementById("txtUserName").value = 'MyUsername';
// Password
document.getElementById("txtPassword").value = 'MyPassword';
document.forms["aspnetForm"].elements["btnLogin"].click();
}
}
How to get this example working in KioskSimple
The first step is to download and install the free demo of KioskSimple.
Customize the script to match your website login form
You’ll want to change the following fields to match your login form…
- Login URL
- Username
- Password
If you need help with this please contact us and we can customize the script for you.
Configure KioskSimple to inject your website login script:
- Copy the code example above and create a file called AutoLogin.js
- Move your script file to the following directory on your kiosk “C:\ProgramData\RedSwimmer\KioskSimple”
- Start the KioskSimple configuration app.
- Select the BROWSER left menu
- Select JAVASCRIPT
- Under JavaScript Injection URL enter the path of the credit card script “file:///C:/ProgramData/RedSwimmer/KioskSimple/AutoLogin.js”
- Save your settings
Configure KioskSimple to run your website:
- Select the BROWSER left menu
- Select BROWSER SETTINGS
- Under Start-up Web Page enter the URL of your website to run in kiosk mode
- Save your settings and close the configuration app
Start KioskSimple in Test Mode
You should see the login page appear briefly and then the user should automatically be logged in. It’s as easy as that!
Got Questions?
Please contact us if you need help customizing the website login script to match your login form.
We also offer free phone and email technical support for all of our code examples. Try finding that anywhere else in this industry.
We’re dedicated to making your next kiosk project a success and are happy to hold your hand through the process.
- Kiosk Idle Timeout: What Happens When They Walk Away… - May 25, 2019
- How to Plan Your Payment Kiosk Workflow - May 4, 2019
- Selecting Kiosk Payment Devices, Don’t Paint Yourself into A Corner - April 25, 2019