BleuIO

BleuIO

  • Back to Site
  • Buy Now
  • Manual
  • AT Commands
  • Help

›JS library

Manual

  • How it works
  • How to use
  • Verbose Mode
  • Known Issues
  • Firmware Updates
  • Release History
  • Troubleshooting

AT-Commands

  • List of AT Commands

Scripts & Tutorials

  • Python: iBeacon
  • Python: Eddystone Beacon
  • Python: Scan
  • Python: Scan and Store
  • Python: SPS Script
  • Python: File transfer Script
  • Python: Repeater Script
  • Javascript: Google chrome.serial Beacon
  • C# Console App Example
  • C# WFA Example

Script using libraries

    Python library

    • Eddystone example using Python library
    • IBeacon example using Python library
    • Scan example using Python library
    • Scan and store example using Python library
    • SPS example using Python library
    • Security Example using Python library

    JS library

    • Eddystone example using Javascript library
    • IBeacon example using Javascript library
    • Scan example using Javascript library
    • Security Example using Javascript library
    • Get Device Distance

STM32 Example

  • STM32 Example
  • Smart Bulb Example

Arduino Example

  • Arduino Example

Beaglebone Example

  • Beaglebone Example

Build Your Own Firmware

  • Build Your Own Firmware
  • Advertising Example

More

  • Links

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 libraryGet Device Distance →
  • Introduction
Docs
ManualAT CommandsHelp
Community
YouTubeLinkedInFacebook
More
BleuIOSmart Sensor DevicesGitHub
Copyright © 2022 BleuIO. A product of Smart Sensor Devices