Native Modulesで実現する パスワード入力支援 (技術少なめLT版) IMANAKA Kouta 2019/06/18 #RNstartup #5 

audiobook.jp オーディオブックは、耳で聴く本。 ナレーターが本を読み上げてくれるので、 目を使わずに読書を楽しめます。 Warning: オトバンクではiOS方面を重点的に見てくださるアプリエンジニアを募集中です！ 詳しくは: https://findy-code.io/companies/405/jobs/ 

ある日の定例MTG 

CS担当「パスワード忘 れたって問い合わせ めっちゃくる」 

No content

人間が忘れることはシ ステムに覚えさせれば いいのでは 

No content

実装方法 

まずライブラリを探してみたが・・・ 都合の良いライブラリは見つからなかった ので自作することにしました 

パスワードを覚えさせる仕組み ● Android / Smart Lock for Passwords ○ API level >= 9 (Android 2.3) ○ https://developers.google.com/identity/s martlock-passwords/android/ ● iOS / Shared Web Credentials ○ iOS >= 8 ? ○ https://developer.apple.com/documentati on/security/shared_web_credentials 

おまけ: 別のパスワードを覚えさせる仕組み ● Android / Autofill Framework ○ API level >= 26 (Android 8.0) ● iOS / Password AutoFill ○ iOS >= 11 要求OSバージョンが比較的高めであるが、 RNにおいては TextInput#textContentType を 適切に設定するだけでよい 

実装 ● Android: Javaで実装 ○ 当時Kotlin環境が整ってなかった（いまは整備済み） ● iOS: Swiftで実装 ● RNとの接続: Native Modules ○ https://facebook.github.io/react-native/docs/0.59/native-modules-i os ○ https://facebook.github.io/react-native/docs/0.59/native-modules-a ndroid ● 実装の深いところは5分で説明しきれないので省略！ 

実装でのハマりポイント ● Native Modules側のPromiseの扱い ○ Promise#resolve/rejectし忘れるとロックしてしまう ○ JS側はasync functionで比較的安全に書けるが Native側はそうではないので気をつけないと抜けが発生する ● iOS/Androidの各実装における ダイアログの表示タイミングが微妙に違う ○ 妥協したり調整したり... 

No content

まとめ ● パスワードが自動入力される様は魔法のようだ ● なにげに開発中のアプリのデバッグが捗る ● Native Modulesはそれほど難しくはない ○ ※Android歴10年目の感想です ○ とはいえJS/TSから離れるので 言語間のコンテキストスイッチが気になる ● 雑に案を投げたら実現してくれた同僚に感謝 

「問い合わせどうですか」 「最近は来てないですねー」 

✌ 

「でも最近間違って新しくアカ ウントを作られる利用者さん が増えているようです...」 

「でも最近間違って新しくアカ ウントを作られる利用者さん が増えているようです...」 To Be Continued 

THANK YOU (自己紹介) ● 今中 幸太 ● 株式会社オトバンク 所属 ○ 2019/09 ~ ○ audiobook.jp アプリ (React Native) ● Android開発者歴10年目 ● カンファレンス誘導員 ○ DroidKaigi (2015-2019) ○ iOSDC 2018, Builderscon, etc… ● @pside, GitHub: keima