问题

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自动填充功能，该功能现在也应该在移动应用程序中（以前仅限网站）引入“保存密码”功能，而密码的配置有所不同。

密码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 Developer网站完成）。

在我的域（例如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

让它正常工作！以下是我为使其正常工作所做的事情。

步骤

在应用中，代码中的用户名和密码字段如下（请注意textContentType）

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

启用关联域作为移动服务中的权利
在XCode中，将“关联域”设置为指向将承载apple-app-site-association文件的站点。

webcredentials:www.example.com

不不包括URL的https部分，不不包括结尾，即/ apple-app-site-association

将apple-app-site-association文件放置在网站的根目录“ /”中，并确保该文件可公开使用。您可以在任何浏览器中检查此情况，方法是输入您网站的完整URL，其结尾为：

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

您也可以在YouTube URL和Amazon URL上进行尝试，以查看其apple-app-site-association文件为例。

从电话中删除以前的版本，并通过这些更改重新安装新的版本，Apple应该几乎立即建立连接。然后，将使用iOS“保存密码”弹出窗口提示您首次成功使用新凭证成功进行新登录。完成了！

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

我犯的错误：

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

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

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

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

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

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

需要澄清的是，此解决方案适用于仅仅是应用程序的应用程序。不需要登录的网站，不需要将凭据从网站转移到应用程序中，也不需要Webview登录设置。当我浏览有关自动填充的文档时，这并不明显。托管apple-app-site-association的网站无需登录或任何种类的东西，它可以是一个带有一些信息的纯色网站（可能与应用程序或制造该应用程序的公司有关）

如何获取iOS 12自动填充以要求在React Native应用中保存密码？

问题

某些背景信息

实施

输出

1 个答案:

步骤

我犯的错误：