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

wpx232ag  于 2022-12-03  发布在  React
关注(0)|答案(1)|浏览(184)

问题

我使用的是 React Native 0.59.9(这是本文发表时的最新版本),我希望iOS 12的自动填充功能能够在我的移动的应用程序中显示一个登录界面,并为新用户保存密码。按照我的设置,该应用程序显示的键盘带有自动填充选项,但不会弹出“保存密码”来保存新用户的凭据。
键盘自动填充现在的样子:https://imgur.com/6gVpGbU

一些背景信息

在React Native的文档中,他们现在在TextInput组件中公开了textContentType。要设置它用于iOS 11自动填充,用户名textContentType将被设置为'username',密码textContentType将被设置为'password'。
RN文本内容类型文档: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'}
/>

在移动的供应,我已经确保启用关联域作为一个权利。(通过苹果开发者网站完成)。
在我的域(例如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
"你知道我做错了什么吗,或者我错过了什么“

am46iovg

am46iovg1#

让它工作了!下面是我做了什么让它工作。

步骤

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.启用关联域作为移动的供应中的授权
1.在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.从手机中删除以前的版本,并重新安装包含这些更改的新版本,苹果应该会立即建立连接。然后,iOS会弹出“保存密码”提示,提示您使用新的凭据首次成功登录。操作完成!
现在,我的用户可以通过自动填充功能登录,最棒的是,iOS可以根据用户的手机设置,使用触摸ID、面部ID或密码进行自动填充。因此,他们可以使用触摸ID甚至面部ID登录,而不需要在RN应用程序中进行额外的操作。更棒的是,如果他们将其保存到iCloud,他们可以移动到另一个设备,并且仍然能够使用相同的凭据登录到应用程序。

我犯的错误:

我犯了一些错误,希望你能通过阅读以下内容来避免这些错误。
1.托管apple-app-site-association的网站必须完全遵守苹果的指导方针。我犯了一个错误,最初使用了一个托管在AWS上的临时网站。这个AWS URL同时提供http和https。苹果不喜欢这样。当我切换到一个只托管https的网站时,它运行得很好。这对“保存密码”的工作至关重要。否则,Apple没有密钥来保存您的凭证(它使用您的网站域作为密钥来存储Apple钥匙串中的凭证)。

  1. apple-app-site-association语法很重要。即使有一个特殊符号是关闭的,它也不会工作。在我上面的原始文件中,仔细看看封装app id的双引号:
{
    "webcredentials": {
        "apps": [
            “ZT978FY6AB.com.company.my.app”,
        ]
    }
}

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

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

1.在RN方面,你所需要的只是textContentType={'username'}和textContentType={'password'}。我的错误是认为需要'newPassword'来提示'保存Password'对话框。不。'newPassword'是自动填充用来向新用户建议强密码的。本质上,只在用户注册的表单上使用'newPassword'。不用于登录表单。
需要澄清的是,这个解决方案适用于那些仅仅是应用程序的应用程序。不需要登录网站,不需要从网站将凭据带入应用程序,也不需要webview登录设置。当我阅读关于自动填充的文档时,这一点并不明显。托管apple-app-site-association的网站不需要任何登录或类似的东西。它可以只是一个普通的网站,里面有一点信息(可能是关于应用程序或制作应用程序的公司)。

相关问题