[iOS 11] 新機能の Password AutoFill を実装する

パスワードの自動入力

iOS 11 から、UITextField や UITextView に対して ユーザ名パスワード を自動入力できるようになりました。

1

今回はこの機能の実装方法をご紹介します。

適切な Content Type の指定

UITextField や UITextView は textContentType プロパティを持っています。
このプロパティは UITextContentType という構造体ですが、iOS 11 ではこの構造体に以下の 2 つの定数が追加されました。

  • username
  • password

Password AutoFill を使用するためには textContentType にこれらを指定する必要があります。

usernameField.textContentType = .username
passwordField.textContentType = .password

この設定は Storyboard で行うこともできます。

2

Credential の配置

本機能を利用するためには Web サーバーに Credential を配置する必要があります。
ここで言う Credential とは認証情報が書かれた JSON ファイルのことです。
正しい Credential を配置することで、アプリのテキスト入力時にキーボード上部に表示される QuickType バー に、その Web サイトにログインするためのユーザ名とパスワードをワンタッチで入力するボタンが表示されます。

3

配置する Credential はファイル名を apple-app-site-association とし、以下のフォーマットで記述します。

{
    "webcredentials": {
        "apps": [ "7P3C7G39E9.com.ketanaka.Sample" ]
    }
}

7P3C7G39E9 は Team ID, com.ketanaka.Sample はアプリの Bundle Identifier です。
Team ID はデベロッパーサイトの App IDs からも確認することができます。

4

このファイルを Web サーバーに配置します。
ルート直下に .well-known というディレクトリを作成し、その下に配置しなければなりません。
今回は S3 上にアップロードしました。
URL は以下の通りです。(現在は存在しません)

https://ketanaka-sample.s3-ap-northeast-1.amazonaws.com/.well-known/apple-app-site-association

apple-app-site-association の配置に関しては以下の記事をご覧ください。

Universal Linksを試してみました。関連づけファイル(apple-app-site-association)はS3に置きました。| Developers.IO

アプリ側の設定

CapabilitiesAssociated Domains を ON にします。

5

Domains に Web サイトのドメインを設定します。
今回の場合は Credential を配置した ketanaka-sample.s3-ap-northeast-1.amazonaws.comwebcredentials: のあとに追記します。

設定後はデベロッパーサイトで Associated Domains が Enabled になっていることを確認しましょう。

6

パスワードの追加

本機能では iCloud キーチェーンに保存されているユーザ名とパスワードを利用しますが、iPhone 上で新たにこれらを追加することも可能です。

設定 アプリを開き アカウントとパスワード をタップします。

7

AppとWebサイトのパスワード をタップします。

8

パスワードを追加 をタップします。

9

必要な情報を入力します。
今回のサンプルでは Webサイトketanaka-sample.s3-ap-northeast-1.amazonaws.com を指定しました。

10

パスワードが登録されました。

11

Safari 利用中は Web サイトのログインページでキーボードの パスワード をタップすることによってパスワードを追加することができます。

12

以上で完了です。
上手く設定できていれば以下のように UITextField にフォーカスが当たったときに QuickType バーにパスワード入力用のボタンが出現し、タップすることで適切なユーザ名とパスワードが自動で入力されます。

1

まとめ

Password AutoFill を利用するためには以下が必要です。

  • テキスト入力フォームに適切な Content Type を指定する
  • Web サーバーに Credential を配置する
  • Capabilities の Associated Domains を有効にする

Password AutoFill によって、アプリ内でユーザ名とパスワードを自動入力できるようになりました。
これらの入力はユーザにとってかなりの手間となるので、UX 向上のために活用してみてはいかがでしょうか。

リンク

ミレニアム・ファルコン製作日記 #87

87 号 表紙

mfd_87_1

パーツ

mfd_87_2

mfd_87_3

mfd_87_4

成果

mfd_87_5

今回の作業は以下の 2 つでした。

  • 着陸灯を取り付ける
  • 着陸灯をテストする

配線を繋げてカチッってしました。
着陸灯は着陸脚が降りているときだけ点灯するようです。
点灯中の写真は一人で撮影するのが難しかったので、またの機会に。

それではまた次回。

May the Force be with you!