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

Question

问题

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

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

一些背景信息

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

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

对于 iOS 12 自动填充，现在应该也将“保存密码”功能引入移动应用程序（以前仅是网站），密码的配置不同。

密码 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'}
/>

在移动条款中，我确保将关联域作为一项权利启用。 （通过 Apple 开发者网站完成）。

在我的域（例如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 钥匙串）。

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

https://imgur.com/nSEmy7V

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

Answer 1

搞定了！以下是我为使其正常工作所做的工作。

步骤

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

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

1. 在移动配置中启用关联域作为一项权利
2. 在 XCode 中，将关联域设置为指向将托管 apple-app-site-association 文件的站点。

webcredentials:www.example.com

不要包含 URL 的 https 部分，并且不要包含结尾，即 /apple-app-site-association

4. 将 apple-app-site-association 文件放在您网站的根目录“/”中，并确保它是公开可用的。您可以在任何浏览器中输入您的网站的完整网址并以如下结尾进行检查：

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

您也可以在 YouTube URL 和 Amazon URL 上试用，以查看他们的 apple-app-site-association 文件作为示例。

6. 从手机中删除您以前的版本并重新安装带有这些更改的新版本，Apple 应该会立即建立连接。然后，iOS 的“保存密码”弹出窗口会提示您使用新凭据首次成功登录。大功告成！

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

我犯的错误：

我犯了一些错误，希望您可以通过阅读以下内容来避免这些错误。

1. 托管 apple-app-site-association 的网站必须完全遵守 Apple 的指导方针。我最初使用托管在 AWS 上的临时站点时犯了一个错误。此 AWS URL 同时提供了 http 和 https。苹果不喜欢这样。当我切换到仅托管 https 的网站时，它运行良好。这对于“保存密码”的工作至关重要，否则 Apple 没有将您的凭据保存到其中的密钥（它使用您的网站域作为将凭据保存到 Apple 钥匙串中的密钥）。
2. apple-app-site-association 语法很重要。即使其中一个特殊符号关闭，它也不起作用。在我上面的原始文件中，仔细查看封装应用程序 ID 的双引号：

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

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

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

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

需要澄清的是，此解决方案适用于只是应用程序的应用程序。不需要登录的网站，不需要将网站的凭据带入应用程序，也不需要 webview 登录设置。当我浏览有关自动填充的文档时，这并不明显。托管 apple-app-site-association 的网站不需要任何登录或任何类似的东西，它可以只是一个带有一些信息的普通网站（可能是关于应用程序或制作应用程序的公司） .