Monaca New IDEで

指紋認証機能アプリ

つくってみた

Ryoma HOSHINO

星野 竜摩  Ryoma Hoshino

- 新卒3年目

- 文系エンジニア

- 高校球児

- ビッグバンドジャズ

- いい返事

- パワーでなんとかする

- みんなで何かをやるのが好き

Career

入社

配属

アシアルへ

常駐

帰還

現在

- REST API 設計・開発

- 社内Monacaアプリ開発塾  講師

- Monacaを使った高校生プログラミングイベント企画

- ほそぼそアプリ開発

Recently Task

前回のMonacaUG at Omiyaにて

お堅めの会社で

Monacaアプリ開発部隊を作るまで

ちょいと

(道半ば)

水面下で進められていた、"社員向けアプリ"

を開発塾のメンバーでリリースまでもっていこう!

と頑張っております

進める上で躓いた点

開発体制の検討とベストプラクティス etc

試行錯誤の中でいろいろわかってきたことがあります

 

どこかで共有できたらって思ってます!!

本題

Monaca New IDEで

指紋認証機能実装してみた

Ryoma HOSHINO

このような感じになるように

実装しました!

技術構成

- Monaca Cloud IDE

- Vue.js

- OnsenUI for Vue

- Touch ID

Vue.jsのここがよい!

 学習コストが低い

 ドキュメントが充実

 スモールスタートできる

 勢い◎

 フレームワーク初心者に最適!

Monacaでの指紋認証機能実装のためには

Cordovaプラグインが必要です

 

いくつかプラグインが公開されていますが

今回は 'cordova-plugin-keychain-touch-id'を使用します

https://github.com/sjhoeksma/cordova-plugin-keychain-touch-id

ほかには

https://github.com/EddyVerbruggen/cordova-plugin-touch-id

https://github.com/mjwheatley/cordova-plugin-android-fingerprint-auth

https://github.com/niklasmerz/cordova-plugin-fingerprint-aio

https://github.com/yurish/cordova-plugin-fingerprint-login

とかそのへん

公開されているCordovaプラグインには

1つのプラグインで、両OS対応できるものもあれば

どちらかしか対応していないものもあったり

 

技術的にも、"指紋認証"という性質的にも

プラグインの選定は慎重になりますね😞

今回はサンプルなので

"簡単そうで両OS対応できる"

という観点で選定しております

 

Monaca で指紋認証を実案件で使ったことがある方

対応方法を教えていただけると嬉しいですm(_ _)m

プロジェクト準備

開発準備

IDEでVueが選択できるようになってる!!

←.vue !  webpack !! node_modules !!!

 

↓ターミナルがあらわれた!!

☺️

まずはここまで作ります

 

- IDとPasswordを入力

- ログインタップ

- 画面遷移

OnsenUIは

いい感じのUIを

簡単に作れます!

Vue.jsとの親和性も◎!

機能概要

 - 初回ログイン成功時

  「これから指紋認証しますか?」ダイアログ表示

  Yes: 指紋と入力したID, Passwordを紐付け

 

 - アプリ再起動時

  「指紋認証」ダイアログ表示

  Success: 紐付けられたID, Passwordを取り出し

      その値を使ってログイン

 

 - 指紋認証設定削除

実装準備

 ◯自分の端末に指紋を登録する

 ◯cordova plugin 導入 ↓

プラグイン導入のため

ターミナル起動

cordova plugin add cordova-plugin-keychain-touch-id

とコマンドを実行

↑のようになれば成功です!

「Cordovaプラグインの管理」ページも

存在が確認できました!

従来通りこのページでもプラグインを導入できます

認証ロジック実装

◎指紋認証可能可否

  その端末が指紋認証を搭載しているかどうかをチェックします

◎任意の値を登録された指紋に紐付け

  これから指紋認証をしたい、という時に実行

◎指紋認証実行

  認証ダイアログを表示させます

  成功時、touchid.save時に保存した値を引数にもつ

      callback関数が実行されます

◎keyの存在チェック

  touchid.save()しているかをみる

  アプリ起動時に実行し、「存在すれば認証ダイアログ表示」

  というロジックに使用します

◎keyの削除

これらを組み合わせて

作りました!!

 

実機テストはカスタムデバッガービルド

したアプリで行いました

Monaca New IDEを使ってみて

 

☆より高度な開発が可能になった!!

  - ターミナル機能

  - フレームワークを使った開発

  特にフレームワーク開発は待ち望んでました♪( ´▽`)

 

◯エディタがより見やすく!

Monaca New IDEを使ってみて 2

 

◯さらなるエディタ進化に期待です

 Syntax Hilightとスニペットがないとしんどい場面が...

 →開発を進めているはずなので楽しみにしてます!!

 

◯プレビューとデバッガーは見ているのが違う?

 .vueファイルへの変更は即時プレビューへ反映されるが

 デバッガーへは反映されない

 → IDEでの"monaca transpile"と

  Monacaデバッガーでの"一時ファイルの削除"で

  変更分が反映されました

指紋認証

 

- 導入すればアプリでのログイン処理は劇的にラクに

- Monacaでの導入はものすごく簡単! (これも1.5hくらい)

- シビアな領域なので、

 ・ビジネスルール的なところ

 ・認証ロジック的なところ

 ・保存領域

は慎重に考える必要があるなと思いました。

 

- 指紋認証ミスりまくったら

 OSレイヤーでのパスコードにロックがかかる

 まじで焦りました

指紋認証 2

 

- 指紋認証ミスりまくったら

 OSレイヤーでのパスコードにロックがかかる

 マジで焦りました

 

- 指紋認証ログインをきちんと実装すると

 考慮すべき点が意外と多くなるなって思いました

  ミスりまくったらどうしよう

  Android, iOSでのパスコードのポリシーの違い

  指紋認証そのものに脆弱性が見つかったら etc...

新しくなったMonaca IDEでの開発

指紋認証機能の導入

 

ぜひともおためしあれ!!

2018/06/16

at Omiya

Monaca New IDEで指紋認証アプリ作ってみた

By ohoshi

Private

Monaca New IDEで指紋認証アプリ作ってみた

かんたんにできそう