如何在 iOS 的 Ionic 电容器中打开登录表单的 webview 自动完成功能?

IT技术 javascript reactjs ionic4 capacitor
2021-05-19 16:11:57

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

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

我也试过设置autocomplete="on",没用。Apple 的文档建议使用上面发布的值:https : //developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element

这是网络上登录页面的屏幕截图:

网页版登入表格

这是 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",
"react": "^16.8.6",
"react-dom": "^16.8.6",

我使用的是 iOS 版本 12.4.2

编辑:

我做了更多的研究。这个苹果文档。相关部分是这样的:

启用密码自动填充

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

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

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

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

这是来自 Apple 的一些更相关的文档。

4个回答
  1. 首先,登录Apple Developer站点。导航到“证书、标识符和配置文件”部分并选择您的应用程序的标识符。注意App ID prefixBundle ID,在 Capabilities 下,切换“Associated Domains”然后保存。

  2. 然后,在您的 Web 服务器上创建一个名为apple-app-site-association. 该文件将以 JSON 格式配置,但不允许具有 .json 或任何其他扩展名

  3. 将以下内容粘贴到文件中并编辑标记的位置。

    替换XXXXXXXXXX为 App ID 前缀和com.example应用的 Bundle ID。

    {
      "webcredentials": {
        "apps": [
          "XXXXXXXXXX.com.example" // Replace this
        ]
      },
      "applinks": {
        "apps": [], // needs to be empty
        "details": [
          {
            "appID": "XXXXXXXXXX.com.example", // This too
            "paths": [
              "*"
            ]
          }
        ]
      }
    }
    
  4. 之后,确保可以通过路由https://example.com/.well-known/apple-app-site-association访问此文件

  5. 还要确保您的服务器使用 https

  6. 还需要为此文件指定内容类型。它需要是application/pkcs7-mime例如,这可以使用网站标题来完成。在托管服务提供商Render.com 上,它看起来像这样,例如:

render.com 上的示例网站标题配置

  • 请求路径: /.well-known/apple-app-site-association
  • 标题名称: Content-Type
  • 标题值; application/pkcs7-mime
  1. 现在您必须ios/在 XCode 中打开该文件夹。您可以手动或使用命令执行此操作npx cap open ios在那里,你点击App左侧边栏,然后再打开AppTargets然后选择Signing & Capabilities选项卡。
  2. 添加新的关联域功能,然后添加域applinks:example.com以支持深层链接和webcredentials:example.com自动填充密码。替换example.com为您网站的域名。

编辑:我还添加了Autofill Credential Provider功能。

如果一切都没有改变,那么现在一切都应该可以工作了。否则,这里有一些对我有帮助的有用链接:

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

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

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

我也尝试了所有方法,name=username 或 name=current-password、autocomplete="current-password" 和 autocomplete="username"、autocomplete="on" 等。我可以通过键盘上的密码按钮仅在密码字段中显示,允许我选择以前保存的帐户(用户名、密码、网站),但它只填写密码而不填写用户名字段。

所以尝试进入设置密码和帐户,打开自动填充密码“绿色”,然后网站和应用程序密码,并输入帐户信息。

但我有两个悬而未决的问题,1.) 不会提示我在用户名字段中自动完成用户名。2.) 没有域供我的应用程序将帐户与我的应用程序相关联。这在技术上很奇怪……问题似乎出在 Ionic 框架内;离子 4.

参考:

https://ionicframework.com/docs/api/input

https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element

系统:
离子(离子 CLI):4.12.0(/usr/local/lib/node_modules/ionic)

离子框架:@ionic/angular 4.7.1

@angular-devkit/build-angular:0.13.9

@angular-devkit/schematics:7.3.9

@角度/cli:7.3.9

@离子/角度工具包:1.5.1

IOS:

12.1

我有同样的问题,如果你只保留 IonInput,而不是将它包装在 IonItem 中,似乎可以工作。