iOSアプリのPassword AutoFillでユーザーとパスワードの入力画面を分けるには

前回の投稿に引き続き、iOSアプリのPassword AutoFillに関する投稿です。

一般的なログイン画面の場合

一般的なログイン画面を作ろうとすると、ユーザー（メールアドレス等）とパスワードを入力するフィールドが並んだこんな画面になると思います。

この場合、ユーザーとパスワードの UITextField の textContentType をそれぞれ .username, .password にしておきます。そうすることで Password AutoFill 機能により Keychain 等のパスワードマネージャーから自動入力できるようになります。

具体的には、キーボードの Quick Type バーのところから自動入力するログイン情報を選択するという操作を行います。この場合、ユーザーの方で自動入力が動作すると、同時にパスワードの方も入力されるような動作となります。

また、上記のとおり設定しておくと、パスワードマネージャーに保存されていない新規のユーザー/パスワードでログインした場合に、ログイン後の画面にログイン情報を保存するためのアクションシート（下図）が自動で表示されます。

ユーザーとパスワードの入力画面を分けた時の問題点

デザインやログインの仕様の都合で、ユーザーとパスワードの入力画面を分けたい場合があります。

これを単純に実装すると、以下の２つの問題が起きてしまいます。

• ユーザー入力とパスワード入力のそれぞれの画面で自動入力の操作を行う必要がある
• 新規のユーザー/パスワードでログインした場合にログイン情報を保存するためのアクションシートが表示されない

問題点の回避策

結論から言うと、それぞれの画面にユーザー/パスワード両方の UITextField を配置しておくことで、これらの問題を回避できます。以下、画面ごとの詳細です。

ユーザー入力画面

画面中にひっそりとパスワード入力の UITextField を見えないように忍ばせておきます。

ただ、以下のような普通の方法で隠してしまうと、パスワード入力フィールドはいないものと見なされてしまうようで、ユーザーの自動入力をしても、パスワード入力フィールドにパスワードが自動入力されません。

• passwordField.isHidden = true で隠す
• passwordField.alpha = 0 で隠す
• passwordField.isEnabled = false でユーザー操作を無効化する

ということで私は次のように設定しました。

• passwordField.borderStyle = .none で枠を見えないようにする
• passwordField.textColor = .clear で自動入力されたパスワードを見えないようにする
• passwordField.isUserInteractionEnabled = false でユーザー操作を無効化する

こうして自動入力されたパスワードを、次のパスワード入力画面に引き継ぐようにします。

パスワード入力画面

ユーザー入力画面で自動入力されたパスワードを、パスワード入力画面に引き継げばパスワードの自動入力操作をするのを省略できます。

そして、この画面でもユーザー/パスワード両方の入力フィールドを用意します。この例では前の画面で入力されたユーザー情報を表示しているため、これを UILabel ではなく、.username タイプを指定した UITextField にしています。

• usernameField.borderStyle = .none で枠を見えないようにする
• usernameField.isUserInteractionEnabled = false でユーザー操作を無効化する

参考文献

• Apple Developer / Password AutoFill
• WWDC2017 / Introducing Password AutoFill for Apps