More than 5 years have passed since last update.

androidスマホの実機で、monacaの指紋認証プラグインcordova-plugin-keychain-touch-idが使えるか、検証

Posted at 2019-04-16

androidスマホの実機で、monacaの指紋認証プラグインcordova-plugin-keychain-touch-idが使えるか、検証しました。
結果、指紋センサーあっても、指紋認証できない機種がありました。要注意ですね。

monaca

指紋認証プラグインcordova-plugin-keychain-touch-id
- サードパーティ製プラグイン
- https://github.com/sjhoeksma/cordova-plugin-keychain-touch-id
  - プラグイン追加手順
    - monaca クラウドIDEの下側、「デバッガー」「プレビュー」の並びの(+)ボタン押下＞新規ターミナル
      - proプランじゃないと新規ターミナルない？
    - ターミナルでコマンド入力
    - $ cordova plugin add cordova-plugin-keychain-touch-id
    - $ cordova prepare
      - $ cordova prepare不要かも
    - プラグイン追加完了
      - monaca クラウドIDEのメニューバー＞設定＞cordovaプラグインの管理を開いて、有効なプラグインにcordova-plugin-keychain-touch-idが追加されてることを確認できる。
monacaでサードパーティ製プラグイン使うには、proプラン(有料)以上が必要
- monaca proプラン費用: https://ja.monaca.io/pricing.html
- プラン変更手順
  - monaca クラウドIEDのダッシュボードで、右上の「人」マーク＞アカウント設定
    - プラン管理＞プラン変更から変更できる。

指紋認証-検証プログラム

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        // アプリ起動時
        function onDeviceReady() {
            if (window.plugins) {
              window.plugins.touchid.isAvailable(() => {
                console.log('できるよ');
              },
              () => {
                console.log('対応してないよ');
              });
            } else {
                console.log('window.pluginsないよ');
            }
        }
        document.addEventListener("deviceready", onDeviceReady, false);

    </script>
</head>
<body>
    指紋認証の検証プログラム
</body>
</html>

monacaのAndroid アプリの検証方法

Android アプリのビルド
1. monaca クラウドIDEのメニューバー＞ビルド＞Android アプリのビルド
2. デバッグ向けビルド＞カスタムビルドデバッガー [ビルドを開始する] 押下
Androidスマホにアプリインストール
1. ビルド後のQRコードを、Androidスマホで読み込み
2. monaca のログイン画面が表示されるので、ログインすると、Android アプリダウンロードされる
  1. もしダウンロードされなかったら、ブラウザを再読み込みしてみる
  2. もしくは、ブラウザを閉じて、再度QRコードのURLを開いて、ログイン試してみる
3. Androidスマホで、ダウンロードしたアプリを開いて、インストール
検証
1. 初回起動時、アプリを重ねて表示を確認されるので、とりあえずONにする。（どっちでもいいはず）
2. monaca のログイン画面が表示されるので、ログインして、作った検証プログラムを開く
3. 検証結果が、PCのmonaca クラウドIEDのデバッガーに表示される。

検証結果

OK-Android

Xperia SO-04H [OS]Android8.0.0 指紋センサーあり
https://www.sonymobile.co.jp/xperia/docomo/so-04h/spec.html

NG-Android

KYOCERA android one S4-KC [OS]Android9 指紋センサーなし
https://www.kyocera.co.jp/prdct/telecom/consumer/lineup/s4/spec.html

HUAWEI P10 lite WAS-LX2J [OS]Android8.0.0 指紋センサーあり（だけどNG）
https://consumer.huawei.com/jp/phones/p10-lite/specs/

参照記事

指紋認証プラグインcordova-plugin-keychain-touch-idを使ってパスワードをセキュアに保存しよう | モナカプレス
https://press.monaca.io/atsushi/2898

Monacaアプリで指紋認証を実装する | ほしのえんじにありんぐ
https://www.ohoshi-tech.io/2018/11/02/monaca-touch-auth/

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up