Native Modulesで実現する パスワード入力支援 (技術少なめLT版)
by
Kouta Imanaka
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Native Modulesで実現する パスワード入力支援 (技術少なめLT版) IMANAKA Kouta 2019/06/18 #RNstartup #5
Slide 2
Slide 2 text
audiobook.jp オーディオブックは、耳で聴く本。 ナレーターが本を読み上げてくれるので、 目を使わずに読書を楽しめます。 Warning: オトバンクではiOS方面を重点的に見てくださるアプリエンジニアを募集中です! 詳しくは: https://findy-code.io/companies/405/jobs/
Slide 3
Slide 3 text
ある日の定例MTG
Slide 4
Slide 4 text
CS担当「パスワード忘 れたって問い合わせ めっちゃくる」
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
人間が忘れることはシ ステムに覚えさせれば いいのでは
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
実装方法
Slide 9
Slide 9 text
まずライブラリを探してみたが・・・ 都合の良いライブラリは見つからなかった ので自作することにしました
Slide 10
Slide 10 text
パスワードを覚えさせる仕組み ● 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
Slide 11
Slide 11 text
おまけ: 別のパスワードを覚えさせる仕組み ● Android / Autofill Framework ○ API level >= 26 (Android 8.0) ● iOS / Password AutoFill ○ iOS >= 11 要求OSバージョンが比較的高めであるが、 RNにおいては TextInput#textContentType を 適切に設定するだけでよい
Slide 12
Slide 12 text
実装 ● 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分で説明しきれないので省略!
Slide 13
Slide 13 text
実装でのハマりポイント ● Native Modules側のPromiseの扱い ○ Promise#resolve/rejectし忘れるとロックしてしまう ○ JS側はasync functionで比較的安全に書けるが Native側はそうではないので気をつけないと抜けが発生する ● iOS/Androidの各実装における ダイアログの表示タイミングが微妙に違う ○ 妥協したり調整したり...
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
まとめ ● パスワードが自動入力される様は魔法のようだ ● なにげに開発中のアプリのデバッグが捗る ● Native Modulesはそれほど難しくはない ○ ※Android歴10年目の感想です ○ とはいえJS/TSから離れるので 言語間のコンテキストスイッチが気になる ● 雑に案を投げたら実現してくれた同僚に感謝
Slide 16
Slide 16 text
「問い合わせどうですか」 「最近は来てないですねー」
Slide 17
Slide 17 text
✌
Slide 18
Slide 18 text
「でも最近間違って新しくアカ ウントを作られる利用者さん が増えているようです...」
Slide 19
Slide 19 text
「でも最近間違って新しくアカ ウントを作られる利用者さん が増えているようです...」 To Be Continued
Slide 20
Slide 20 text
THANK YOU (自己紹介) ● 今中 幸太 ● 株式会社オトバンク 所属 ○ 2019/09 ~ ○ audiobook.jp アプリ (React Native) ● Android開発者歴10年目 ● カンファレンス誘導員 ○ DroidKaigi (2015-2019) ○ iOSDC 2018, Builderscon, etc… ● @pside, GitHub: keima