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

IT技术 ios reactjs xcode react-native
2021-05-03 10:18:40

问题

我使用的是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

任何想法我做错了什么,或者如果我错过了一步?

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 的结尾

  1. 将 apple-app-site-association 文件放在您网站的根目录“/”中,并确保它是公开可用的。您可以在任何浏览器中通过输入您的网站完整网址来检查这一点,如下所示:
https://www.example.com/apple-app-site-association 

您也可以在 YouTube URL 和 Amazon URL 上尝试此操作,以查看其 apple-app-site-association 文件为例。

  1. 从手机中删除您以前的版本并重新安装具有这些更改的新版本,Apple 应该几乎立即建立连接。然后应该会提示您使用新凭据首次成功登录,并弹出 iOS 的“保存密码”。你完成了!

现在我的用户可以使用自动填充登录,最好的部分是 iOS 提供了使用触摸 ID、面部 ID 或密码自动填充的功能,具体取决于用户手机的设置。因此,他们可以使用触控 ID 甚至面容 ID 登录,而无需在 RN 应用程序中进行额外工作即可使其正常工作。更好的是,如果他们将其保存到 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 的网站不需要任何登录名或任何类型的东西,它可以只是一个带有一些信息的普通网站(可能是关于应用程序或制作应用程序的公司) .