Implement QR code provisioning for KIOSK

merge-requests/16/head
Milan Perera 6 years ago
parent 051af54dca
commit e10d78b702

@ -71,6 +71,93 @@
<div class="wr-input-control">
<textarea id="android-eula" type="text" class="form-control"></textarea>
</div>
<!-- KIOSK Configs -->
<h4>
Android KIOSK Provisioning Configs
<hr>
</h4>
<div class="kiosk-inputs">
<div class="wr-input-control">
<label class="wr-input-label" for="android-kiosk-config-1">
PROVISIONING_DEVICE_ADMIN_COMPONENT_NAME
<!--<span class="helper" title="Time interval after which Android agent will contact IoT Server each time to fetch data">-->
<!--<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>-->
<!--</span>-->
<br>
( ex: com.emm.android/com.emm.android.DeviceAdminReceiver )
</label>
<input id="android-kiosk-config-1" type="text" class="form-control" >
</div>
<div class="wr-input-control">
<label class="wr-input-label" for="android-kiosk-config-2">
PROVISIONING_DEVICE_ADMIN_SIGNATURE_CHECKSUM
<!--<span class="helper" title="Time interval after which Android agent will contact IoT Server each time to fetch data">-->
<!--<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>-->
<!--</span>-->
<br>
( ex: gJD2YwtOiWJHkSMkkIfLRlj-quNqG1fb6v100QmzM9w= )
</label>
<input id="android-kiosk-config-2" type="text" class="form-control" >
</div>
<div class="wr-input-control">
<label class="wr-input-label" for="android-kiosk-config-3">
PROVISIONING_DEVICE_ADMIN_PACKAGE_DOWNLOAD_LOCATION
<!--<span class="helper" title="Time interval after which Android agent will contact IoT Server each time to fetch data">-->
<!--<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>-->
<!--</span>-->
<br>
( ex: com.emm.android/com.emm.android.DeviceAdminReceiver )
</label>
<input id="android-kiosk-config-3" type="text" class="form-control" >
</div>
<div class="wr-input-control">
<label class="wr-input-label" for="android-kiosk-config-4">
PROVISIONING_WIFI_SSID
<!--<span class="helper" title="Time interval after which Android agent will contact IoT Server each time to fetch data">-->
<!--<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>-->
<!--</span>-->
<br>
( ex: GuestWiFi )
</label>
<input id="android-kiosk-config-4" type="text" class="form-control" >
</div>
<div class="wr-input-control">
<label class="wr-input-label" for="android-kiosk-config-5">
PROVISIONING_WIFI_PASSWORD
<!--<span class="helper" title="Time interval after which Android agent will contact IoT Server each time to fetch data">-->
<!--<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>-->
<!--</span>-->
<br>
</label>
<input id="android-kiosk-config-5" type="text" class="form-control" >
</div>
<div class="wr-input-control">
<label class="wr-input-label" for="android-kiosk-config-6">
PROVISIONING_SKIP_ENCRYPTION
<!--<span class="helper" title="Time interval after which Android agent will contact IoT Server each time to fetch data">-->
<!--<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>-->
<!--</span>-->
<br>
( ex: gJD2YwtOiWJHkSMkkIfLRlj-quNqG1fb6v100QmzM9w= )
</label>
<select id="android-kiosk-config-6" class="form-control" data-default="0">
<option value="false">false</option>
<option value="true">true</option>
</select>
</div>
</div>
<!-- End of KIOSK Configs -->
<div class="wr-input-control wr-btn-grp">
<button id="save-android-btn" class="wr-btn">Save</button>
</div>

@ -80,6 +80,15 @@ var configParams = {
"IOS_CONFIG_APNS_MODE": "iOSConfigAPNSMode"
};
var kioskConfigs = {
"adminComponentName" : "android.app.extra.PROVISIONING_DEVICE_ADMIN_COMPONENT_NAME",
"wifiSSID" : "android.app.extra.PROVISIONING_WIFI_SSID",
"wifiPassword" : "android.app.extra.PROVISIONING_WIFI_PASSWORD",
"skipEncryption" : "android.app.extra.PROVISIONING_SKIP_ENCRYPTION",
"checksum" : "android.app.extra.PROVISIONING_DEVICE_ADMIN_SIGNATURE_CHECKSUM",
"downloadURL" : "android.app.extra.PROVISIONING_DEVICE_ADMIN_PACKAGE_DOWNLOAD_LOCATION"
};
$(document).ready(function () {
$("#fcm-inputs").hide();
tinymce.init({
@ -111,21 +120,33 @@ $(document).ready(function () {
if (data != null && data.configuration != null) {
for (var i = 0; i < data.configuration.length; i++) {
var config = data.configuration[i];
if (config.name == configParams["NOTIFIER_TYPE"]) {
if (config.name === configParams["NOTIFIER_TYPE"]) {
$("#android-config-notifier").val(config.value);
if (config.value != notifierTypeConstants["FCM"]) {
if (config.value !== notifierTypeConstants["FCM"]) {
$("#fcm-inputs").hide();
$("#local-inputs").show();
} else {
$("#fcm-inputs").show();
$("#local-inputs").hide();
}
} else if (config.name == configParams["NOTIFIER_FREQUENCY"]) {
} else if (config.name === configParams["NOTIFIER_FREQUENCY"]) {
$("input#android-config-notifier-frequency").val(config.value / 1000);
} else if (config.name == configParams["FCM_API_KEY"]) {
} else if (config.name === configParams["FCM_API_KEY"]) {
$("input#android-config-fcm-api-key").val(config.value);
} else if (config.name == configParams["ANDROID_EULA"]) {
} else if (config.name === configParams["ANDROID_EULA"]) {
$("#android-eula").val(config.value);
} else if (config.name === kioskConfigs["adminComponentName"]) {
$("input#android-kiosk-config-1").val(config.value);
} else if (config.name === kioskConfigs["wifiSSID"]) {
$("input#android-kiosk-config-2").val(config.value);
} else if (config.name === kioskConfigs["wifiPassword"]) {
$("input#android-kiosk-config-3").val(config.value);
} else if (config.name === kioskConfigs["checksum"]) {
$("input#android-kiosk-config-4").val(config.value);
} else if (config.name === kioskConfigs["downloadURL"]) {
$("input#android-kiosk-config-5").val(config.value);
} else if (config.name === kioskConfigs["skipEncryption"]) {
$("#android-kiosk-config-6").val(config.value);
}
}
}
@ -161,13 +182,22 @@ $(document).ready(function () {
var androidLicense = tinyMCE.activeEditor.getContent();
var errorMsgWrapper = "#android-config-error-msg";
var errorMsg = "#android-config-error-msg span";
if (notifierType == notifierTypeConstants["LOCAL"] && !notifierFrequency) {
// KIOSK configs
var adminComponentName = $("input#android-kiosk-config-1").val();
var checksum = $("input#android-kiosk-config-2").val();
var downloadUrl = $("input#android-kiosk-config-3").val();
var wifiSSID = $("input#android-kiosk-config-4").val();
var wifiPassword = $("input#android-kiosk-config-5").val();
var encryption = $("#android-kiosk-config-6").find("option:selected").attr("value");
if (notifierType === notifierTypeConstants["LOCAL"] && !notifierFrequency) {
$(errorMsg).text("Notifier frequency is a required field. It cannot be empty.");
$(errorMsgWrapper).removeClass("hidden");
} else if (notifierType == notifierTypeConstants["LOCAL"] && !isPositiveInteger(notifierFrequency)) {
} else if (notifierType === notifierTypeConstants["LOCAL"] && !isPositiveInteger(notifierFrequency)) {
$(errorMsg).text("Provided notifier frequency is invalid. ");
$(errorMsgWrapper).removeClass("hidden");
} else if (notifierType == notifierTypeConstants["FCM"] && !fcmAPIKey) {
} else if (notifierType === notifierTypeConstants["FCM"] && !fcmAPIKey) {
$(errorMsg).text("FCM API Key is a required field. It cannot be empty.");
$(errorMsgWrapper).removeClass("hidden");
} else {
@ -205,10 +235,54 @@ $(document).ready(function () {
"contentType": "text"
};
var kioskAdminComponent = {
"name": kioskConfigs["adminComponentName"],
"value": adminComponentName,
"contentType": "text"
};
var kioskChecksum = {
"name": kioskConfigs["checksum"],
"value": checksum,
"contentType": "text"
};
var kioskDownloadURL = {
"name": kioskConfigs["downloadURL"],
"value": downloadUrl,
"contentType": "text"
};
var kioskWifiSSID = {
"name": kioskConfigs["wifiSSID"],
"value": wifiSSID,
"contentType": "text"
};
var kioskWifiPassword = {
"name": kioskConfigs["wifiPassword"],
"value": wifiPassword,
"contentType": "text"
};
var kioskEncryption = {
"name": kioskConfigs["skipEncryption"],
"value": encryption,
"contentType": "text"
};
configList.push(type);
configList.push(frequency);
configList.push(androidEula);
if (notifierType == notifierTypeConstants["FCM"]) {
configList.push(kioskAdminComponent);
configList.push(kioskChecksum);
configList.push(kioskDownloadURL);
configList.push(kioskEncryption);
configList.push(kioskWifiSSID);
configList.push(kioskWifiPassword);
if (notifierType === notifierTypeConstants["FCM"]) {
configList.push(fcmKey);
configList.push(fcmId);
}

@ -31,6 +31,15 @@ var backendEndBasePath = "/api/device-mgt/v1.0";
// });
//}
var kioskConfigs = {
"adminComponentName" : "android.app.extra.PROVISIONING_DEVICE_ADMIN_COMPONENT_NAME",
"wifiSSID" : "android.app.extra.PROVISIONING_WIFI_SSID",
"wifiPassword" : "android.app.extra.PROVISIONING_WIFI_PASSWORD",
"skipEncryption" : "android.app.extra.PROVISIONING_SKIP_ENCRYPTION",
"checksum" : "android.app.extra.PROVISIONING_DEVICE_ADMIN_SIGNATURE_CHECKSUM",
"downloadURL" : "android.app.extra.PROVISIONING_DEVICE_ADMIN_PACKAGE_DOWNLOAD_LOCATION"
};
/*
* set popup maximum height function.
*/
@ -72,6 +81,63 @@ function generateQRCode(qrCodeClass) {
});
}
/*
* QR-code generation function for KIOSK.
*/
function generateKIOSKQRCode(qrCodeClass) {
var androidConfigAPI = "/api/device-mgt/android/v1.0/configuration";
var payload = {};
var isKioskConfigured = false;
invokerUtil.get(
androidConfigAPI,
function (data) {
data = JSON.parse(data);
if (data != null && data.configuration != null) {
for (var i = 0; i < data.configuration.length; i++) {
var config = data.configuration[i];
if (config.name === kioskConfigs["adminComponentName"]) {
isKioskConfigured = true;
payload[config.name] = config.value;
} else if (config.name === kioskConfigs["wifiSSID"]) {
payload[config.name] = config.value;
} else if (config.name === kioskConfigs["wifiPassword"]) {
payload[config.name] = config.value;
} else if (config.name === kioskConfigs["checksum"]) {
payload[config.name] = config.value;
} else if (config.name === kioskConfigs["downloadURL"]) {
payload[config.name] = config.value;
} else if (config.name === kioskConfigs["skipEncryption"]) {
payload[config.name] = Boolean(config.value);
}
}
}
}, function (data) {
console.log(data);
});
var aToken = $(".a-token");
var tokenPair = aToken.data("atoken");
var accessToken = {};
accessToken[kioskConfigs["accessToken"]] = tokenPair["accessToken"];
payload[kioskConfigs["androidExtra"]] = accessToken;
if (isKioskConfigured) {
$(qrCodeClass).qrcode({
text: JSON.stringify(payload),
width: 300,
height: 300
});
} else {
$("#kiosk_heading").hide();
$("#kiosk_content").hide();
}
}
function toggleEnrollment() {
$(".modal-content").html($("#qr-code-modal").html());
generateQRCode(".modal-content .qr-code");
@ -351,6 +417,7 @@ $(document).ready(function () {
$.sidebar_toggle();
generateQRCode(".enrollment-qr-container");
generateKIOSKQRCode(".kiosk-enrollment-qr-container");
if (typeof $.fn.collapse == 'function') {
$('.navbar-collapse.tiles').on('shown.bs.collapse', function () {

@ -207,6 +207,22 @@
{{/if}}
</div>
<div class="row" id="kiosk_heading">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-12 add-padding-top-2x ">
<h3 class="uppercase">PROVISION YOUR KIOSK DEVICE</h3>
<hr>
</div>
</div>
<div class="a-token" data-atoken="{{accessToken}}"></div>
<div class="row" id="kiosk_content">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 add-padding-top-2x add-padding-bottom-2x">
<h3 class="text-center">Scan to provision the KIOSK device</h3>
<div class="kiosk-enrollment-qr-container text-center"></div>
</div>
</div>
{{#zone "topCss"}}
{{css "css/styles.css"}}
{{/zone}}

@ -23,6 +23,7 @@ function onRequest(context) {
viewModel["isVirtual"] = request.getParameter("type") == 'virtual';
viewModel["isCloud"] = isCloud;
viewModel["hostName"] = devicemgtProps["httpsURL"];
viewModel["accessToken"] = session.get("tokenPair");
if (isCloud) {
viewModel["enrollmentURL"] = "https://play.google.com/store/apps/details?id=org.wso2.iot.agent";
} else {

Loading…
Cancel
Save