Compose におけるパスワード自動入力とパスワード保存

Transcript

1. Compose におけるパスワード自動入力とパスワード 保存 Compose におけるパスワード自動入力とパスワード保存 Sansan×DMM.com Android Tech Talk 1
2. 話すこと 1. Jetpack Composeでの自動入力の実装方法 自動入力とは？ 従来のXML方式との違い 自動入力の種類（保存済みパスワード・新規パスワード） 2. パスワード保存の罠と解決策 Compose におけるパスワード自動入力とパスワード保存 Sansan×DMM.com Android Tech Talk 2
3. 話さないこと パスワードマネージャーの導入方法 Compose におけるパスワード自動入力とパスワード保存 Sansan×DMM.com Android Tech Talk 3
4. 登壇者情報 トニオ（@tonionagauzzi） Androidエンジニア サイボウズ株式会社 kintone開発チーム ブログ書くのが趣味 Compose におけるパスワード自動入力とパスワード保存 Sansan×DMM.com Android Tech Talk 4
5. 1. Jetpack Composeでの自動入力の実装方法 Compose におけるパスワード自動入力とパスワード保存 Sansan×DMM.com Android Tech Talk 5
6. 自動入力とは？ パスワード入力欄にカーソルを当てると自動でパスワードを入れてくれる機能 ユーザーの入力を効率化、セキュリティ面も強化できる Compose におけるパスワード自動入力とパスワード保存 Sansan×DMM.com Android Tech Talk 6
7. Google パスワードマネージャーによるパスワード自動入力 Compose におけるパスワード自動入力とパスワード保存 1 Sansan×DMM.com Android Tech Talk 7
8. Google パスワードマネージャーによる強力なパスワードの自動生成 Compose におけるパスワード自動入力とパスワード保存 2 Sansan×DMM.com Android Tech Talk 8
9. XML方式での実装方法 <EditText android:id="@+id/password" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textPassword" android:autofillHints="password" /> android:autofillHints プロパティで簡単に実装可能 Compose におけるパスワード自動入力とパスワード保存 Sansan×DMM.com Android Tech Talk 9
10. Compose での実装方法 Compose UI 1.8.0以降がおすすめ 2025/4/23 に正式リリース // build.gradle.kts(:app) dependencies { implementation("androidx.compose.ui:ui:1.8.0") } 1.7.x以下では AutofillType （deprecated）を使う必要あり 実験的APIで正常に機能しないことも Compose におけるパスワード自動入力とパスワード保存 Sansan×DMM.com Android Tech Talk 10
11. Composeでの自動入力実装 // SomeComposable.kt Column { TextField( value = username.value, onValueChange = {username.value = it}, modifier = Modifier.semantics { contentType = ContentType.Username } ) TextField( value = password.value, onValueChange = {password.value = it}, modifier = Modifier.semantics { contentType = ContentType.Password } ) } 公式ドキュメントを参考に、 Modifier.semantics { contentType = } で実装 Compose におけるパスワード自動入力とパスワード保存 Sansan×DMM.com Android Tech Talk 11
12. 保存済みパスワードの自動入力 ログイン画面などのユースケース ContentType.Username + ContentType.Password の組み合わせ ユーザー名に応じたパスワードを自動入力 Compose におけるパスワード自動入力とパスワード保存 Sansan×DMM.com Android Tech Talk 12
13. 新しいパスワードの自動生成 パスワード再設定画面などのユースケース ContentType.NewPassword を使用 強力なパスワードを自動生成して提案 TextField( value = newPassword.value, onValueChange = {newPassword.value = it}, modifier = Modifier.semantics { contentType = ContentType.NewPassword } ) Compose におけるパスワード自動入力とパスワード保存 Sansan×DMM.com Android Tech Talk 13
14. パスワード保存機能の実装 公式ドキュメントでは autofillManager?.commit() を使う方法が紹介されている val autofillManager = LocalAutofillManager.current 〜省略〜 Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") } Compose におけるパスワード自動入力とパスワード保存 Sansan×DMM.com Android Tech Talk 14
15. 2. パスワード保存の罠と解決策 Compose におけるパスワード自動入力とパスワード保存 Sansan×DMM.com Android Tech Talk 15
16. AutoFillManagerの罠 autofillManager?.commit() を呼んでもパスワード保存ダイアログが表示されない！ Compose におけるパスワード自動入力とパスワード保存 Sansan×DMM.com Android Tech Talk 16
17. 原因（厳しい条件） Composeのパスワード自動保存には厳しい条件がある： 1. NewUsernameとNewPasswordの両方が1つのComposable内に存在 2. ユーザーが1.の両方を操作した これらを満たさない場合、パスワード保存ダイアログは表示されない。 参考: Google Issue Tracker Compose におけるパスワード自動入力とパスワード保存 Sansan×DMM.com Android Tech Talk 17
18. 解決策：CredentialManagerを使う Button(onClick = { coroutineScope.launch { val credentialManager = CredentialManager.create(context) val request = CreatePasswordRequest(username, newPassword.value) credentialManager.createCredential( request = request, context = context, ) } }) { Text("Reset credentials") } Compose におけるパスワード自動入力とパスワード保存 Sansan×DMM.com Android Tech Talk 18
19. CredentialManagerの注意点 android.credentials (API Level 34以上) androidx.credentials (下位互換性あり) API Level 33以下をサポートする場合は androidx.credentials を使用 // build.gradle.kts(:app) dependencies { implementation("androidx.credentials:credentials:1.5.0") // optional - needed for credentials support from play services, for devices running // Android 13 and below. implementation("androidx.credentials:credentials-play-services-auth:1.5.0") } Compose におけるパスワード自動入力とパスワード保存 Sansan×DMM.com Android Tech Talk 19
20. まとめ Compose UIでの自動入力は contentType で簡単に実装可能 パスワード保存は AutofillManager より CredentialManager が確実 適切な実装でユーザー体験を向上させよう Compose におけるパスワード自動入力とパスワード保存 Sansan×DMM.com Android Tech Talk 20
21. 参考リンク スマホでパスワード管理ができる Google パスワード マネージャーの使い方 Composeでのテキスト自動入力 Autofill フレームワーク CredentialManager API Compose におけるパスワード自動入力とパスワード保存 Sansan×DMM.com Android Tech Talk 21