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

← Scan example using Javascript libraryLinks →