ちゃんとく

Webブラウザからハードウェアにアクセス!WebUSB APIを使ってログイン認証を実装してみよう

近年「IoT」がバズワードとなっていますが、「WoT(Web of Things)」というワードを聞いたことがあるでしょうか?

「WoT」はごくごく簡単にいうと、既に普及しているHTMLやJavaScriptなどのWeb技術を使ってIoTの開発を標準化しよう、という考え方です。WebBluetooth APIやWebNFC APIなど、みなさんが慣れ親しんでいるWeb技術を使ってハードウェアを制御する方法も増えてきています。

今回は、WebページからPCに繋がれたUSBデバイスを制御することができる「WebUSB API」の概要とサンプルを紹介します。

HTMLと簡単なJavaScriptで試せる内容になっていますので、Webデザイナーやディレクターなどエンジニアではない方もぜひチャレンジしてみてください!

WebUSB APIとは

WebUSB APIはPCに接続された全てのUSBデバイスにウェブから直接アクセスすることができる技術です。USBデバイスの認識、読み出し、書き込みなどを行うことができます。 スクリーンショット 2017-12-13 18.23.13.png

Googleの2人のエンジニアによって開発され、2017年9月にはChromeブラウザ(Google Chrome 61)で正式に採用されました。

WebUSB APIを利用するとただちにユーザのUSBデバイス全てにアクセスできる、というわけではなく、ユーザがWebページとUSBデバイスの相互通信を明示的に許可することで開始されます。 スクリーンショット 2017-12-13 16.19.16.png

WebUSB APIのポリシーやセキュリティについては、Googleの開発者向けページで詳細に紹介されています。

Access USB Device on the Web(Google Developers)

WebUSB APIの活用シーン

WebUSB APIを活用することで、これまで事前にドライバやソフトウェアのインストールが必要だったUSBデバイスのセットアップが、サイトにアクセスして許可するだけで自動で行えるなどの連携が考えられそうです。

またデバイスの開発者サイドのメリットとしても、OSごとに異なっていたドライバ開発がJavaScript SDKを使ってクロスプラットフォームに構築できるそう。

webusb/arduinoなどの例を利用してArduinoなどのマイコンボードをWebから制御することも可能になりました。

詳細な仕様は開発者のドラフトを確認してみてください。

WebUSB API

本格利用はこれから

ただし、実際にWebUSB APIを導入するにはまだまだ課題がありそうです。

USBアクセスを求めるWebページを公開するために資格や証明が必要ということはなく、利用ユーザは「本当に信頼できるWebページか」ということを知る方法が今のところありません。

また開発者サイドも、USBデバイスの情報が新しくなったり変更されたりするたびにWebページを改修する必要がある可能性もあります。

利用には気をつけるべきポイントが多く、WebUSBはまだ開発中の段階と捉えたほうがよさそうです。安全面、実装面ともに改良され、より使いやすい機能となっていくことに期待ですね。

WebUSB APIを使ってログイン認証を実装してみよう

今回は「登録済みのUSBデバイスならログインする」というWebページを作ってみます。

https://gyazo.com/efdd078ea499c97f4b846c271cba0866

用意するもの

  • Chromeブラウザ
  • 任意のUSBデバイス(筆者はiPhone7)

手順1:Chromeのバージョンを確認する

はじめに、ChromeブラウザがWebUSB APIに対応したバージョンになっているか確認します。

Chromeのツールバーから[Google Chromeについて]を選択します。 スクリーンショット 2017-11-22 20.21.35.png

Chromeの情報ページが開くのでバージョンが62以上であることを確認します。 スクリーンショット 2017-11-22 20.23.10.png

基本的には自動でアップデートされているはずですが、万が一されていない場合は下記を参考にアップデートしましょう。

Google Chromeを更新する(Google Chrome ヘルプ)

手順2:ログインページを作る

WebUSB APIを設置するWebページを作ります。今回はコード共有サービス「CodePen」からログインフォームのソースコードを利用しました。

スクリーンショット 2017-11-26 18.11.58.png

Calm breeze login screen(CodePen)

[Export]からソースコードを取得しローカルに配置します。 スクリーンショット 2017-12-12 19.42.00.png

今回は「Username」「Password」は不要なので、index.htmlのフォーム部分から消去しておきます。

ログインのイベントを作成する

LoginボタンをクリックしたらWebUSB APIのイベントが発火するよう、Submitボタンを変更します。

auth()というfunctionを呼ぶようにし、記述用のJSファイルの呼び出しも追加しておきます。

ログイン成功時のイベント(デフォルトのJQuery)は名前つき関数にしておきます。

USBデバイスにアクセスして識別情報を取得する

認証に使用するデバイスを識別するために、[Vendor ID], [Product ID], [Serial Number]を調べてみます。

Macの方は[システム情報]->[USB]で確認できます。

Windowsの方はMicroSoftのusbviewなどを利用しましょう。 ※このシリアル番号は、iPhone自体のシリアル番号とは別です。

/jsフォルダの配下にwebusb.jsファイルを作成し、authfunctionを作成します。コード内には取得したVendor ID(製造元 ID)、Product ID(製品 ID)、Serial Number(シリアル番号)を追加します。

今回は簡易的にJSファイルに直接認証情報を書いています。

ログイン機能を試してみよう

登録したUSBデバイス(今回はiPhone)で試してみます。
https://gyazo.com/efdd078ea499c97f4b846c271cba0866 認証が成功しました。

登録していないiPhoneでも試してみます。
https://gyazo.com/c7af13bc72c09579ff6604ede333a825 認証に失敗しました。

これでUSBデバイスを識別することができました!

まとめ

今回はUSB接続したスマートフォンを利用しましたが、マウス、キーボード、フラッシュメモリなどUSBデバイスならどんなものでも利用可能です。

またWeb USB以外にも、WebBluetooth APIやWebNFC APIなどWeb技術を使ってハードウェアにアクセスする方法は増えています。ぜひこれからの開発に利用してみてください!

Powered byNTT Communications

tag list

アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Mozilla Node.js Polymer React Safari SkyWay TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket WebVR