Laravelでnpm installするのではなく、単独でSPAを作るときに使うときに便利そうです。

// これを入れる
npm install -g @vue/cli
npm install -g @vue/cli-service-global

// 設定を聞かれるがデフォルトでOK

// projectを作成する
vue create test_app

// serveで起動できる
cd test_app/
npm run serve

// コンパイルされてdistというディレクトリが作成されて、そこにコンパイルされたファイルが格納される
npm run build

// guiはこちら
vue ui

参考文献
Vue.js&Nuxt.js超入門
掌田津耶乃
出版社: 秀和システム (2019/02/05)

Vuetifyの v-list の要素を追加・読取・更新・削除するサンプルコードを書いてみました。
公式サンプルだけだと1か所に情報がまとまっていなかったので。

Vuetifyのバージョンは1.5系です。
2.0系で使う場合は、v-list-tile を v-list-item に変えれば動くかと思います。

See the Pen v-list example by shozzy (@shozzy) on CodePen.

内容

• 追加（Create）：タイトルバー右端の＋を押すと、リストの要素が1つ増えます。¹
• 読取（Read）　：各要素のボタン以外を押すと、その内容がalertで表示されます。²
• 更新（Update）：各要素の＋を押すと、内容の末尾に＋が付け足されていきます。³
• 削除（Delete）：各要素のごみ箱アイコンを押すと、その要素が削除されます。

あわせて、インデックスつきのv-forや、各要素をv-dividerで区切る方法のサンプルも入っています。

コード

ここにもコードを貼っておきます。
（CodePen用のHTMLとJavaScriptです。Vue.jsの単一ファイルコンポーネントにはなっていません。）

HTML

<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center">
      <v-layout row>
        <v-flex xs12 sm6 offset-sm3>
          <v-card>

            <v-toolbar color="light-blue" dark>
              <v-toolbar-title>
                sample
              </v-toolbar-title>
              <v-spacer></v-spacer>
              <v-btn icon>
                <v-icon @click="createItem()">playlist_add</v-icon>
              </v-btn>
            </v-toolbar>

            <v-list>
              <template  v-for="(item, index) in items">
                <v-list-tile     
                  :key="index"
                  @click="showAlert(readItem(index))"
                >
                  <v-list-tile-content>
                    <v-list-tile-title>
                      {{ item.title }}
                    </v-list-tile-title>
                  </v-list-tile-content>

                  <v-list-tile-action>
                    <v-btn icon>
                      <v-icon @click.stop="updateItem(index)">
                        add
                      </v-icon>
                    </v-btn>
                  </v-list-tile-action>

                  <v-list-tile-action>
                    <v-btn icon>
                      <v-icon @click.stop="deleteItem(index)">
                        delete
                      </v-icon>
                    </v-btn>
                  </v-list-tile-action>

                </v-list-tile>
                <v-divider
                  v-if="index + 1 < items.length" 
                  :key="`divider-${index}`"
                >
                </v-divider>
              </template>
            </v-list>

          </v-card>
        </v-flex>
      </v-layout>
    </div>
  </v-app>
</div>

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      items: [
        {title: "title1", value: "value1", detail: "detail1"},
        {title: "title2", value: "value2", detail: "detail2"},
        {title: "title3", value: "value3", detail: "detail3"}
      ]
    }
  },
  methods: {
    createItem(){
      title  = "title"  + (this.items.length+1)
      value  = "value"  + (this.items.length+1)
      detail = "detail" + (this.items.length+1)
      this.items.push({title: title, value: value, detail: detail})
    },
    readItem(index){
      return JSON.stringify(this.items[index])
    },
    updateItem(index){
      item = this.items[index]
      item.title  = item.title  + "+"
      item.value  = item.value  + "+"
      item.detail = item.detail + "+"
    },
    deleteItem(index){
      this.items.splice(index, 1)      
    },
    showAlert(message){
      alert(message)
    }
  }
})

---

1. 追加できることだけを示したいので、内容は適当です。itemsの要素数＋1の数字を末尾に追加した固定文字列を、title、value、detailの3項目にセットするだけになっています。 ↩

2. v-dialogなどを使ってきれいに表示すると良さそうですが、サンプルが長くなるのでやめました。 ↩

3. こちらもReadと組み合わせて、v-dialogで内容を編集できたりすると良さそうです。 ↩

Promiseの排他制御をしてくれるライブラリにasync-lockあります。

で、このライブラリには、ロックしているPromiseの実行が一定時間以上立った場合に Error を投げてくれるTimeoutというオプションがあるのですが、こいつはTimeOutになってもエラーを投げるだけでロックを解除してはくれません。

なので、一定時間経過後に問答無用でロックを解除したい場合は、自分でロックを解除するコードを書かないといけないです。

まあ、処理が長過ぎるときのエラーハンドリングは、内部で実行されているPromise関数が頑張れと言うことなのかもしれませんが、、それってTimeoutの意味なくない？ってなったので自作しました。（といっても本家のライブラリをラップしただけですが・・・）

TypeScriptで書いちゃってますが、型定義部分削ればJavaScriptでも使えると思います。

コード

実行にはasync-lockが必要なので事前にインストールしてください

$ npm install async-lock
$ npm install --save-dev  @types/async-lock

作成したラッパークラスは以下です

import AsyncLock from 'async-lock'

export class PromiseLock {

    asyncLock: AsyncLock
    constructor(option?: AsyncLockOptions) {
        this.asyncLock = new AsyncLock(option)
    }

    acquire(func: Function, options: AquireOptions = {}) {

        let { resolveTimeout, key } = options
        if (!key) {
            key = '__DEFAULT_KEY__'
        }

        return this.asyncLock.acquire(key, () => {
            return new Promise(async resolve => {
                let isResolved = false
                if (resolveTimeout) {
                    setTimeout(() => {
                        if (!isResolved) {
                            console.error(`${resolveTimeout} ms passed. over resolveTimeout. unlock promiseLock`)
                            resolve()
                        }
                    }, resolveTimeout)
                }
                await func()
                resolve()
                isResolved = true
            })
        })
    }

    isBusy(key = '__DEFAULT_KEY__') {
        return this.asyncLock.isBusy(key)
    }
}

interface AsyncLockOptions {
    timeout?: number;
    maxPending?: number;
    domainReentrant?: boolean;
    Promise?: any;
}

interface AquireOptions {
    resolveTimeout?: number
    key?: string | string[]
}

使い方

使い方は以下のような感じです。だいたい本家と一緒ですが、不要ならkeyとか指定しなくても良くなってます。

    const promiseLock = new PromiseLock()

    const asyncHandler = () => { 
        // promiseLock.acquireの第一引数に指定した関数の実行が終わるまでロックする
        promiseLock.acquire(async () => {
            console.log('start')
            await Promise処理()
            console.log('finish')
        })
    }

第2引数にresolveTimeoutを指定することで、指定した時間経過後に強制的にロックを解除することができます。
本家と違ってErrorもスローしません。(console.error()は吐きますが・・・)

        promiseLock.acquire(async () => {
            console.log('start')
            await Promise処理()
            console.log('finish')
        }, { resolveTimeout: 2000 }) // 2秒以上処理が終わらない場合は強制的にロックを解除する

一応キーも指定することができます。

        promiseLock.acquire(async () => {
            console.log('start')
            await Promise処理()
            console.log('finish')
        },{ key: 'original_key' })

isBusy()も使えます。これは、acquireの中の関数が実行中であればtrueを返す関数です。特にresolveTimeoutと組み合わせると、「処理が終わるまでは次の呼び出しを実行しないようにし、処理に時間がかかりすぎる場合はロックを解除する」みたいな動きができるので、ゲームのスクロール処理とか、「時間経過で処理を行いたいけど、遅延して実行するぐらいなら処理落ちしたほうが良い」みたいな時に結構使えます。

    const handler = () => {
        // acquireの処理中は次の処理を受け付けない
        if (promiseLock.isBusy()) {
            console.log('handler is busy. skip exec function')
            return
        }

        promiseLock.acquire(async () => {
            console.log('start')
            await Promise処理()
            console.log('finish')
        }, { resolveTimeout: 2000 }) // 2秒以上処理が遅延する場合には、強制的にロックを解除し、次の処理を実行する
    }

本家のoptionを使いたい場合は、newする時に指定することもできます。(ただここで指定できるtimeoutは本家のエラーを吐くだけのtimeoutなので気をつけてください)

    const promiseLock = new PromiseLock({ maxPenging: 100 })

以上

Googleから最近になって、FIDO認証デバイスの「Titanセキュリティーキー」が発売されたので、購入しました。

[Google Titanセキュリティーキー］
　https://store.google.com/jp/product/titan_security_key_kit

今のところ、はやっていそうですし、せっかくなのでこれを使って遊んでいきたいと思います。

Titanセキュリティーキーがあれば、Webサーバから見てユーザID/パスワードで認証するのではなく、Titanセキュリティーキーのデバイスを認証してくれます。公開鍵をベースとしているそうです。
また、Titanセキュリティーキーには、USBに加えて、NFCとBLEの接続方法があるので、直接PCに挿さなくとも、デバイス認証してくれます。

ということで、今回は、王道のFIDOサーバを立ち上げます。

FIDOの全体像を知る

以下のサイトの記事が非常に参考になりました。
　https://techblog.yahoo.co.jp/advent-calendar-2018/webauthn/

それから、以下のチュートリアルも非常に参考になりました。
　https://github.com/fido-alliance/webauthn-demo

頭が混乱してきたら、以下のページで再整理しましょう。
　Web Authentication API の裏側と、なぜそうなっているのかを図解した

サーバ側に必要なエンドポイントを知る

サーバ側に必要なエンドポイントは以下の4つです。

• POST /attestation/options
• POST /attestation/result
• POST /assertion/options
• POST /assertion/result

(参考)
　https://fidoalliance.org/specs/fido-v2.0-rd-20180702/fido-server-v2.0-rd-20180702.html

詳細はよくわからないのですが、以下のnpmモジュールを使わせてもらうことで、実装量をかなり省けました。(ありがとうございます！)

fido2-lib
　https://github.com/apowers313/fido2-lib

エンドポイントに対応する関数が定義されていますので、それを呼び出せるように、エンドポイントへの入力パラメータを整理して呼び出します。
対応関係は以下の通りです。

• /attestation/options → f2l.attestationOptions()
• /attestation/result → f2l.attestationResult()
• /assertion/options → f2l.assertionOptions()
• /assertion/result → f2l.assertionResult()

ここで一つややこしいことがありまして、クライアントサーバ間のバイナリデータの受け渡しは、BASE64URLというエンコードするのが通例のようでして、エンドポイントからの入力と関数呼び出しの間、関数戻りからエンドポイントからの出力の間のそれぞれで、エンコード/デコードする必要があります。

さらにややこしいのが、一部fido2-libがエンコード/デコードを処理してなさそうに見えて、一部処理していたりで、ちょっと混乱しました。
後で示しますが、(頑張って理解しようとしたのですが)不具合と思われる個所を修正して、やっと動かすことができました。

BASE64URLとは、Base64エンコードに対して、Webで扱いやすいように、「+」を「-」に、「/」を「_」に置き換えたもののようです。
以下のnpmモジュールを使わせていただきました。

base64url
　https://github.com/brianloveswords/base64url

ユーザIDとデバイスの紐づけ

サーバ側から見てデバイスを認証できますが、そのデバイスの持ち主がどのユーザIDの人なのかはわからないので、紐づけが必要となります。
ですので、通常は、ユーザID/パスワードで認証したのち、デバイスで生成した公開鍵をユーザIDに紐づけます。こうすることで、デバイスを認証したこと＝ユーザIDのユーザがログインした、ということになります。
一般に、/attestation/options のところで本人認証をしてから、デバイスの登録処理を進めるのですが、今回のデモサーバでは、ユーザID/パスワードの認証は省略しています。

Client側の呼び出し関数

Client側は、ブラウザを使いました。
かなり実装が進んでいるようで、やはりChromeは対応していました。

以下の2つの関数を呼び出します。
・navigator.credentials.create()
・navigator.credentials.get()

まとめると、以下の順番になります。

[デバイスの登録]
・POST /attestation/options
・navigator.credentials.create()
・POST /attestation/result

[デバイスでログイン]
・POST /assertion/options
・navigator.credentials.get()
・POST /assertion/result

ちょっと補足します。

・POST /attestation/options
デバイスに紐づけたいユーザ名を知らせます。本来であれば、パスワードや認証後のセッションを渡して、ユーザ本人であることを示すのが正しいですが、省略しています。
レスポンスとして、チャレンジが返ってきます。

・navigator.credentials.create()
デバイス内部で、公開鍵ペアを生成し、チャレンジに対して署名を付与します。
レスポンスとして、公開鍵値、署名値、公開鍵を識別するIDが返ってきます。

・POST /attestation/result
デバイスから取得したレスポンスをサーバに登録します。
サーバでは、署名検証し、公開鍵・公開鍵を識別するID(credId)などを、ユーザ名に紐づけて保持することで登録完了です。

・POST /assertion/options
ユーザ名を入力とし、サーバに保持しているユーザ名を検索します。
そして、ユーザ名に紐づけたcredIdを取り出し、またチャレンジを生成して、クライアントに返します。複数のデバイスが紐づけられている可能性もあるので、credIdは複数の場合があります。

・navigator.credentials.get()
デバイスに署名生成を要求します。生成に使う公開鍵は、サーバから取得したcredIdで指定します。
レスポンスとして署名に使った公開鍵のIDと署名値が返ってきます。

・POST /assertion/result
署名に使った公開鍵のIDでcredIdを特定し、署名を検証します。

上記以外にも、細かいチェック処理が入っています。

ソースコード

ソースコード量が多いので、GitHubに上げておきました。
　https://github.com/poruruba/fido_server

まずはサーバ部分です。

index.js

'use strict';

const HELPER_BASE = process.env.HELPER_BASE || '../../helpers/';
const Response = require(HELPER_BASE + 'response');
const Redirect = require(HELPER_BASE + 'redirect');

const base64url = require('base64url');
const crypto    = require('crypto');
const { Fido2Lib } = require("fido2-lib");

const FIDO_RP_NAME = process.env.FIDO_RP_NAME || "Sample FIDO Host";
const FIDO_ORIGIN = process.env.FIDO_ORIGIN || "https://localhost";

var f2l = new Fido2Lib({
  rpName: FIDO_RP_NAME
});

let database = {};

exports.handler = async (event, context, callback) => {
  if( event.path == '/assertion/options'){
    var body = JSON.parse(event.body);
    console.log(body);

    let username = body.username;

    if(database[username] && !database[username].registered) {
      return new Response({
        'status': 'failed',
        'message': `Username ${username} does not exist`
      });
    }

    var authnOptions = await f2l.assertionOptions();
    authnOptions.challenge = base64url.encode(authnOptions.challenge);

    let allowCredentials = [];
    for(let authr of database[username].attestation) {
        allowCredentials.push({
          type: 'public-key',
          id: authr.credId,
          transports: ['usb', 'nfc', 'ble']
        })
    }
    authnOptions.allowCredentials = allowCredentials;
    console.log(authnOptions);

    context.req.session.challenge = authnOptions.challenge;
    context.req.session.username  = username;

    authnOptions.status = 'ok';

    return new Response(authnOptions);
  }else
  if( event.path == '/assertion/result'){
    var body = JSON.parse(event.body);
    console.log(body);

    var attestation = null;
    for( var i = 0 ; i < database[context.req.session.username].attestation.length ; i++ ){
      if( database[context.req.session.username].attestation[i].credId == body.id ){
        attestation = database[context.req.session.username].attestation[i];
        break;
      }
    }
    if( !attestation ){
      return new Response({
        'status': 'failed',
        'message': 'key is not found.'
      });
    }

    var assertionExpectations = {
      challenge: context.req.session.challenge,
      origin: FIDO_ORIGIN,
      factor: "either",
      publicKey: attestation.publickey,
      prevCounter: attestation.counter,
      userHandle: null
    };

    body.rawId = new Uint8Array(base64url.toBuffer(body.rawId)).buffer;
    var authnResult = await f2l.assertionResult(body, assertionExpectations);
    console.log(authnResult);

    if(authnResult.audit.complete) {
      attestation.counter = authnResult.authnrData.get('counter');

      return new Response({
        'status': 'ok',
        credId: body.id,
        counter: attestation.counter
      });
    } else {
      return new Response({
        'status': 'failed',
        'message': 'Can not authenticate signature!'
      });
    }
  }else
  if( event.path == '/attestation/options'){
    var body = JSON.parse(event.body);
    console.log(body);

    let username = body.username;

    if(database[username] && database[username].registered) {
      return new Response({
          'status': 'failed',
          'message': `Username ${username} already exists`
      });
    }

    var id = randomBase64URLBuffer();

    var registrationOptions = await f2l.attestationOptions();
    registrationOptions.challenge = base64url.encode(registrationOptions.challenge);
    registrationOptions.user.id = id;
    registrationOptions.user.name = username;
    registrationOptions.user.displayName = username;
    console.log(registrationOptions);

    database[username] = {
      'name': username,
      'registered': false,
      'id': id,
      'attestation': []
    };

    context.req.session.challenge = registrationOptions.challenge;
    context.req.session.username = username;

    registrationOptions.status = 'ok';

    return new Response(registrationOptions);
  }else
  if( event.path == '/attestation/result'){
    var body = JSON.parse(event.body);
    console.log(body);

    var attestationExpectations = {
        challenge: context.req.session.challenge,
        origin: FIDO_ORIGIN,
        factor: "either"
    };
    body.rawId = new Uint8Array(base64url.toBuffer(body.rawId)).buffer;
    var regResult = await f2l.attestationResult(body, attestationExpectations);
    console.log(regResult);

    var credId = base64url.encode(regResult.authnrData.get('credId'));
    var counter = regResult.authnrData.get('counter');
    database[context.req.session.username].attestation.push({ 
        publickey : regResult.authnrData.get('credentialPublicKeyPem'),
        counter : counter,
        fmt: regResult.authnrData.get('fmt'),
        credId : credId
    });

    if(regResult.audit.complete) {
      database[context.req.session.username].registered = true

      return new Response({
        'status': 'ok',
        credId: credId,
        counter: counter
      });
    } else {
      return new Response({
        'status': 'failed',
        'message': 'Can not authenticate signature!'
      });
    }
  }
};

function randomBase64URLBuffer(len){
  len = len || 32;

  let buff = crypto.randomBytes(len);

  return base64url(buff);
}

以下の部分は、環境に合わせて、変更してください。
・process.env.FIDO_RP_NAME
・process.env.FIDO_ORIGIN

次は、クライアント側ソースです。
HTMLは以下の通りです。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; style-src * 'unsafe-inline'; media-src *; img-src * data: content: blob:;">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <title>FIDO Demo Server</title>

  <script src="js/methods_utils.js"></script>
  <script src="js/vue_utils.js"></script>

  <script src="dist/js/vconsole.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="top" class="container">
        <h1>FIDO Demo Server</h1>

        <div class="alert alert-info" role="alert">{{message}}</div>

        <div class="form-inline">
            <label>username</label> <input type="text" class="form-control" v-model="username">
        </div>
        <button class="btn btn-default" v-on:click="start_register()">登録開始</button>

        <div v-if="attestation != null">
            <label>rp.name</label> {{attestation.rp.name}}<br>
            <label>user.displayName</label> {{attestation.user.displayName}}<br>
            <label>user.id</label> {{attestation_encode.user.id}}<br>
            <label>challenge</label> {{attestation_encode.challenge}}<br>
            <label>attestation</label> {{attestation.attestation}}<br>

            <button class="btn btn-default" v-on:click="do_register()">登録実行</button>
        </div>
        <div>
            <div v-if="registered">
                <label>credId</label> {{register_credId}}<br>
                <label>counter</label> {{register_counter}}<br>
            </div>

            <button class="btn btn-default" v-on:click="start_login()">ログイン開始</button>
        </div>
        <div v-if="assertion != null">
            <div v-for="(cred, index) of assertion_encode.allowCredentials">
                <label>cred.id[{{index}}]</label> {{cred.id}}<br>
            </div>
            <label>challenge</label> {{assertion_encode.challenge}}<br>

            <button class="btn btn-default" v-on:click="do_login()">ログイン実行</button>
        </div>
        <div v-if="logined">
            <label>credId</label> {{login_credId}}<br>
            <label>counter</label> {{login_counter}}<br>
        </div>

        <div class="modal fade" id="progress">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">{{progress_title}}</h4>
                    </div>
                    <div class="modal-body">
                        <center><progress max="100" /></center>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="dist/js/base64url-arraybuffer.js"></script>
    <script src="js/start.js"></script>
</body>

Javascript部分です。

start.js

'use strict';

//var vConsole = new VConsole();

const base_url = "【サーバのURL】";

var vue_options = {
    el: "#top",
    data: {
        progress_title: '',

        message: "",
        username: 'test',
        attestation : null,
        attestation_encode: {
            user: {}
        },
        register_credId: null,
        register_counter: -1,
        registered : false,
        assertion : null,
        assertion_encode: {
            allowCredentials: []
        },
        login_credId: null,
        login_counter: -1,
        logined : false
    },
    computed: {
    },
    methods: {
        start_register: function(){
            this.registered = false;
            var param = {
                username: this.username,
                userVerification: true
            };
            this.progress_open();
            do_post( base_url + '/attestation/options', param )
            .then(json =>{
                this.progress_close();
                console.log(json);
                if( json.status != 'ok'){
                    alert(json.message);
                    return;
                }

                this.attestation_encode.challenge = json.challenge;
                this.attestation_encode.user.id = json.user.id;

                json.challenge = base64url.decode(json.challenge);
                json.user.id = base64url.decode(json.user.id);

                this.attestation = json;
                this.message = '登録の準備ができました。';
            })
            .catch(error =>{
                this.progress_close();
                alert(error);
            });
        },
        do_register: function(){
            return navigator.credentials.create({ publicKey: this.attestation })
            .then(response =>{
                var result = publicKeyCredentialToJSON(response);

                this.progress_open();
                return do_post(base_url + '/attestation/result', result )
            })
            .then((response) => {
                this.progress_close();
                if(response.status !== 'ok'){
                    alert(json.message);
                    return;
                }

                if( response.status == 'ok'){
                    this.register_credId = response.credId;
                    this.register_counter = response.counter;
                    this.registered = true;
                    this.message = '登録が完了しました。';
                }else{
                    throw 'registration error';
                }
            })
            .catch(error =>{
                this.progress_close();
                alert(error);
            });
        },
        start_login: function(){
            this.logined = false;
            var param = {
                username: this.username,
            };

            this.progress_open();
            do_post( base_url + '/assertion/options', param )
            .then(json =>{
                this.progress_close();
                console.log(json);
                if( json.status != 'ok'){
                    alert(json.message);
                    return;
                }

                this.assertion_encode.challenge = json.challenge;
                json.challenge = base64url.decode(json.challenge);

                for(var i = 0 ; i < json.allowCredentials.length ; i++ ) {
                    this.assertion_encode.allowCredentials[i] = { id: json.allowCredentials[i].id };
                    json.allowCredentials[i].id = base64url.decode(json.allowCredentials[i].id);
                }

                this.assertion = json;
                this.message = 'ログインの準備ができました。';
            })
            .catch(error =>{
                this.progress_close();
                alert(error);
            });
        },
        do_login: function(){
            console.log(this.assertion);
            return navigator.credentials.get({ publicKey: this.assertion })
            .then(response =>{
                var result = publicKeyCredentialToJSON(response);

                this.progress_open();
                return do_post(base_url + '/assertion/result', result )
            })
            .then((response) => {
                this.progress_close();
                if(response.status !== 'ok')
                    throw new Error(`Server responed with error. The message is: ${response.message}`);

                console.log('sendWebAuthnResponse received: ', response);

                if( response.status == 'ok'){
                    this.login_credId = response.credId;
                    this.login_counter = response.counter;
                    this.logined = true;
                    this.message = 'ログインが成功しました。';
                }else{
                    throw 'login error';
                }
            })
            .catch(error =>{
                this.progress_close();
                alert(error);
            });
        }
    },
    created: function(){
    },
    mounted: function(){
        proc_load();
    }
};
vue_add_methods(vue_options, methods_utils);
var vue = new Vue( vue_options );

function do_post(url, body){
//    const headers = new Headers( { "Content-Type" : "application/json; charset=utf-8" } );
    const headers = new Headers( { "Content-Type" : "application/json" } );

    return fetch(url, {
        method : 'POST',
        credentials: 'include',
        body : JSON.stringify(body),
        headers: headers
    })
    .then((response) => {
        if( !response.ok )
            throw 'status is not 200.';
        return response.json();
    });
}

function publicKeyCredentialToJSON(pubKeyCred){
    if(pubKeyCred instanceof Array) {
        let arr = [];
        for(let i of pubKeyCred)
            arr.push(publicKeyCredentialToJSON(i));

        return arr
    }

    if(pubKeyCred instanceof ArrayBuffer) {
        return base64url.encode(pubKeyCred)
    }

    if(pubKeyCred instanceof Object) {
        let obj = {};

        for (let key in pubKeyCred) {
            obj[key] = publicKeyCredentialToJSON(pubKeyCred[key]);
        }

        return obj
    }

    return pubKeyCred
}

以下の部分は、環境に合わせて書き換えてください。
・【サーバのURL】

fido2-lib の修正

下記に示すように、fido2-libの実装をいじらないとうまく動きませんでした。

lib/validator.js

// 172行目あたり
// 変更前
    if (typeof req.response.userHandle !== "string" &&
        !(req.response.userHandle instanceof ArrayBuffer) &&
        req.response.userHandle != null &&
        req.response.userHandle !== undefined) {
        throw new TypeError("expected 'response.userHandle' to be base64 String, ArrayBuffer, or undefined");
    }

// 変更後
    if (typeof req.response.userHandle !== "string" &&
        !(req.response.userHandle instanceof ArrayBuffer) &&
// modified by poruruba
        req.response.userHandle != null &&
        req.response.userHandle !== undefined) {
        throw new TypeError("expected 'response.userHandle' to be base64 String, ArrayBuffer, or undefined");
    }

lib/utils.js

// 183行目あたり
// 変更前
function bufEqual(a, b) {
    var len = a.length;

    if (len !== b.length) {
        return false;
    }

    for (var i = 0; i < len; i++) {
        if (a.readUInt8(i) !== b.readUInt8(i)) {
            return false;
        }
    }

    return true;
}

// 変更後
function bufEqual(a, b) {
// modified by poruruba
    if (!(a instanceof ArrayBuffer && b instanceof ArrayBuffer)) {
        throw new Error("expected bufEqual to be of type ArrayBuffer");
    }

    var len = a.byteLength;

    if (len !== b.byteLength) {
        return false;
    }

    for (var i = 0; i < len; i++) {
        if (a[i] !== b[i]) {
            return false;
        }
    }

    return true;
}

lib/parser.js

// 249行目あたり
// 変更前
    let userHandle;
    if (msg.response.userHandle !== undefined) {
        userHandle = coerceToArrayBuffer(msg.response.userHandle, "response.userHandle");
        if (userHandle.byteLength === 0) {
            userHandle = undefined;
        }
    }

    let sigAb = coerceToArrayBuffer(msg.response.signature, "response.signature");
    let ret = new Map([
        ["sig", sigAb],
        ["userHandle", userHandle],
        ["rawAuthnrData", msg.response.authenticatorData],
        ...parseAuthenticatorData(msg.response.authenticatorData)
    ]);

// 変更後
    let userHandle;
// modified by poruruba
//    if (msg.response.userHandle !== undefined) {
    if (msg.response.userHandle !== undefined && msg.response.userHandle !== null) {
        userHandle = coerceToArrayBuffer(msg.response.userHandle, "response.userHandle");
        if (userHandle.byteLength === 0) {
            userHandle = undefined;
        }
    }

    let sigAb = coerceToArrayBuffer(msg.response.signature, "response.signature");
    let ret = new Map([
        ["sig", sigAb],
        ["userHandle", userHandle],
// modified by poruruba
//        ["rawAuthnrData", msg.response.authenticatorData],
        ["rawAuthnrData", coerceToArrayBuffer(msg.response.authenticatorData, "authnrDataArrayBuffer")],
        ...parseAuthenticatorData(msg.response.authenticatorData)
    ]);

動作確認

Windows10のChromeブラウザで実施してみました。
以下は、TitanセキュリティキーをUSB端子に挿した場合です。

index.htmlを開きます。

usernameに適当なユーザ名を入力して、「登録開始」ボタンを押下します。

以下が表示されます。
Titanセキュリティキーも表面の金属のところを指で触ります。

以下が表示されますので、「許可」ボタンを押下して進めます。

これで登録完了です。

さあログインしましょう。
「ログイン開始」ボタンを押下すると、以下のようになります。

そして、「ログイン実行」ボタンを押下します。
登録時と同様に、Titanセキュリティキーも表面の金属のところを指で触ります。

以下のように表示されて、ログイン完了です。

Androidでもやってみます。
こちらはBLEでやってみました。

事前に、BLEデバイスとしてペアリングしておく必要があるようです。
ペアリングは、デバイスのボタンを5秒間長押しするとペアリングが開始されます。

それでは、始めましょう。AndroidのChromeからindnex.htmlを開きます。

「登録開始」ボタンを押下します。

「登録実行」ボタンを押下します。

デバイスにあるボタンを押します。

登録完了です。

次はログインです。
「ログイン開始」ボタンを押下すると以下の画面になります。

「ログイン実行」ボタンを押下します。

デバイスにあるボタンを押します。

ログインできました！

制限事項

・WindowsでBLEを使って認証しようとしましたが、うまくいきませんでした。原因不明です。

以上

Googleから最近になって、FIDO認証デバイスの「Titanセキュリティーキー」が発売されたので、購入しました。

[Google Titanセキュリティーキー］
　https://store.google.com/jp/product/titan_security_key_kit

今のところ、はやっていそうですし、せっかくなのでこれを使って遊んでいきたいと思います。

Titanセキュリティーキーがあれば、Webサーバから見てユーザID/パスワードで認証するのではなく、Titanセキュリティーキーのデバイスを認証してくれます。公開鍵をベースとしているそうです。
また、Titanセキュリティーキーには、USBに加えて、NFCとBLEの接続方法があるので、直接PCに挿さなくとも、デバイス認証してくれます。

ということで、今回は、王道のFIDOサーバを立ち上げます。

FIDOの全体像を知る

以下のサイトの記事が非常に参考になりました。
　https://techblog.yahoo.co.jp/advent-calendar-2018/webauthn/

それから、以下のチュートリアルも非常に参考になりました。
　https://github.com/fido-alliance/webauthn-demo

これがWebAuthn
　https://w3c.github.io/webauthn/

頭が混乱してきたら、以下のページで再整理しましょう。
　Web Authentication API の裏側と、なぜそうなっているのかを図解した

サーバ側に必要なエンドポイントを知る

サーバ側に必要なエンドポイントは以下の4つです。

• POST /attestation/options
• POST /attestation/result
• POST /assertion/options
• POST /assertion/result

(参考) ただし、一部未対応。
　https://fidoalliance.org/specs/fido-v2.0-rd-20180702/fido-server-v2.0-rd-20180702.html

詳細はよくわからないのですが、以下のnpmモジュールを使わせてもらうことで、実装量をかなり省けました。(ありがとうございます！)

fido2-lib
　https://github.com/apowers313/fido2-lib

エンドポイントに対応する関数が定義されていますので、それを呼び出せるように、エンドポイントへの入力パラメータを整理して呼び出します。
対応関係は以下の通りです。

• /attestation/options → f2l.attestationOptions()
• /attestation/result → f2l.attestationResult()
• /assertion/options → f2l.assertionOptions()
• /assertion/result → f2l.assertionResult()

ここで一つややこしいことがありまして、クライアントサーバ間のバイナリデータの受け渡しは、BASE64URLでエンコードするのが通例のようでして、エンドポイントからの入力と関数呼び出しの間、関数戻りからエンドポイントからの出力の間のそれぞれで、エンコード/デコードする必要があります。

さらにややこしいのが、一部fido2-libがエンコード/デコードを処理してなさそうに見えて、一部処理していたりで、ちょっと混乱しました。
後で示しますが、(頑張って理解しようとしたのですが)不具合と思われる個所を修正して、やっと動かすことができました。

BASE64URLとは、Base64エンコードに対して、Webで扱いやすいように、「+」を「-」に、「/」を「_」に置き換えたもののようです。
以下のnpmモジュールを使わせていただきました。

base64url
　https://github.com/brianloveswords/base64url

ユーザIDとデバイスの紐づけ

サーバ側から見てデバイスを認証できますが、そのデバイスの持ち主がどのユーザIDの人なのかはわからないので、紐づけが必要となります。
ですので、通常は、ユーザID/パスワードで認証したのち、デバイスで生成した公開鍵をユーザIDに紐づけます。こうすることで、デバイスを認証したこと＝ユーザIDのユーザがログインした、ということになります。
一般に、/attestation/options のところで本人認証をしてから、デバイスの登録処理を進めるのですが、今回のデモサーバでは、ユーザID/パスワードの認証は省略しています。

クライアント側の呼び出し関数

Client側は、ブラウザを使いました。
かなり実装が進んでいるようで、やはりChromeは対応していました。

以下の2つの関数を呼び出します。
・navigator.credentials.create()
・navigator.credentials.get()

まとめると、以下の順番になります。

[デバイスの登録]
・POST /attestation/options
・navigator.credentials.create()
・POST /attestation/result

[デバイスでログイン]
・POST /assertion/options
・navigator.credentials.get()
・POST /assertion/result

ちょっと補足します。

・POST /attestation/options
デバイスに紐づけたいユーザ名を知らせます。本来であれば、パスワードや認証後のセッションを渡して、ユーザ本人であることを示すのが正しいですが、省略しています。
レスポンスとして、チャレンジが返ってきます。

・navigator.credentials.create()
デバイス内部で、公開鍵ペアを生成し、チャレンジに対して署名を付与します。
レスポンスとして、公開鍵値、署名値、公開鍵を識別するIDが返ってきます。

・POST /attestation/result
デバイスから取得したレスポンスをサーバに登録します。
サーバでは、署名検証し、公開鍵・公開鍵を識別するID(credId)などを、ユーザ名に紐づけて保持することで登録完了です。

・POST /assertion/options
ユーザ名を入力とし、サーバに保持しているユーザ名を検索します。
そして、ユーザ名に紐づけたcredIdを取り出し、またチャレンジを生成して、クライアントに返します。複数のデバイスが紐づけられている可能性もあるので、credIdは複数の場合があります。

・navigator.credentials.get()
デバイスに署名生成を要求します。生成に使う公開鍵は、サーバから取得したcredIdで指定します。
レスポンスとして署名に使った公開鍵のIDと署名値が返ってきます。

・POST /assertion/result
署名に使った公開鍵のIDでcredIdを特定し、署名を検証します。

上記以外にも、細かいチェック処理が入っています。

ソースコード

ソースコード量が多いので、GitHubに上げておきました。
　https://github.com/poruruba/fido_server

まずはサーバ部分です。

index.js

'use strict';

const HELPER_BASE = process.env.HELPER_BASE || '../../helpers/';
const Response = require(HELPER_BASE + 'response');
const Redirect = require(HELPER_BASE + 'redirect');

const base64url = require('base64url');
const crypto    = require('crypto');
const { Fido2Lib } = require("fido2-lib");

const FIDO_RP_NAME = process.env.FIDO_RP_NAME || "Sample FIDO Host";
const FIDO_ORIGIN = process.env.FIDO_ORIGIN || "https://localhost";

var f2l = new Fido2Lib({
  rpName: FIDO_RP_NAME
});

let database = {};

exports.handler = async (event, context, callback) => {
  if( event.path == '/assertion/options'){
    var body = JSON.parse(event.body);
    console.log(body);

    let username = body.username;

    if(database[username] && !database[username].registered) {
      return new Response({
        'status': 'failed',
        'message': `Username ${username} does not exist`
      });
    }

    var authnOptions = await f2l.assertionOptions();
    authnOptions.challenge = base64url.encode(authnOptions.challenge);

    let allowCredentials = [];
    for(let authr of database[username].attestation) {
        allowCredentials.push({
          type: 'public-key',
          id: authr.credId,
          transports: ['usb', 'nfc', 'ble']
        })
    }
    authnOptions.allowCredentials = allowCredentials;
    console.log(authnOptions);

    context.req.session.challenge = authnOptions.challenge;
    context.req.session.username  = username;

    authnOptions.status = 'ok';

    return new Response(authnOptions);
  }else
  if( event.path == '/assertion/result'){
    var body = JSON.parse(event.body);
    console.log(body);

    var attestation = null;
    for( var i = 0 ; i < database[context.req.session.username].attestation.length ; i++ ){
      if( database[context.req.session.username].attestation[i].credId == body.id ){
        attestation = database[context.req.session.username].attestation[i];
        break;
      }
    }
    if( !attestation ){
      return new Response({
        'status': 'failed',
        'message': 'key is not found.'
      });
    }

    var assertionExpectations = {
      challenge: context.req.session.challenge,
      origin: FIDO_ORIGIN,
      factor: "either",
      publicKey: attestation.publickey,
      prevCounter: attestation.counter,
      userHandle: null
    };

    body.rawId = new Uint8Array(base64url.toBuffer(body.rawId)).buffer;
    var authnResult = await f2l.assertionResult(body, assertionExpectations);
    console.log(authnResult);

    if(authnResult.audit.complete) {
      attestation.counter = authnResult.authnrData.get('counter');

      return new Response({
        'status': 'ok',
        credId: body.id,
        counter: attestation.counter
      });
    } else {
      return new Response({
        'status': 'failed',
        'message': 'Can not authenticate signature!'
      });
    }
  }else
  if( event.path == '/attestation/options'){
    var body = JSON.parse(event.body);
    console.log(body);

    let username = body.username;

    if(database[username] && database[username].registered) {
      return new Response({
          'status': 'failed',
          'message': `Username ${username} already exists`
      });
    }

    var id = randomBase64URLBuffer();

    var registrationOptions = await f2l.attestationOptions();
    registrationOptions.challenge = base64url.encode(registrationOptions.challenge);
    registrationOptions.user.id = id;
    registrationOptions.user.name = username;
    registrationOptions.user.displayName = username;
    console.log(registrationOptions);

    database[username] = {
      'name': username,
      'registered': false,
      'id': id,
      'attestation': []
    };

    context.req.session.challenge = registrationOptions.challenge;
    context.req.session.username = username;

    registrationOptions.status = 'ok';

    return new Response(registrationOptions);
  }else
  if( event.path == '/attestation/result'){
    var body = JSON.parse(event.body);
    console.log(body);

    var attestationExpectations = {
        challenge: context.req.session.challenge,
        origin: FIDO_ORIGIN,
        factor: "either"
    };
    body.rawId = new Uint8Array(base64url.toBuffer(body.rawId)).buffer;
    var regResult = await f2l.attestationResult(body, attestationExpectations);
    console.log(regResult);

    var credId = base64url.encode(regResult.authnrData.get('credId'));
    var counter = regResult.authnrData.get('counter');
    database[context.req.session.username].attestation.push({ 
        publickey : regResult.authnrData.get('credentialPublicKeyPem'),
        counter : counter,
        fmt: regResult.authnrData.get('fmt'),
        credId : credId
    });

    if(regResult.audit.complete) {
      database[context.req.session.username].registered = true

      return new Response({
        'status': 'ok',
        credId: credId,
        counter: counter
      });
    } else {
      return new Response({
        'status': 'failed',
        'message': 'Can not authenticate signature!'
      });
    }
  }
};

function randomBase64URLBuffer(len){
  len = len || 32;

  let buff = crypto.randomBytes(len);

  return base64url(buff);
}

以下の部分は、環境に合わせて、変更してください。
・process.env.FIDO_RP_NAME
・process.env.FIDO_ORIGIN

次は、クライアント側ソースです。
Base64URLエンコードには以下のモジュールを使わせていただきました。

Base64URL-ArrayBuffer
　https://github.com/herrjemand/Base64URL-ArrayBuffer

HTMLは以下の通りです。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; style-src * 'unsafe-inline'; media-src *; img-src * data: content: blob:;">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <title>FIDO Demo Server</title>

  <script src="js/methods_utils.js"></script>
  <script src="js/vue_utils.js"></script>

  <script src="dist/js/vconsole.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="top" class="container">
        <h1>FIDO Demo Server</h1>

        <div class="alert alert-info" role="alert">{{message}}</div>

        <div class="form-inline">
            <label>username</label> <input type="text" class="form-control" v-model="username">
        </div>
        <button class="btn btn-default" v-on:click="start_register()">登録開始</button>

        <div v-if="attestation != null">
            <label>rp.name</label> {{attestation.rp.name}}<br>
            <label>user.displayName</label> {{attestation.user.displayName}}<br>
            <label>user.id</label> {{attestation_encode.user.id}}<br>
            <label>challenge</label> {{attestation_encode.challenge}}<br>
            <label>attestation</label> {{attestation.attestation}}<br>

            <button class="btn btn-default" v-on:click="do_register()">登録実行</button>
        </div>
        <div>
            <div v-if="registered">
                <label>credId</label> {{register_credId}}<br>
                <label>counter</label> {{register_counter}}<br>
            </div>

            <button class="btn btn-default" v-on:click="start_login()">ログイン開始</button>
        </div>
        <div v-if="assertion != null">
            <div v-for="(cred, index) of assertion_encode.allowCredentials">
                <label>cred.id[{{index}}]</label> {{cred.id}}<br>
            </div>
            <label>challenge</label> {{assertion_encode.challenge}}<br>

            <button class="btn btn-default" v-on:click="do_login()">ログイン実行</button>
        </div>
        <div v-if="logined">
            <label>credId</label> {{login_credId}}<br>
            <label>counter</label> {{login_counter}}<br>
        </div>

        <div class="modal fade" id="progress">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">{{progress_title}}</h4>
                    </div>
                    <div class="modal-body">
                        <center><progress max="100" /></center>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="dist/js/base64url-arraybuffer.js"></script>
    <script src="js/start.js"></script>
</body>

Javascript部分です。

start.js

'use strict';

//var vConsole = new VConsole();

const base_url = "【サーバのURL】";

var vue_options = {
    el: "#top",
    data: {
        progress_title: '',

        message: "",
        username: 'test',
        attestation : null,
        attestation_encode: {
            user: {}
        },
        register_credId: null,
        register_counter: -1,
        registered : false,
        assertion : null,
        assertion_encode: {
            allowCredentials: []
        },
        login_credId: null,
        login_counter: -1,
        logined : false
    },
    computed: {
    },
    methods: {
        start_register: function(){
            this.registered = false;
            var param = {
                username: this.username,
                userVerification: true
            };
            this.progress_open();
            do_post( base_url + '/attestation/options', param )
            .then(json =>{
                this.progress_close();
                console.log(json);
                if( json.status != 'ok'){
                    alert(json.message);
                    return;
                }

                this.attestation_encode.challenge = json.challenge;
                this.attestation_encode.user.id = json.user.id;

                json.challenge = base64url.decode(json.challenge);
                json.user.id = base64url.decode(json.user.id);

                this.attestation = json;
                this.message = '登録の準備ができました。';
            })
            .catch(error =>{
                this.progress_close();
                alert(error);
            });
        },
        do_register: function(){
            return navigator.credentials.create({ publicKey: this.attestation })
            .then(response =>{
                var result = publicKeyCredentialToJSON(response);

                this.progress_open();
                return do_post(base_url + '/attestation/result', result )
            })
            .then((response) => {
                this.progress_close();
                if(response.status !== 'ok'){
                    alert(json.message);
                    return;
                }

                if( response.status == 'ok'){
                    this.register_credId = response.credId;
                    this.register_counter = response.counter;
                    this.registered = true;
                    this.message = '登録が完了しました。';
                }else{
                    throw 'registration error';
                }
            })
            .catch(error =>{
                this.progress_close();
                alert(error);
            });
        },
        start_login: function(){
            this.logined = false;
            var param = {
                username: this.username,
            };

            this.progress_open();
            do_post( base_url + '/assertion/options', param )
            .then(json =>{
                this.progress_close();
                console.log(json);
                if( json.status != 'ok'){
                    alert(json.message);
                    return;
                }

                this.assertion_encode.challenge = json.challenge;
                json.challenge = base64url.decode(json.challenge);

                for(var i = 0 ; i < json.allowCredentials.length ; i++ ) {
                    this.assertion_encode.allowCredentials[i] = { id: json.allowCredentials[i].id };
                    json.allowCredentials[i].id = base64url.decode(json.allowCredentials[i].id);
                }

                this.assertion = json;
                this.message = 'ログインの準備ができました。';
            })
            .catch(error =>{
                this.progress_close();
                alert(error);
            });
        },
        do_login: function(){
            return navigator.credentials.get({ publicKey: this.assertion })
            .then(response =>{
                var result = publicKeyCredentialToJSON(response);

                this.progress_open();
                return do_post(base_url + '/assertion/result', result )
            })
            .then((response) => {
                this.progress_close();
                if(response.status !== 'ok')
                    throw new Error(`Server responed with error. The message is: ${response.message}`);

                console.log('sendWebAuthnResponse received: ', response);

                if( response.status == 'ok'){
                    this.login_credId = response.credId;
                    this.login_counter = response.counter;
                    this.logined = true;
                    this.message = 'ログインが成功しました。';
                }else{
                    throw 'login error';
                }
            })
            .catch(error =>{
                this.progress_close();
                alert(error);
            });
        }
    },
    created: function(){
    },
    mounted: function(){
        proc_load();
    }
};
vue_add_methods(vue_options, methods_utils);
var vue = new Vue( vue_options );

function do_post(url, body){
//    const headers = new Headers( { "Content-Type" : "application/json; charset=utf-8" } );
    const headers = new Headers( { "Content-Type" : "application/json" } );

    return fetch(url, {
        method : 'POST',
        credentials: 'include',
        body : JSON.stringify(body),
        headers: headers
    })
    .then((response) => {
        if( !response.ok )
            throw 'status is not 200.';
        return response.json();
    });
}

function publicKeyCredentialToJSON(pubKeyCred){
    if(pubKeyCred instanceof Array) {
        let arr = [];
        for(let i of pubKeyCred)
            arr.push(publicKeyCredentialToJSON(i));

        return arr
    }

    if(pubKeyCred instanceof ArrayBuffer) {
        return base64url.encode(pubKeyCred)
    }

    if(pubKeyCred instanceof Object) {
        let obj = {};

        for (let key in pubKeyCred) {
            obj[key] = publicKeyCredentialToJSON(pubKeyCred[key]);
        }

        return obj
    }

    return pubKeyCred
}

以下の部分は、環境に合わせて書き換えてください。
・【サーバのURL】

fido2-lib の修正

下記に示すように、fido2-libの実装をいじらないとうまく動きませんでした。

lib/validator.js

// 172行目あたり
// 変更前
    if (typeof req.response.userHandle !== "string" &&
        !(req.response.userHandle instanceof ArrayBuffer) &&
        req.response.userHandle !== undefined) {
        throw new TypeError("expected 'response.userHandle' to be base64 String, ArrayBuffer, or undefined");
    }

// 変更後
    if (typeof req.response.userHandle !== "string" &&
        !(req.response.userHandle instanceof ArrayBuffer) &&
// modified by poruruba
        req.response.userHandle != null &&
        req.response.userHandle !== undefined) {
        throw new TypeError("expected 'response.userHandle' to be base64 String, ArrayBuffer, or undefined");
    }

lib/utils.js

// 183行目あたり
// 変更前
function bufEqual(a, b) {
    var len = a.length;

    if (len !== b.length) {
        return false;
    }

    for (var i = 0; i < len; i++) {
        if (a.readUInt8(i) !== b.readUInt8(i)) {
            return false;
        }
    }

    return true;
}

// 変更後
function bufEqual(a, b) {
// modified by poruruba
    if (!(a instanceof ArrayBuffer && b instanceof ArrayBuffer)) {
        throw new Error("expected bufEqual to be of type ArrayBuffer");
    }

    var len = a.byteLength;

    if (len !== b.byteLength) {
        return false;
    }

    for (var i = 0; i < len; i++) {
        if (a[i] !== b[i]) {
            return false;
        }
    }

    return true;
}

lib/parser.js

// 249行目あたり
// 変更前
    let userHandle;
    if (msg.response.userHandle !== undefined) {
        userHandle = coerceToArrayBuffer(msg.response.userHandle, "response.userHandle");
        if (userHandle.byteLength === 0) {
            userHandle = undefined;
        }
    }

    let sigAb = coerceToArrayBuffer(msg.response.signature, "response.signature");
    let ret = new Map([
        ["sig", sigAb],
        ["userHandle", userHandle],
        ["rawAuthnrData", msg.response.authenticatorData],
        ...parseAuthenticatorData(msg.response.authenticatorData)
    ]);

// 変更後
    let userHandle;
// modified by poruruba
//    if (msg.response.userHandle !== undefined) {
    if (msg.response.userHandle !== undefined && msg.response.userHandle !== null) {
        userHandle = coerceToArrayBuffer(msg.response.userHandle, "response.userHandle");
        if (userHandle.byteLength === 0) {
            userHandle = undefined;
        }
    }

    let sigAb = coerceToArrayBuffer(msg.response.signature, "response.signature");
    let ret = new Map([
        ["sig", sigAb],
        ["userHandle", userHandle],
// modified by poruruba
//        ["rawAuthnrData", msg.response.authenticatorData],
        ["rawAuthnrData", coerceToArrayBuffer(msg.response.authenticatorData, "authnrDataArrayBuffer")],
        ...parseAuthenticatorData(msg.response.authenticatorData)
    ]);

動作確認

Windows10のChromeブラウザで実施してみました。
以下は、TitanセキュリティキーをUSB端子に挿した場合です。

index.htmlを開きます。

usernameに適当なユーザ名を入力して、「登録開始」ボタンを押下します。

以下が表示されます。
Titanセキュリティキーも表面の金属のところを指で触ります。

以下が表示されますので、「許可」ボタンを押下して進めます。

これで登録完了です。

さあログインしましょう。
「ログイン開始」ボタンを押下すると、以下のようになります。

そして、「ログイン実行」ボタンを押下します。
登録時と同様に、Titanセキュリティキーも表面の金属のところを指で触ります。

以下のように表示されて、ログイン完了です。

Androidでもやってみます。
こちらはBLEでやってみました。NFCでも似たような感じでした。

事前に、BLEデバイスとしてペアリングしておく必要があるようです。
ペアリングは、デバイスのボタンを5秒間長押しするとペアリングが開始されます。

それでは、始めましょう。AndroidのChromeからindnex.htmlを開きます。

「登録開始」ボタンを押下します。

「登録実行」ボタンを押下します。

デバイスにあるボタンを押します。

登録完了です。

次はログインです。
「ログイン開始」ボタンを押下すると以下の画面になります。

「ログイン実行」ボタンを押下します。

デバイスにあるボタンを押します。

ログインできました！

制限事項

・WindowsでBLEを使って認証しようとしましたが、うまくいきませんでした。原因不明です。
・https://github.com/apowers313/fido2-lib をみたら、Androidの指紋認証Attestationが実装されているではないかっ！

以上

javascriptでワンライナーの再帰関数

何とかワンライナーで再帰関数いけないかなと思って調べたところ
一旦、適当な変数に代入してそれを関数内から参照すればOKでした。

 (f = (x) => x < 10 ? f(x+1) : x)(0); //fはアロー関数内からでも見える

実際のコードではまず使わないかと思いますけど、
コードゴルフの類なら使えるかも知れません。

はじめに

クックパッドを見ながら、料理を作るのが好きなのですが、ふと記載されている分量を作る人数に応じて変更できたら、便利かなと思い、人数に応じて分量を計算できるchrome拡張を作成しました

TL;DR

作ったchrome拡張はこちら

人数を変更して、「分量表示」ボタンをクリックすると、入力した人数で作る際に必要な分量を計算して、表示します

chrome拡張作成の流れ

• manifest.jsonを作成します

manifest.json

{
  "name": "クックパッドのレシピの分量を計算するchrome拡張",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "Change the amount of cookpad recipe chrome extension",
  "content_scripts": [{
    "matches": [
      "https://cookpad.com/recipe/*"
    ],
    "js": [
      "js/main.js"
    ]
  }]
}

• 次に処理を行うJavaScriptを書く
• 材料の横に人数の記載があれば、分量を計算できるようにしています

js/main.js

const color = 'color: #ff8c1a;';
let baseServing = 0;
let servingsFor = document.getElementsByClassName('servings_for yield');
if (servingsFor.length != 0) {
  baseServing = getNum(changeHalf(servingsFor[0].textContent));

  const label1 = document.createElement('label');
  label1.textContent = '→';
  servingsFor[0].appendChild(label1);

  const input1 = document.createElement('input');
  input1.type = 'text';
  input1.name = 'servings';
  input1.maxLength = 2;
  input1.size = 2;
  input1.value = baseServing;
  input1.style = color;
  servingsFor[0].appendChild(input1);

  const label2 = document.createElement('label');
  label2.textContent = '人分';
  label2.style = color;
  servingsFor[0].appendChild(label2);

  const btn1 = document.createElement('input');
  btn1.type = 'button';
  btn1.value = '分量表示';
  btn1.className = 'submit button small';
  btn1.onclick = function() {
    let values = document.getElementsByClassName('ingredient_quantity amount');
    for(i = 0; i < values.length; i++) {
      let changeAmount = values[i].parentNode.getElementsByClassName('ingredient_quantity change_amount');
      if (changeAmount.length != 0) {
        values[i].parentNode.removeChild(changeAmount[0]);
      }
      let halfValue = changeHalf(values[i].textContent);
      let baseQuantity = getNum(halfValue);
      if (baseQuantity != '') {
        let serving = document.getElementsByName('servings')[0].value;
        let per = serving / baseServing;
        let quantity = baseQuantity * per;

        const label3 = document.createElement('div');
        label3.className = 'ingredient_quantity change_amount';
        label3.style = color;
        label3.textContent = halfValue.replace(baseQuantity, quantity);
        values[i].parentNode.appendChild(label3);
      }
    }
  };
  servingsFor[0].appendChild(btn1);
}

function getNum(data) {
  return data.replace(/[^0-9]/g, '');
}

function changeHalf(str) {
  return str.replace(/[０-９]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) - 65248);
  });
}

さいごに

• 以下のような課題はありますが、まあまあ満足してます

  • 人数の記載がない場合、分量の計算はできない
  • 人数に1〜2といった記載がある場合、計算できない
  • 分量で複数の数値（大さじ1〜2)のような記載があるものは計算されない

• 今回、chrome拡張を初めて作成しましたが、以下のリンクがとても役に立ちました。ありがとうございます。

  • Chrome拡張の作り方 (超概要)
  • JavaScriptで数字のみ取り出す
  • JavaScriptで英数を全角/半角に変換する方法

• 一応、ソースコードをgithubにおいてます

  • change-the-amount-of-cookpad-recipe

記事の趣旨

Codewarsの問題(Kata)はサインアップしてなくても解くことができます。各問題のタイトルの下にあるURLをブラウザでたどっていただければ問題を解くIDEを開けます。
サインアップしたい場合またはIDEの使い方についてはこちら(https://qiita.com/javacommons/items/7c473cda7825ab99e08c)の記事をご覧ください。

2019/08/16現在214個の問題(Kata)を解いていますので、解いた順に訳していこうと思います。記事内に並べる順番は解いた逆順・・・つまり最後に解いたものが先頭に来るように並べようと思います。

ちなみに問題(Kata)の級は、8級が一番簡単で1級が一番難しいものとなっています。尚、私は主に javascript で解いていますので、javascript 以外のプログラミング言語では問題が対応してないケースもあると思います。その際は javascript で解いていただくか、問題自体をスキップしていただくようお願いします。

クリックすると私が解いた問題が見れます。

ここから翻訳した問題(Kata)

• とりあえず数問訳しておきます。最終的には214個(2019/08/16現在の予定)訳します。訳し終わるまでには解いた問題数が増えると思いますので214個以上になると思います。
• 問題文さえ日本語で提示されれば取っ掛かりになるという方がたくさんいると思うので記事にしてみました。

Kata(8級): Array plus array(配列＋配列) 翻訳日時: 2019/08/16 19:15

https://www.codewars.com/kata/5a2be17aee1aaefe2a000151

私はコーディング経験が浅いので、2つの配列の合計を求めたいのです...言い換えると、2つの配列の全ての要素を合計したいのです。手助けいただき感謝いたします。

P.S. それぞれの配列は整数のみを含みます。出力も数値となります。

Kata(8級): Basic variable assignment(基礎：変数の代入) 翻訳日時: 2019/08/16 19:08

https://www.codewars.com/kata/50ee6b0bdeab583673000025

このコードは "name" という変数に "codewa.rs" を格納するべきですがうまくいっていません。うまくいかない理由を解明してください。

var a == "code";
var b == "wa.rs";
var name == a + b;

Kata(8級): String repeat(文字列の繰り返し) 翻訳日時: 2019/08/16 18:53

https://www.codewars.com/kata/57a0e5c372292dd76d000d7e

repeatString という名前で、与えられた文字列を指定された回数繰り返す関数を書いてください。

repeatStr(6, "I") // "IIIIII"
repeatStr(5, "Hello") // "HelloHelloHelloHelloHello"

Kata(8級): Even or Odd(偶数か奇数か) 翻訳日時: 2019/08/16 18:48

https://www.codewars.com/kata/53da3dbb4a5168369a0000fe

一つの整数を引数として取り、偶数に対しては "Even" を返し、奇数に対しては "Odd" を返す関数を作ってください。

Kata(7級): Descending Order(降順) 翻訳日時: 2019/08/16 18:34

https://www.codewars.com/kata/5467e4d82edf8bbf40000155

あなたのタスクは任意の負でない整数を引数として取り全ての桁を降順にして返す関数を作ることです。本質的には、桁を再配置して可能な最大の数を作り出してください。

例:
入力: 21445 出力: 54421
入力: 145263 出力: 654321
入力: 1254859723 出力: 9875543221

Kata(7級): Disemvowel Trolls(巨人の母音字を削除する) 翻訳日時: 2019/08/16 18:11

https://www.codewars.com/kata/52fba66badcd10859f00097e

巨人があなたのコメントセクションを攻撃しています!
この状況に対処する一般的な方法は、巨人のコメントから全ての母音を取り除いて、脅威を中和することです。
あなたのタスクは一つの文字列を取り、全ての母音が削除された新たな文字列を返す関数を書くことです。

例えば, "This website is for losers LOL!" という文字列は "Ths wbst s fr lsrs LL!" となります。

注記: このKataでは y は母音とみなされません。

Kata(7級): Friend or Foe?(味方か敵か?) 翻訳日時: 2019/08/16 17:47

https://www.codewars.com/kata/55b42574ff091733d900002f

文字列のリストをフィルタリングして味方の名前のみが含まれるリストを返すプログラムを作ってください。
もし名前が正確に4文字で構成されるならば、あなたの味方であると確信できます! そうでない場合には味方でないと確信できます...

例: インプット = ["Ryan", "Kieran", "Jason", "Yous"], 出力 = ["Ryan", "Yous"]

注記: 入力内の元々の順序を出力内でも保持してください

Kata(6級): Bit Counting(ビットを数える) 翻訳日時: 2019/08/16 17:29

https://www.codewars.com/kata/526571aae218b8ee490006f4

一つの整数を取り、その数の2進数表現内で1と等しいビットの数を返す関数を書いてください。入力は常に負数でないことが保証されています。
例：1234 の2進数表現は 10011010010 ですので、このケースでは関数は 5 を返すべきです。

はじめに

Pythonの勉強から始まり、あまりにもJavascriptの知識がなかったため、すこしでもJavascriptはどういう言語なのか体験するために、w3schoolsさんのチュートリアルを教科書として流れを書いてみました。
（備忘録のようなポストです。）

練習の流れ

https://www.w3schools.com/howto/howto_js_todolist.asp
を見本とし、ついて行きながらカスタムの練習もかねています。

HTMLの作成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href = "todolist.css">
</head>
<body>
  <div id="myDIV" class="header">
    <h1>To do List</h1>
    <input type="text" id="myInput" placeholder="今日の予定は？">
    <span onclick="newElement()" class="addBtn">追加</span>
  </div>

  <ul id="myUL">
  </ul>

  <script src = "todolist.js"></script>
</body>
</html>

見本の内容を

の内容とし、ToDoListのページを作成します。
Title + Input + ボタンの基本枠です。
完成後、F12で検証のところから予定が追加されたとき、
<ul></ul>の間に追加した内容が
<li></li>に囲まれてはいります。

CSSの作成

/* リストの設定 */
ul {
  margin: 0;
  padding: 0;
}

ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  background: #eee;
  padding: 12px;
  transition: 0.2s;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

ul li:nth-child(odd) {
  background: #f9f9f9;
}

ul li:hover {
  background: #ddd;
}

ul li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}

ul li.checked::before {
  content: '';
  position:absolute;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}
/* リストの削除ボタン */
.close {
  position:absolute;
  top: 0;
  right: 0;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #3094ba;
  color: white;
}
/* Header-Inputと追加ボタンを含む */
.header {
  background-color: #5dbcd2;
  padding: 30px 40px;
  color:white;
  text-align: center;
}

.header:after {
  content:"";
  display:table;
  clear: both;
}

input {
  margin: 0;
  margin-top: -5px;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}

.addBtn {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 10px;

}

.addBtn:hover {
  background-color: #636b6d;
  color: #fff
}

Title . Iuput(追加ボタン) . List(削除ボタン)のCSSを設定しています。見本を基準として、cssの練習で少しの内容の中でズレているところや色を変更してます。

Javascriptの作成

//削除ボタンを生成する。"\u00D7" → Unicode
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}
//削除ボタンをクリックするとリストアイテムがなくなる。
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}
//チェック表示
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);
//追加ボタンを押すとリストアイテムが生成される。
function newElement(){
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("なんか書いてや！");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}

• ボタンの生成
• リストからの非表示
• クリックすると　～なる。

練習してみたら....

HTMLやcssはpythonを勉強するときにも少し触ったことがあるのでわかりやすく優しく書いている見本を元に自分の思うことを変更しながら書いてみることができました。
しかし、Javascriptはやはり基本構文の知識がないため、見本を通じてできる機能や表現の仕方を分解しながら勉強する機会になりました。
これからの勉強の中で基本の構文の練習も続けながらいい例文の表現の分析勉強も続けたいと思います。