翻译自:Faster Logins With Password AutoFill in iOS 11
iOS11 中的 Password AutoFill
有账户功能的App通常需要先登录来获取个人信息。如果用户记得他们的账号密码,通过输入登录,一般需要花费几秒钟时间;否则他们可能需要切换到一些密码管理器(例如:iCloud Keychain、1Password、LastPass等),把账号密码粘贴出来。不消多说,这会拖慢用户交互速度,一些人会直接放弃使用。
我们通过一些尝试来改善这种体验。例如,1Password 为开发者提供一个不错的 extension。自 WWDC2014 起,iOS还提供了另一个解决方案 Safari Shared Credentials(Safari 共享凭证)。
不过 iOS11 新推出一种更加无缝的简化工作流程的方式:新的 Password AutoFill API。相较之前,用户更容易使用,而且开发人员更容易实现。
介绍
Password AutoFill 允许用户使用键盘上方的 QuickType bar 直接在应用程序里导入账号密码。更短的登录时间可以增加你的用户留存率和应用好感度。本篇文章之后,你能够将登录流程缩短为几秒。
应用中实现 Password AutoFill 需要两步:
显示 带有🔑的 QuickType bar 让用户手动选择正确的登录
选择性地将 APP 和网站链接在一起,这样 QuickTyep bar 就可以提示用户正确的登录,从而进一步加快登录流程。
QuickType Bar
第一步之后用户可以点击🔑按钮并从列表中选择正确的登录。创建 QuickType bar 唯一需要的属性是在 UITextField 或UITextView 对象中设置 textContent 属性。自定义的控件同理。
应该把这个属性添加到 email 或密码控件中。如下:
usernameTextField.textContentType = UITextContentTypeUsername;
passwordTextField.textContentType = UITextContentTypePassword;
有密码存在 keychain 中的时候,所有 iOS11 的设备上都将显示 QuickType bar。如果你在模拟器上进行测试时看不到 QuickType bar ,那很可能是因为你的 keychain 是空的。
用户点击🔑按钮后,进行 Touch ID 身份验证,会显示所有保存的账号密码。用户可以从中进行搜
索和选择,点击相应的账号信息,就会自动填充。
如你所见,从 keychain 中寻找的过程是比较慢的。接下来我们来看怎么省去这个步骤,提升用户体验。
证书建议
你也可以告诉 iOS 与你的 APP 关联的网站。如果 keychain 中包含 iOS 或 macOS 通过 Safari 保存的证书。那么就会推荐相应的证书,从而省去手动搜索的麻烦。
若你已经在用 Universal Links , 你的 APP 应该在 QuickType bar 中 显示你的网站的证书。iOS 知道了关联网站后,就会显示推荐证书。
另一种不用 Universal Links 将 APP 和 网站链接的方法,是一种与 web 证书相关的域服务。
切换到 Xcode 项目设置, Capabilities 选项,打开 Associated Domains。添加你的网站 URL。假设你的网站域名为 amazingwebsite.com:列出的域名应该是 web credentials:amazingwebsite.com。
以上就是 Xcode 项目中的配置。 iOS现在已经知道你关联的网站了。最后一步是向你的服务器上传一个文件,这样 iOS 就可以验证你关联的网站是否可用(这是为了网址恶意软件从其他网站窃取证书)。
新建一个文本文件(如果你愿意, 可以在你的 Xcode 项目之外),命名为 apple-app-site-association。这是 iOS 在服务器上使用安全连接查找的标准名称(必须在服务器上设置SSL)。文件内容也是标准格式,只需 copy 下面代码。
{
"webcredentials" : {
"apps" : ["1EMDW8DVTP.com.patrickbalestra.AutoFill"]
}
}
你应该将 apps 数组中的字符串改成你的 Team ID (这可以在 developer portal 中找到),然后接上应用的 bundle ID。创建一个名为 .well-known 的文件夹在服务器的根目录并上传文件。
为确保事如所料,在浏览器中检查文件是否存在于指定地址。这是我的地址: https://patrickbalestra.com/.well-known/apple-app-site-association。
若你看到的 JSON 文件,如下图,就设置好了。
启动 APP 发现 QuickType bar 显示你的网络证书,此时你就可以单击登录了。
更多关于 Password AutoFill,请查阅 Session 206 at WWDC 2017。