Как включить автозаполнение веб-просмотра для формы входа в конденсатор Ionic в iOS? - PullRequest
0 голосов
/ 24 октября 2019

Я хочу знать, как включить автозаполнение для формы входа в Capacitor (или, если это возможно). Я использую Ionic React. Это работает, если открыть страницу в Safari на iOS и даже если вы прикрепите ее к домашнему экрану. Но если вы упаковываете веб-приложение в 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 version of login form

Вот версия формы входа в систему в конденсаторе:

capacitor version of login form

Обратите внимание, что опция паролей в приведенной выше клавиатуре пропала. Почему это?

Вот соответствующие зависимости моего проекта:

"@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. Соответствующий раздел:

Включить автозаполнение пароля

Автозаполнение пароля использует эвристику для определения, когда пользователь входит в систему или создает новые пароли, и автоматически предоставляет панель быстрого набора пароля. Эта эвристика предоставляет пользователям некоторую поддержку автозаполнения паролем в большинстве приложений, даже если эти приложения не были обновлены для поддержки автозаполнения. Однако, чтобы обеспечить наилучшее взаимодействие с пользователем и убедиться, что ваше приложение полностью поддерживает автозаполнение пароля, выполните следующие действия:

  1. Настройте связанные домены вашего приложения. Чтобы узнать, как настроить связанные домены вашего приложения, см. Настройка связанных доменов приложения.

  2. Установите правильный тип автозаполнения в соответствующих текстовых полях. Для приложения iOS см. «Включение автозаполнения паролем в представлении ввода текста». Для веб-приложения см. Включение автозаполнения пароля в элементе ввода HTML.

Я сделал 2 сверху, когда впервые задал этот вопрос, но не 1. Однако после выполнения номера1 это все еще не работает.

Вот еще несколько соответствующих документов от Apple.

1 Ответ

0 голосов
/ 30 октября 2019

Я тоже все перепробовал: имя = имя пользователя или имя = текущий пароль, автозаполнение = "текущий пароль" и автозаполнение = "имя пользователя", автозаполнение = "вкл" и т. Д. Я могу включить кнопку Парольклавиатура, отображаемая только в поле «Пароль», позволяет выбрать ранее сохраненную учетную запись (имя пользователя, пароль, веб-сайт), но она заполняет только пароль, а не поле имени пользователя.

Попытайтесь перейти к настройке пароля и учетных записей, включите пароль автозаполнения «Зеленый», затем пароли веб-сайта и приложения и введите данные учетной записи.

Но у меня есть две нерешенные проблемы: 1. ) не будет запрашивать автозаполнение имени пользователя в поле имени пользователя. 2.) не имеет домена для моего приложения, связывающего учетную запись с моим приложением. Это технически странно ... проблема, кажется, в Ionic Framework;Ионные 4.

Ссылки:

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

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

Система:
ionic (Ionic CLI): 4.12.0 (/ usr / local / lib / node_modules / ionic)

Ionic Framework: @ ionic / angular 4.7.1

@ angular-devkit /угловая сборка: 0.13.9

@ angular-devkit / schematics: 7.3.9

@ angular / cli: 7.3.9

@ ionic / angular-toolkit:1.5.1

IOS:

12.1

...