如何在 iOS 的 Ionic 電容器中打開 webview 自動完成登錄表單？

Question

我想知道如何為 Capacitor 中的登錄表單啟用自動完成功能（或者如果可能的話）。 我正在使用離子反應。 如果在 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

這是web上登錄頁面的截圖：

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

編輯：

我做了更多的研究。 那里有來自 Apple 的文檔。 相關部分是這樣的：

啟用密碼自動填充

Password AutoFill 使用啟發式方法來確定用戶何時登錄或創建新密碼，並自動提供密碼 QuickType 欄。 這些啟發式方法在大多數應用程序中為用戶提供了一些密碼自動填充支持，即使這些應用程序尚未更新以支持自動填充。 但是，為了提供最佳用戶體驗並確保您的應用完全支持密碼自動填充，請執行以下步驟：

1. 設置應用的關聯域。 要了解如何設置應用的關聯域，請參閱設置應用的關聯域。

2. 在相關文本字段上設置正確的自動填充類型。 對於 iOS 應用程序，請參閱在文本輸入視圖上啟用密碼自動填充。 對於 web 應用程序，請參閱在 HTML 輸入元素上啟用密碼自動填充。

當我第一次問這個問題時，我從上面做了 2，但不是 1。但是在做了第 1 之后它仍然無法正常工作。

這是來自 Apple 的一些更相關的文檔。

Answer 1

1. 首先，登錄Apple Developer網站。 導航到“證書、標識符和配置文件”部分和 select 您應用的標識符。 注意App ID prefix和Bundle 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 中，它看起來像這樣，例如：

• 請求路徑：/.well-known/ /.well-known/apple-app-site-association
• Header 名稱： Content-Type
• Header 值； application/pkcs7-mime

7. 現在您必須打開 XCode 中的ios/文件夾。 您可以手動執行此操作，也可以使用命令npx cap open ios執行此操作。 在那里，您單擊左側欄中的App ，然后再次單擊Targets下的App 。 然后 select Signing & Capabilities選項卡。
8. 添加新的關聯域功能，然后添加域applinks:example.com以獲得深度鏈接支持和webcredentials:example.com用於自動填充密碼。 將example.com替換為您網站的域名。

編輯：我還添加了Autofill Credential Provider功能。

如果沒有任何變化，那么現在一切都應該正常了。 否則，這里有一些對我有幫助的有用鏈接：

• 電容器 - 與通用和應用鏈接的深度鏈接
• 設置 iOS 通用鏈接
• 如何在 Ionic（iOS 和 Android）中設置通用鏈接
• 在 HTML 輸入元素上啟用密碼自動填充
• 通用鏈接驗證器

Answer 2

我在這里找到了一種解決方法： https://github.com/ionic-team/ionic/issues/19478#issuecomment-559081576

基本上不要將任何輸入字段包裝在 ion-item 標記中，而是使用 div （例如）。

相應的 WebKit 錯誤報告是這樣的： https://bugs.webkit.org/show_bug.cgi?id=203299

Answer 3

我也嘗試了所有方法，name=username 或 name=current-password、autocomplete="current-password" 和 autocomplete="username"、autocomplete="on" 等。我可以讓鍵盤上的 Password 按鈕僅顯示在密碼字段中，允許我使用 select 之前保存的帳戶（用戶名，密碼，Web 站點），但它只填寫密碼而不是用戶名字段。

所以嘗試 go 進入設置密碼和帳戶，打開自動填充密碼“綠色”，然后網站和應用程序密碼，並輸入帳戶信息。

但我有兩個突出的問題，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/原理圖：7.3.9

@角/cli：7.3.9

@ionic/角度工具包：1.5.1

IOS：

12.1

Answer 4

我有同樣的問題，如果你只保留 IonInput，而不是將它包裝在 IonItem 中，似乎可以工作。

Answer 5

在搜索之后，我發現這種方式可以在 ionic 5 / 電容器中自動填充密碼功能。

首先，需要設置您應用的關聯域。 檢查此鏈接： https://developer.apple.com/documentation/xcode/supporting-associated-domains

之后使用此 npm package 用於 IOS。 https://www.npmjs.com/package/capacitor-ios-autofill-save-password

它有助於保存密碼功能。

Answer 6

已經編寫了使用電容器實現憑據自動填充的指南： https://capacitorjs.com/docs/guides/autofill-credentials

這還包括解決常見錯誤和錯誤。