NativeScript Angular iOS实现iCloud钥匙串账号保存与自动填充

在NativeScript Angular中实现iCloud钥匙串账号密码保存、自动填充能力，可以直接对接iOS原生AutoFill Credential Provider框架，和你已接入的Touch ID/Face ID生物识别能力完全兼容，具体落地步骤如下：

前置工程配置 #

• 打开iOS原生工程，在Signing & Capabilities页添加两个能力：
  • 开启Keychain Sharing，勾选iCloud同步选项，保证存入的凭证可以跨设备同步到用户iCloud
  • 添加Associated Domains，配置项填写webcredentials:你持有并可控的根域名
• 在你刚才配置的域名的.well-known目录下，放置无后缀的apple-app-site-association校验文件，文件内声明你的App Team ID、Bundle ID，iOS会在App首次安装时自动拉取这个文件，校验你的App对该域名下凭证的读写权限，文件返回头的Content-Type必须为application/json。
• 给登录页的输入框设置正确的系统内容类型：用户名输入框对应UITextContentTypeUsername，密码输入框对应UITextContentTypePassword；如果是首次登录/注册场景的新密码输入框，设置为UITextContentTypeNewPassword，iOS只有识别到对应类型的输入框，才会触发钥匙串的系统交互。

首次登录保存凭证逻辑 #

用户首次手动输入账号密码登录成功时，不需要自定义弹窗询问是否保存到钥匙串——只要输入框的内容类型配置正确，iOS会自动弹出系统级的保存凭证弹窗，样式和参考截图完全一致，用户选择确认后系统会自动把账号密码加密存入iCloud钥匙串，不需要额外写存储逻辑。
如果需要自定义存储逻辑，可以直接调用iOS原生Security框架的SecItemAdd接口写入凭证，也可以使用封装好的@nativescript/secure-storage插件，开启插件的iCloud同步开关即可快速实现凭证读写，不用自己写原生桥接代码。

后续登录自动填充逻辑 #

• 配置完成后，用户后续打开登录页点击输入框时，iOS键盘上方会自动展示钥匙串中已保存的对应账号选项，用户完成Face ID/Touch ID验证后，系统会自动把账号密码填充到对应输入框，不需要手动写取值、赋值的逻辑。
• 你可以和已有的生物识别能力做联动优化：App启动时先检测本地钥匙串中是否存在已保存的登录凭证，如果存在直接调起你已经接入的指纹/面容认证接口，用户验证通过后直接从钥匙串读取凭证调用登录接口，不需要用户再点击输入框选择填充，体验更流畅。

注意事项 #

• 不要用自定义弹窗替代系统的保存密码弹窗，系统弹窗的用户信任度更高，也不会出现权限兼容问题
• 调试阶段如果修改了apple-app-site-association文件，需要卸载重装App才会触发iOS重新拉取校验文件，否则配置不会生效
• 钥匙串存储的凭证是系统端到端加密的，不需要额外做加密处理，安全性符合苹果的隐私规范

内容的提问来源于stack exchange，提问作者Prabhas Kumra