Hint of“Passcode Lock”Screen and Logic (with LocalAuthentication).
1 like1,949 views
potatotips #58での登壇資料になります。 https://potatotips.connpass.com/event/115158/ ファイナンス系のアプリをはじめとしたアプリ内でお金のやりとりが発生するものや、ヘルスケアアプリ等でもあまり他人に見られたくないセンシティブな情報を持つようなアプリにおいてはよく見かける機能の1つですが、AppDelegate.swift部分のライフサイクルを利用する点やユーザーの使いやすさを実現するために画面に関する処理にも工夫ができる点なので、パスコードによる画面ロック機能を実装する上でのポイントになりそうな部分をまとめました。 【詳細解説記事】 https://qiita.com/fumiyasac@github/items/6124f9b272f5ee6ebb40 【サンプルコード】 https://github.com/fumiyasac/TouchIDExample
Hint of“Passcode Lock”Screen and Logic (with LocalAuthentication).
- 7. パスコードロック画面に関する設計概要 入力完了時の処理を実行 PasscodeViewController PasscodePresenter PasscodeModel ユーザーの入力に関する処理 ※ 本来はパスコードロック削除に関する処理があれば尚良い。 状態に応じた処理 パスコード情報を返却 InputPasscodeType （ 画面の用途に応じた分類 ） case inputForCreate // パスコードの新規作成 case retryForCreate // パスコードの新規作成時の確認 case inputForUpdate // パスコードの変更 case retryForUpdate // パスコードの変更時の確認 case displayPasscodeLock // パスコードロック画面の表示時 protocol PasscodePresenterDelegate: NSObjectProtocol { func goNext() func dismissPasscodeLock() func savePasscode() func showError() } ※ 似た様な処理でも詳細が異なる点に気をつけると良い。 PasscodePresenterDelegate （ 期待する振る舞い ）
- 8. パスコードロック画面のViewControllerに関する設計 ① パスコードの入力が4桁になった場合にはPresenter側に完了したことを伝える InputPasscodeType （ 画面の用途に応じた分類 ） case inputForCreate // パスコードの新規作成 case retryForCreate // パスコードの新規作成時の確認 case inputForUpdate // パスコードの変更 case retryForUpdate // パスコードの変更時の確認 case displayPasscodeLock // パスコードロック画面の表示時 protocol PasscodePresenterDelegate: NSObjectProtocol { func goNext() func dismissPasscodeLock() func savePasscode() func showError() } ② 引数で渡されたEnum値に応じたPresenter側のDelegate処理を実行 PasscodePresenterDelegate （ VC側で期待する振る舞い ） presenter.inputCompleted(userInputPasscode, inputPasscodeType: inputPasscodeType) InputPasscodeKeyboard Delegate ユーザー入力値を反映 ※ VC側のextensionに場合に応じた処理を記載。
- 11. パスコードロック機能を実装する際にすると良い配慮 APIサーバー側： 送られたリクエストから 該当ユーザーへメール送信 パスコード解除用の メール送信リクエスト アプリ側： ※ 有効期限を短めにする等の配慮 ユーザーが送られたメール に記載されたURLをタップ （ 解除用トークン入りURL ） ※ 以前に利用したパスコードを破棄 URLスキーム経由で開いて パスコード解除リクエスト 例. ユーザーがパスコードを忘れてしまった場合の考慮 → メールに添付されたURL経由でパスコードを解除する。 1. ユーザー登録機能を有する 2. DBへメールアドレスを保持している 1. APIサーバー側と通信する機能を有する 2. URL経由でアプリを開ける設定 送られたパスコード解除 リクエストが正しいか判定 リクエストが正しい場合 パスコードを解除する
- 12. UI/UXの観点からの工夫できるポイント(1) テンキー状のボタンに関する設定 このViewにおけるInterfaceBuilder上での設定： 手順1. 0~9のボタンに関しては、Xcodeの右ペインでそれぞれtagの値を数字に合わせて設定しておく。 手順2. 0~9のボタンをInterfaceBuilderを利用して「Outlet Collection」で接続する。 ※ ボタン押下時にどのボタンが押されたかは手順1. で設定したタグ値を sender: から取得する
- 13. UI/UXの観点からの工夫できるポイント(1) テンキー状のボタンに関する設定 ② 押下時のアニメーションに. allowUserInteractionオプションを追加 ① UIButtonのアクションを .touchDown時に発火