如何在 iOS 的 Ionic 电容器中打开登录表单的 webview 自动完成功能? [英] How do I turn on the webview autocomplete for an login form in Ionic's capacitor in iOS?

问题描述

我想知道如何为 Capacitor 中的登录表单启用自动完成功能(或者如果可能的话).我正在使用离子反应.如果在 iOS 上的 Safari 中访问页面，即使您将其固定到主屏幕，它也可以工作.但是，如果您将 Web 应用程序捆绑在 Capacitor 中，则自动完成功能就不存在了.这是登录表单的代码:

loginAndCloseModal({e, emailValue, passwordValue})}><离子列表><离子项目><IonLabel position="stacked">电子邮件</IonLabel><IonInput autocomplete="username" name="email" value={emailValue} onIonChange={e =>setEmail(e.target.value)}></IonItem><离子项目><IonLabel position="stacked">密码</IonLabel><IonInput autocomplete="current-password" name="password" type="password" value={passwordValue} onIonChange={e =>setPassword(e.target.value)}></IonItem>{ errorMessage &&<离子项目><IonNote color="danger">{errorMessage}</IonNote></IonItem>}</IonList><IonButton class="login-button" expand="block" type="submit" disabled={authLoading}>Login</IonButton></表单>

我也尝试过设置 autocomplete="on" 并且没有用.Apple 的文档建议使用上面发布的值:

这是 Capacitor 中登录表单的一个版本:

注意键盘上方的密码选项不见了.这是为什么?

这里是我项目的相关依赖:

"@capacitor/cli": "^1.2.1","@capacitor/core": "^1.2.1","@capacitor/ios": "^1.2.1","@ionic/react": "^4.11.2","@ionic/react-router": "^4.11.2",反应":^ 16.8.6"，"react-dom": "^16.8.6",

我使用的是 iOS 12.4.2 版

我做了更多的研究.有 this 来自 Apple 的文档.相关部分是这样的:

<块引用>

启用密码自动填充

密码自动填充使用启发式方法来确定用户何时登录或创建新密码，并自动提供密码QuickType 栏.这些启发式方法为用户提供了一些密码自动填充大多数应用程序都支持，即使这些应用程序尚未更新为支持自动填充.但是，为了提供最佳的用户体验和确保您的应用完全支持密码自动填充，执行以下步骤:

1. 设置应用的关联域.要了解如何设置应用的关联域，请参阅设置应用的关联域.

2. 在相关文本字段上设置正确的自动填充类型.对于 iOS 应用程序，请参阅在文本输入视图上启用密码自动填充.对于网络应用，请参阅在 HTML 输入元素上启用密码自动填充.

当我第一次问这个问题时，我从上面做了 2，但不是 1.但是在做了 1 之后它仍然不起作用.

以下是来自 Apple 的一些更相关的文档.

解决方案

我在这里找到了一个解决方法:https://github.com/ionic-team/ionic/issues/19478#issuecomment-559081576

基本上不要将任何输入字段包装在 ion-item 标签中，而是使用 div(例如).

相应的 WebKit 错误报告是这样的:https://bugs.webkit.org/show_bug.cgi?id=203299

I want to know how to enable the autocomplete for a login form in Capacitor (or if it's possible). I'm using Ionic React. It works if access the page in Safari on iOS and even if you pin it to the home screen. But if you bundle the web app in Capacitor, the autocomplete is not there. Here's the code for the login form:

<form onSubmit={e => loginAndCloseModal({e, emailValue, passwordValue})}>
  <IonList>
    <IonItem>
      <IonLabel position="stacked">Email</IonLabel>
      <IonInput autocomplete="username" name="email" value={emailValue} onIonChange={e => setEmail(e.target.value)}></IonInput>
    </IonItem>
    <IonItem>
      <IonLabel position="stacked">Password</IonLabel>
      <IonInput autocomplete="current-password" name="password" type="password" value={passwordValue} onIonChange={e => setPassword(e.target.value)}></IonInput>
    </IonItem>
    { errorMessage &&
        <IonItem>
          <IonNote color="danger">{errorMessage}</IonNote>
        </IonItem> }
  </IonList>
  <IonButton class="login-button" expand="block" type="submit" disabled={authLoading}>Login</IonButton>
</form>

I've also tried setting autocomplete="on" as well and it didn't work. Apple's documentation recommends using the values posted above: https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element

Here's a screenshot of the login page on the web:

Here's a version of the login form in Capacitor:

Notice the passwords option in the above the keyboard is gone. Why is that?

Here's the relevant dependencies of my project:

"@capacitor/cli": "^1.2.1",
"@capacitor/core": "^1.2.1",
"@capacitor/ios": "^1.2.1",
"@ionic/react": "^4.11.2",
"@ionic/react-router": "^4.11.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",

I'm using iOS version 12.4.2

EDIT:

I've done some more research. There this documentation from Apple. The relevant section is this:

Enable Password AutoFill

Password AutoFill uses heuristics to determine when the user logs in or creates new passwords, and automatically provides the password QuickType bar. These heuristics give users some Password AutoFill support in most apps, even if those apps haven’t been updated to support AutoFill. However, to provide the best user experience and ensure your app fully supports Password AutoFill, perform the following steps:

1. Set up your app’s associated domains. To learn how to set up your app’s associated domains, see Setting Up an App’s Associated Domains.

2. Set the correct AutoFill type on relevant text fields. For an iOS app, see Enabling Password AutoFill on a Text Input View. For a web app, see Enabling Password AutoFill on an HTML Input Element.

I did 2 from above when I first asked this question, but not 1. However after doing number 1 it's still not working.

Here's some more relevant documentation from Apple.

解决方案

I found a workaround here: https://github.com/ionic-team/ionic/issues/19478#issuecomment-559081576

Basically don't wrap any of your input fields in an ion-item tag, use div instead (for example).

The corresponding WebKit bug report is this: https://bugs.webkit.org/show_bug.cgi?id=203299

这篇关于如何在 iOS 的 Ionic 电容器中打开登录表单的 webview 自动完成功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！