如何获取iOS 12自动填充以要求在React Native应用中保存密码? [英] How to get iOS 12 Autofill to ask to save password in React Native app?

问题描述

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

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.

现在键盘自动填充的外观如下: https://imgur.com/6gVpGbU

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

在React Native的文档中，它们现在在TextInput组件中公开textContentType.要将其设置为适用于iOS 11自动填充，则将用户名textContentType设置为"username"，将密码textContentType设置为"password".

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文档: https://facebook.github.io/react-native/docs/textinput#textcontenttype

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

对于iOS 12自动填充功能，该功能现在也应该在移动应用程序中(以前仅限网站)引入保存密码"功能，而密码的配置有所不同.

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.

密码textContentType将改为设置为'newPassword'.但这不起作用，实际上它似乎有错误，并且由于建议使用此设置的密码字段使用用户名，因此该应用程序中断了.

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...

我为在React Native中实现iOS 12的自动填充功能所做的尝试:

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

在移动设置中，我确保启用关联域作为权利. (通过Apple Developer网站完成).

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

在我的域(例如www.mydomain.com)中，具有以下内容的文件apple-app-site-association(无扩展名)已放入根目录中，并且可公开使用(支持https).

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",
        ]
    }
}

在XCode中，我将关联域设置为指向该域. 示例:

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

webcredentials:www.mydomain.com

输出

实施此操作的预期结果是，当新用户输入其凭据时，iOS会弹出保存密码"对话框.

OUTPUT

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

弹出对话框应如下所示: https://imgur.com/GH4hfP8

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

相反，它永远不会弹出.用户只需在成功登录后直接进入应用程序，就不会出现用于保存密码的对话框.从本质上讲，这意味着我的用户都无法将其凭据保存到他们选择的密码管理器(甚至是iCloud钥匙串).

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).

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

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

有什么主意我在做错什么，或者我错过了一步吗?

推荐答案

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

Got it working! The following was what I did to get it working.

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

Do not include the https part of the URL, and do not include the end which would be /apple-app-site-association

1. 将apple-app-site-association文件放置在网站的根目录"/"中，并确保该文件可公开使用.您可以在任何浏览器中检查此情况，方法是输入您网站的完整URL，并以如下所示结尾:

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

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

You can try this out on the YouTube URL and Amazon URL as well to see their apple-app-site-association files as an example.

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

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

Now my users can login with autofill, and the best part is that iOS offers to autofill using touch ID, face ID or passcode depending on the user's phone's setup. So they can login using touch ID or even face ID with no extra work needed in the RN app to get this working. Better yet, if they save it to iCloud, they can move to another device and still be able to login to the app with the same credentials if they want to.

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

I made a few mistakes, hopefully you can avoid these by reading the following.

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

1. The website that hosts the apple-app-site-association has to adhere to Apple's guidelines fully. I made the mistake of initially using a temporary site hosted on AWS. This AWS URL provided both a http and https. Apple did not like this. When I switched over to a website that only hosted https it worked fine. This is critical for the 'Save Password' to work, otherwise Apple doesn't have a key to save your credentials to (it uses your website domain as the key to save the credentials to in the Apple keychain).
2. The apple-app-site-association syntax matters. If even one of the special symbols is off, it won't work. In my original file above take a close look at the double quotes encapsulating the app id:

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

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

They aren't the standard double quotes and this was resulting in a file that couldn't be parsed by Apple. When in doubt, copy the one that Apple provides in their documentation page and then modify it's contents as necessary. Changing it to the normal double quotes like below fixed that:

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

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

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

Something to clarify, this solution works for apps that are just apps. No website with a login required, no bringing over credentials from a website into the app needed, and no webview login setups necessary. This was not apparent when I was going through documentation about autofill. The website that hosts the apple-app-site-association does not need to have any login or anything of the kind, it can just be a plain website with a bit of information (possibly about the app or the company that makes the app).

这篇关于如何获取iOS 12自动填充以要求在React Native应用中保存密码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！