読者です 読者をやめる 読者になる 読者になる

Chrome Extension "Tip Monitor" にQRコードログイン機能を実装した

はじめに

前回の記事でChrome ExtensionのPopupにID入力フォームを実装しましたが、長いIDを手入力するのは大変なのでQRコードログイン機能を実装しました。

ID入力フォーム

前回作成したフォームです。

スクリーンショット 2016-01-05 21.43.07.png

QRコードログインの場合

入力フォームをやめてQRコードを表示させました。

スクリーンショット 2016-01-09 21.30.41.png

IndieSquare WalletアプリからQRコード読み込み

QRコードの読み込みは、IndieSquare Walletアプリの設定 > 連携(β版) から読み込みます。

ファイル 2016-01-09 21 36 00.png

QRコード作成部分の実装

Chrome Extension <-> Walletアプリ間はPubSubで連携しており、SubscribeはIndieSquareのライブラリを利用、QRコード生成はneocotic/qr.jsを利用しています。

angular.module('tip').controller('tipController', function ($scope) {
  var iw = new indiewallet();
    iw.api('signin', { 'cs': '' }, {
      success: function(data) {
        var backgroundPage = chrome.extension.getBackgroundPage();
        backgroundPage.saveIdentifier(data.id);
      },
      stay: function(url) {
        qr.canvas({
         canvas: document.getElementById('qr-code'),
         value: url,
         size: 8
       });
      },
      fail: function(){}
    });
});

publish_keyキーの隠し方

ソースコードgithubにあげてますが、publish_keysubscribe_keyは除いています。外部に知られてしまうと、意図しない使われ方をされる恐れがあるからです。(APIのシークレットキーなどと同じですね)

PubNubのドキュメントをみると認証済みユーザーだけにアクセスさせるべきなどと書かれています。つまり認証前の利用は非推奨ということ..? 詳細は今度調べてみます。

まとめ

QRコードでのログインは便利そうですが、キーの隠匿方法が難しそうなので実用的ではないのではと思ってきました。

参考

Make a Todo Chrome Extension with AngularJS

AngularJSのngRepeatを"ちゃんと"理解する.

neocotic/qr.js

Can I prevent abuse of my publish key?

How do I secure the subscription key?

Can I hide my application keys?

TipMe

TipMe with IndieSquare