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

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

键盘自动填充现在的样子：

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

RN textContentType文档：

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

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

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

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

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

输出 实现此功能的预期结果是，当新用户输入其凭据时，iOS会弹出“保存密码”对话框

弹出对话框应该是什么样子的：

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

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

---

你知道我做错了什么，或者我错过了一步吗？成功了！下面是我为让它工作所做的

台阶

在应用程序中，在代码中，用户名和密码字段如下所示（注意textContentType）

不包括URL的https部分，并且不包括将成为/apple应用程序站点关联的结尾

将apple app site association文件放在您网站的根目录“/”中，并确保其公开可用。您可以在任何浏览器中通过输入您的网站完整url来检查这一点，其结尾如下：

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

从手机上删除您以前的版本，并使用这些更改重新安装新版本，苹果应该立即建立连接。您第一次成功使用新凭据进行新登录时，应弹出iOS“保存密码”提示。你完了 现在，我的用户可以使用autofill登录，最棒的是，iOS根据用户的手机设置，提供了使用触摸ID、面部ID或密码进行自动填充的功能。因此，他们可以使用触摸ID甚至面部ID登录，而无需在RN应用程序中进行额外的工作即可使其正常工作。更好的是，如果他们将其保存到iCloud，他们可以移动到另一个设备，并且如果他们愿意，仍然可以使用相同的凭据登录到应用程序

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

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

苹果应用程序站点关联语法很重要。即使其中一个特殊符号关闭，它也不会工作。在我上面的原始文件中，仔细查看封装应用程序id的双引号：

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

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

在RN端，您只需要textContentType={'username'}和textContentType={'password'}。我的错误是认为需要“newPassword”来提示“保存密码”对话框。没有“新密码”由autofill用于向新用户建议强密码。本质上，只在用户正在进行注册的表单上使用“newPassword”。不适用于登录表单

---

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

感谢Yusuf的精彩概述！我正在尝试使用与您在iOS中为用户保存用户名和密码相同的功能设置我的应用程序，但我有一个快速的问题，因为我有点迷路了。我正在使用我在Heroku上托管的节点RESTAPI后端。我会使用我的Heroku URL的基础，例如www.myapp.h吗

webcredentials:www.mydomain.com

<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

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

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

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