Search code examples
azure-iot-hubazure-iot-sdk

Can I create an IoT Hub Device from browser?


Goal: Create an azure iot hub device from the browser (angular2) using node module azure-iot-hub.

Problem: azure-iot-common depends on a package, crypto , that won't work in browser.

Steps to Recreate:

import { Component, OnInit } from '@angular/core';
let iothub = require(‘azure-iothub’);

const connectionString = ‘HostName=<my-host>.azure-devices.net;SharedAccessKeyName=<my-key-name>;SharedAccessKey=<my-key>=’;

@Component({
  selector: 'acn-shop',
  template: `
<div class="al-main">
  <div class="al-content container-fluid">
    <h1>Azure IoT Hub Devices</h1>
  </div>
</div>`
})
export class ShopComponent implements OnInit {

  constructor() {
  }

  public ngOnInit() {
    this.connect();
  }

  public connect() {
    console.log('Calling connect()');
    const registry = iothub.Registry.fromConnectionString(connectionString);
  }
}

From Chrome Tools Console

Error: Uncaught (in promise): TypeError: crypto.createHmac is not a function
TypeError: crypto.createHmac is not a function
    at Object.hmacHash (authorization.js:36)
    at Function.create (shared_access_signature.js:67)
    at Object.create (shared_access_signature.js:15)
    at Function.fromConnectionString (registry.js:65)
    at ShopComponent.Array.concat.ShopComponent.connect (shop.component.ts:32)
   … (goes on for a bit) ...

Potential Solution: switch crypto to webcrypto - would require rewriting azure-iot-common/lib/authorization.js

Questions:

  1. Has anyone created a hub device from the browser using node module azure-iot-hub?
  2. Has anyone created a hub device from the browser using alternative methods?
  3. If no to Q1,2 - Does my potential solution seem feasible?

Solution

  • The azure-iothub node module is the service client SDK, which is for creating back-end applications that will be used to manage the IoT Hub instance, NOT for devices.

    On the devices side of things, you need to use the device client SDK module azure-iot-device. That said, this will still not work even if you solve the various dependencies issues such as the Crypto one you found as the IoT Hub service doesn't support CORS meaning it will not accept requests coming from web clients. CORS support for IoT Hub is in our backlog but not yet prioritized, so we don't have an ETA.

    What you can try to work around this limitation would be to run the device client node module in the back-end of the website, creating a new instance of a device client when a new webbrowser client connects to your site.