Security Example using Javascript library
Introduction
In this tutorial, we're going to pair two BleuIO dongle securely using JS library script.
Connect two dongle into your computer.
One dongle will take on the Central role and the other will take on the Peripheral role and The example script will help pair two dongles using passkey or numeric comparison.
First create an Html file called index.html, where you can see the output.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
/>
<style>
#log {
background: #1d1d1d;
color: white;
padding: 20px;
font-family: "Courier New", Courier, monospace;
min-height: 500px;
line-height: 30px;
}
</style>
<title>BleuIO security example</title>
</head>
<body>
<br />
<br />
<br />
<div class="container">
<button id="connect" class="btn btn-success">Connect</button>
<button id="deviceinfo" class="btn btn-success">Device Info</button>
<form id="form" action="#">
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label"
>Select device type</label
>
<select
class="form-select"
id="deviceType"
aria-label="Default select example"
>
<option value="Central">Central</option>
</select>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label"
>Select Connect Option</label
>
<select
class="form-select"
id="connectionOption"
aria-label="Default select example"
>
<option value="1">Connect with passkey</option>
<option value="2">Connect with Numeric Comparison</option>
</select>
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Passkey </label>
<input
type="text"
class="form-control"
id="passkey"
aria-describedby="emailHelp"
placeholder="Leave blank if you want to connect with Numberic Comparison"
/>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label"
>peripheral dongles mac address</label
>
<input type="text" class="form-control" id="macaddress" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<br />
<br />
<div id="log"></div>
</div>
<br /><br />
<script src="./index.js"></script>
</body>
</html>
Now create a js file called index.js and paste the following code.
import * as my_dongle from "bleuio";
// connect to dongle using selected port
document.getElementById("connect").addEventListener("click", function () {
my_dongle.at_connect().then((d) => (div.innerHTML += d + "<br>"));
});
//check device info
document.getElementById("deviceinfo").addEventListener("click", function () {
my_dongle.ati().then((data) => (div.innerHTML += data + "<br>"));
});
const form = document.getElementById("form");
//handle form submit action
form.addEventListener("submit", logSubmit);
var div = document.getElementById("log");
//form submit method
function logSubmit(event) {
event.preventDefault();
//get passkey value from form
var passkey = document.getElementById("passkey").value;
//get macaddress value from form
var macaddress = document.getElementById("macaddress").value;
//how you want to connect. passkey or numeric comparison
var connectionOption = document.getElementById("connectionOption").value;
if (connectionOption == 1) {
//put the dongle to central
my_dongle.at_central().then((d) => {
console.log(d);
div.innerHTML += d + "<br>";
my_dongle.at_gapiocap(2).then((d) => {
console.log(d);
div.innerHTML += d + "<br>";
my_dongle.at_gapconnect(macaddress).then((d) => {
setTimeout(() => {
//wait for the peripheral dongle to ask for pass key and then send passkey from central.
my_dongle.at_enterpasskey(passkey).then((d) => {
console.log(d);
div.innerHTML += d + "<br>";
});
}, 2000);
console.log(d);
div.innerHTML += d + "<br>";
my_dongle.at_seclvl().then((d) => {
console.log(d);
div.innerHTML += d + "<br>";
});
});
});
});
}
if (connectionOption == 2) {
my_dongle.at_central().then(() => {
my_dongle.at_gapiocap(1).then(() => {
my_dongle.at_numcompa(0).then(() => {
my_dongle.at_gapconnect(macaddress).then((d) => {
setTimeout(() => {
//wait for the peripheral dongle to verify the numeric comparison
my_dongle.at_numcompa().then((d) => {
console.log(d);
div.innerHTML += d + "<br>";
});
}, 2000);
console.log(d);
div.innerHTML += d + "<br>";
my_dongle.at_seclvl().then((d) => {
console.log(d);
div.innerHTML += d + "<br>";
});
});
});
});
});
}
}
To run this script you need a web bundler. You can use perceljs. https://parceljs.org/getting_started.html Run parcel index.html
Full source also available on GitHub.
Follow this video for better understanind. https://youtu.be/uADKLqFk84o