如何让iOS 12自动填充请求在React本机应用程序中保存密码？

Question

我使用的是React Native 0.59.9（本文发布时最新版本），在我的移动应用程序中有一个登录屏幕，我希望iOS 12的自动填充功能能够为新用户获取并保存密码。根据我的设置，该应用程序会显示带有自动填充选项的键盘，但不会弹出新用户凭据的“保存密码”。

键盘自动填充现在的样子：https://imgur.com/6gVpGbU

在React Native的文档中，它们现在在TextInput组件中公开textContentType。要为iOS 11自动填充设置它，用户名textContentType将设置为“username”，密码textContentType将设置为“password”。

RN textContentType文档：https://facebook.github.io/react-native/docs/textinput#textcontenttype

对于iOS 12 autofill，它应该将“保存密码”功能也引入到移动应用程序中，现在（以前仅限于网站），密码的配置有所不同。

密码textContentType将改为“newPassword”。这是不工作，但事实上，它似乎是错误的，并打破了应用程序，因为它建议用户名的密码字段与此设置。。。

我试图在React Native中实现iOS12的自动填充功能：

<TextInput
  placeholder={'Enter username'}
  autoCapitalize={'none'}
  autoCorrect={false}
  textContentType={'username'}
/>
<TextInput
  placeholder={'Enter password'}
  autoCapitalize={'none'}
  autoCorrect={false}
  secureTextEntry={true}
  textContentType={'newPassword'}
/>

在移动设备中，我已经确保启用关联域作为一种权利。（通过苹果开发者网站完成）。

在my domain（例如www.mydomain.com）中，包含以下内容的文件apple app site association（不带扩展名）已放入根目录中，并可公开使用（支持https）。

{
    "webcredentials": {
        "apps": [
            “ZT978FY6AB.com.company.my.app”,
        ]
    }
}

在XCode中，我设置了关联的域以指向该域。例子：

webcredentials:www.mydomain.com

实现这一点的预期结果是，当新用户输入他们的凭据时，iOS弹出“保存密码”对话框。

弹出对话框应该是什么样子：https://imgur.com/GH4hfP8

相反，它永远不会弹出。用户只要在成功登录后直接进入应用程序，就不会出现保存密码的对话框。这本质上意味着我的任何用户都不能将其凭据保存到他们选择的密码管理器（甚至连iCloud keychain都不能）。

由于这项功能似乎无法在模拟器上测试，因此我一直在安装了iOS 12.3.1并在设置中启用自动填充的iPhone7 Plus上进行测试，如下图所示。

https://imgur.com/nSEmy7V

知道我做错了什么吗，或者我错过了一步？

Answer 1

开始工作了！下面是我为让它工作所做的。

1. 在应用程序中，在代码中的用户名和密码字段如下（请注意文本内容类型）

<TextInput
 placeholder={'Enter username'}
 autoCapitalize={'none'}
 autoCorrect={false}
 textContentType={'username'}
/>
<TextInput
 placeholder={'Enter password'}
 autoCapitalize={'none'}
 autoCorrect={false}
 secureTextEntry={true}
 textContentType={'password'}
/>

webcredentials:www.example.com

不要在URL中包含https部分，也不要包含将成为/apple应用程序站点关联的结尾

https://www.example.com/apple-app-site-association 

你也可以在YouTube URL和Amazon URL上试试，以查看他们的苹果应用程序站点关联文件为例。

现在，我的用户可以使用autofill登录，最棒的是，iOS根据用户的手机设置，提供了使用触摸ID、面部ID或密码进行自动填充的功能。因此，他们可以使用触摸ID甚至面部ID登录，而无需在RN应用程序中进行额外的工作即可使其正常工作。更好的是，如果他们将其保存到iCloud，他们可以移动到另一个设备，并且如果他们愿意，仍然可以使用相同的凭据登录到应用程序。

我犯了一些错误，希望你能通过阅读下面的内容来避免这些错误。

1. 苹果应用网站协会所在的网站必须完全遵守苹果的指导方针。我犯了一个错误，最初使用的是AWS上托管的临时站点。此AWS URL同时提供http和https。苹果不喜欢这样。当我切换到一个只托管https的网站时，它工作得很好。这对于“保存密码”的工作至关重要，否则Apple没有将您的凭据保存到的密钥（它使用您的网站域作为将凭据保存到Apple密钥链中的密钥）

{
    "webcredentials": {
        "apps": [
            “ZT978FY6AB.com.company.my.app”,
        ]
    }
}

它们不是标准的双引号，这导致了一个苹果无法解析的文件。如果有疑问，请复制苹果在其文档页面中提供的内容，然后根据需要修改其内容。将其更改为正常的双引号，如下所示：

{
    "webcredentials": {
        "apps": [
            "ZT978FY6AB.com.company.my.app",
        ]
    }
}

需要澄清的是，此解决方案适用于仅为应用程序的应用程序。无需登录的网站，无需将凭据从网站带入应用程序，无需webview登录设置。当我阅读有关自动填充的文档时，这一点并不明显。主持苹果应用程序网站协会的网站不需要任何登录或类似的东西，它可以是一个简单的网站，包含一些信息（可能是关于应用程序或制造应用程序的公司的信息）。