指紋認証プラグインcordova-plugin-keychain-touch-idを使ってパスワードをセキュアに保存しよう

現在、多くのスマートフォンには指紋認証機能が搭載されています。重要なデータをロックしたり、指紋を認証のキーに使ったりする目的で使用されます。今回はその指紋認証をMonacaアプリで実現するcordova-plugin-keychain-touch-idの使い方を紹介します。

cordova-plugin-keychain-touch-idのインストール

cordova-plugin-keychain-touch-idはパスワードに相当する文字列をセキュアに保存するプラグインです。iOS/Android両方に対応しています。

まずMonacaアプリにcordova-plugin-keychain-touch-idプラグインをインストールします。

今回の検証環境は下記の通りです。

Cordovaバージョン：7.1.0
Cordovaプラグインバージョン：3.3.0
検証端末：iPhone 7 Plus (iOS 11.4.1)

上記の検証環境以外では、本記事に掲載されている通りに動作しない可能性があります。あらかじめご了承ください。

指紋認証利用可否を確認する

まず最初に指紋認証が使えるかどうかを確認します。メソッド名は window.plugins.touchid.isAvailable です。

window.plugins.touchid.isAvailable(result => {
  // 使える場合、スイッチボタンをON
  $('#log').value = JSON.stringify(result);
  $('#status').checked = result;
}, err => {
  // 使えない場合
  $('#log').value = JSON.stringify(err);
});

この時、返り値の result には touch または face という文字が返ってきます。 touch の場合は Touch IDやサムスンの指紋認証に対応していることを表しています。face は iPhone Xの顔認証になります。どちらが返ってきても、この後の処理の流れは変わりません。

パスワードを保存する

次に認証情報で使われるパスワードを保存します。メソッド名は window.plugins.touchid.save です。キーと保存したい文字列を指定して保存を実行します。以下のようにユーザ名とパスワードを連結して、まとめて保存することも可能です。保存成功時には何も返ってきません。

const myKey = 'myKey';
const username = $('#username').value;
const password = $('#password').value;
window.plugins.touchid.save(myKey, `${username} ${password}`, () => {
  $('#log').value = '保存しました';
}, err => {
  $('#log').value = JSON.stringify(err);
});

パスワードを取得する

前述の処理で保存したパスワードを取得する際に、指紋認証を使います。

指紋認証を行うメソッドは window.plugins.touchid.verify です。第一引数には保存時に指定したキーを、第二引数にはアラートに表示するメッセージを指定します。
端末の指紋認証機能が呼び出されて、認証が完了すると保存した文字列が取得されます。

const message = '指紋認証を行います';
window.plugins.touchid.verify(myKey, message, (str) => {
  const username = str.split(' ')[0];
  const password = str.split(' ')[1];
  $('#log').value = `ユーザ名は${username}, パスワードは${password}です`;
}, err => {
  $('#log').value = JSON.stringify(err);
});

まとめ

cordova-plugin-keychain-touch-id を使うことで指紋や顔を使った生体認証機能が簡単にMonacaアプリでも使えるようになります。よりセキュアなアプリを実現する際に役立つことでしょう。
パスワードやトークンを保存するのが一般的な使い方になりますが、文字列の保存を目的とせず、指紋認証を通過した後に特定の機能を呼び出すといった使い方も考えられます。

今回のコードはgoofmint/Monaca-Touch-ID: Monacaアプリでcordova-plugin-keychain-touch-idを使うデモです。にアップロードしてあります。実装時の参考にしてください。

今回ご紹介したCordovaプラグインは、サードパーティ製であるためアプリストア版のMonacaデバッガーでは動作しません。動作検証の際にはProプラン以上で利用可能なカスタムビルドデバッガーをご利用ください。