How to get iOS 12 Autofill to ask to save password in React Native app?

Question

PROBLEM

I'm on React Native 0.59.9 (latest at the time of this post), and have a login screen in my mobile app that I would like iOS 12's autofill feature to pick up and save the password for a new user. With what I've set up, the app shows the keyboard with the autofill option but never pop's up the 'Save Password' for a new user's credentials.

What the keyboard autofill looks like right now: https://imgur.com/6gVpGbU

SOME BACKGROUND INFO

In React Native's documentation, they now expose textContentType in the TextInput component. To set it up for iOS 11 autofill, the username textContentType would be set to 'username' and the password textContentType would be set to 'password'.

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

For iOS 12 autofill, which is supposed to introduce the 'Save Password' feature to mobile app's as well now (previously was websites only) the configuration is different for the password.

The password textContentType would be set to 'newPassword' instead. This isn't working though, in fact it seems to be buggy and breaks the app as it suggests username's for the password field with this set...

Implementation

What I've tried to do to implement iOS 12's autofill feature in React Native:

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

In the mobile provision, I've made sure to enable Associated Domains as an entitlement. (Done through Apple Developer website).

In my domain (for example www.mydomain.com), the file apple-app-site-association (with no extension) that has the following has been put into the root directory and is publicly available (https supported).

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

In XCode, I've set up the Associated Domains to point to that domain. Example:

webcredentials:www.mydomain.com

OUTPUT

The expected output of implementing this is that iOS pops up the 'Save Password' dialog when a new user enter's their credentials.

What the pop up dialog should look like: https://imgur.com/GH4hfP8

Instead, it never pops up. The user just heads straight into the app upon successful login without the dialog ever appearing for saving the password. This essentially means that none of my users can save their credentials to the password manager of their choice (not even iCloud keychain).

Since this feature does not seem to be testable on a simulator, I've been testing it on an iPhone 7 Plus with iOS 12.3.1 installed and autofill enabled in the settings as can be seen in the below image.

https://imgur.com/nSEmy7V

Any ideas what I'm doing wrong, or if I'm missing a step?

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

2. 在移动设置中启用关联域作为权利
3. 在 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 或密码自动填充，具体取决于用户手机的设置。因此，他们可以使用触控 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",
        ]
    }
}

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

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