はじめに

前回の記事で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(){}
    });
});