Как заставить iOS 12 Autofill запрашивать сохранение пароля в приложении React Native? - PullRequest
1 голос
/ 10 июня 2019

ПРОБЛЕМА

Я нахожусь на React Native 0.59.9 (последний на момент публикации), и в моем мобильном приложении есть экран входа в систему, который мне нужен для iOS 12Функция автозаполнения, чтобы подобрать и сохранить пароль для нового пользователя.С тем, что я настроил, приложение показывает клавиатуру с опцией автозаполнения, но никогда не выскакивает «Сохранить пароль» для учетных данных нового пользователя.

Как выглядит автозаполнение клавиатуры прямо сейчас: https://imgur.com/6gVpGbU

НЕКОТОРАЯ ФОНОВАЯ ИНФОРМАЦИЯ

В документации React Native теперь они предоставляют textContentType в компоненте TextInput.Чтобы настроить его для автозаполнения iOS 11, для имени пользователя textContentType будет установлено значение «username», а для пароля textContentType будет установлено значение «password».

RN textContentType документация: https://facebook.github.io/react-native/docs/textinput#textcontenttype

Для автозаполнения iOS 12, которое теперь должно предоставлять функцию «Сохранить пароль» и для мобильных приложений (ранее это были только веб-сайты), конфигурацияотличается для пароля.

Вместо пароля textContentType будет установлено значение 'newPassword'.Это не работает, хотя, на самом деле, оно кажется глючным и ломает приложение, так как предлагает имя пользователя для поля пароля с этим набором ...

Реализация

Что я пробовалЧтобы реализовать функцию автозаполнения в iOS 12 в React Native:

<TextInput
  placeholder={'Enter username'}
  autoCapitalize={'none'}
  autoCorrect={false}
  textContentType={'username'}
/>
<TextInput
  placeholder={'Enter password'}
  autoCapitalize={'none'}
  autoCorrect={false}
  secureTextEntry={true}
  textContentType={'newPassword'}
/>

В мобильном предложении я обязательно включил Ассоциированные домены в качестве разрешения.(Сделано через веб-сайт Apple Developer).

В моем домене (например, www.mydomain.com) файл apple-app-site-association (без расширения), который имеет следующее, был помещен вкорневой каталог и является общедоступным (поддерживается https).

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

В XCode я настроил связанные домены так, чтобы они указывали на этот домен.Пример:

webcredentials:www.mydomain.com

OUTPUT

Ожидаемый результат реализации этого заключается в том, что iOS выдает диалоговое окно «Сохранить пароль», когда новый пользователь вводит свои учетные данные.

Чтовсплывающее диалоговое окно должно выглядеть так: https://imgur.com/GH4hfP8

Вместо этого оно никогда не всплывает.При успешном входе в систему пользователь просто заходит в приложение, и диалог сохранения пароля не появляется.По сути это означает, что ни один из моих пользователей не может сохранить свои учетные данные в выбранном им менеджере паролей (даже в связке ключей iCloud).

Поскольку эта функция не может быть протестирована на симуляторе, я тестировал ееэто на iPhone 7 Plus с установленной iOS 12.3.1 и включенным автозаполнением в настройках, как видно на изображении ниже.

https://imgur.com/nSEmy7V

Любые идеи, какие я 'я делаю неправильно, или если я пропускаю шаг?

1 Ответ

0 голосов
/ 26 июня 2019

Работай!Вот что я сделал, чтобы заставить его работать.

Шаги

  1. В приложении в коде поля имени пользователя и пароля указаны ниже (обратите внимание на textContentType)
<TextInput
 placeholder={'Enter username'}
 autoCapitalize={'none'}
 autoCorrect={false}
 textContentType={'username'}
/>
<TextInput
 placeholder={'Enter password'}
 autoCapitalize={'none'}
 autoCorrect={false}
 secureTextEntry={true}
 textContentType={'password'}
/>
Включение связанных доменов в качестве разрешения в мобильном обеспечении В XCode установите для связанных доменов указание на сайт, на котором будет размещен файл apple-app-site-association.
webcredentials:www.example.com

Не включайте часть URL-адреса в https, а не включайте конец, который будет / apple-app-site-association

Поместите файл apple-app-site-association в корневой каталог "/" вашего сайта и убедитесь, что он общедоступен.Вы можете проверить это в любом браузере, введя полный URL вашего сайта с таким окончанием, как:
https://www.example.com/apple-app-site-association 

Вы можете попробовать это на URL YouTube и Amazon URL, чтобы увидеть ихФайлы app-site-association в качестве примера.

Удалите ваши предыдущие сборки с телефона и переустановите новые сборки с этими изменениями, и Apple должна установить соединение почти немедленно.Ваш первый успешный новый вход в систему со свежими учетными данными должен быть отображен во всплывающем окне «Сохранить пароль» для iOS.Все готово!

Теперь мои пользователи могут войти в систему с автозаполнением, и самое приятное, что iOS предлагает автозаполнение, используя Touch ID, ID лица или пароль в зависимости от настроек телефона пользователя.Таким образом, они могут войти в систему с помощью Touch ID или даже ID лица без дополнительной работы, необходимой в приложении RN, чтобы это работало.Еще лучше, если они сохранят его в iCloud, они могут перейти на другое устройство и при этом смогут войти в приложение с теми же учетными данными, если захотят.

Ошибки, которые я сделал:

Я допустил несколько ошибок, надеюсь, их можно избежать, прочитав следующее.

  1. Веб-сайт, на котором размещена ассоциация apple-app-site-association, должен соответствовать рекомендациям Apple.от корки до корки.Я сделал ошибку, первоначально используя временный сайт, размещенный на AWS.Этот URL-адрес AWS содержит http и https.Apple не понравилось это.Когда я переключился на веб-сайт, который размещал только https, он работал нормально.Это очень важно для работы «Сохранить пароль», иначе у Apple не будет ключа для сохранения ваших учетных данных (он использует домен вашего сайта в качестве ключа для сохранения учетных данных в цепочке для ключей Apple).
  2. Apple-app-site-association синтаксис имеет значение .Если хотя бы один из специальных символов выключен, он не будет работать.В моем оригинальном файле выше внимательно посмотрите на двойные кавычки, инкапсулирующие идентификатор приложения:
{
    "webcredentials": {
        "apps": [
            “ZT978FY6AB.com.company.my.app”,
        ]
    }
}

Они не являются стандартными двойными кавычками, и это привело к созданию файла, который не может бытьразбирается Apple.В случае сомнений скопируйте тот, который Apple предоставляет на своей странице документации, а затем измените его содержимое по мере необходимости.Изменяя его на обычные двойные кавычки, как показано ниже, исправлено:

{
    "webcredentials": {
        "apps": [
            "ZT978FY6AB.com.company.my.app",
        ]
    }
}
В RN все, что вам нужно, это textContentType = {'username'} и textContentType = {'password'}.Моя ошибка заключалась в том, что «newPassword» был необходим, чтобы вызвать диалоговое окно «Сохранить пароль».Нету.'newPassword' используется автозаполнением, чтобы предложить надежные пароли новым пользователям.По сути, используйте «newPassword» только в тех формах, где пользователь регистрируется.Не для форм входа в систему.

Что-то для пояснения, это решение работает для приложений, которые являются просто приложениями.Не требуется веб-сайт с логином, не нужно вводить учетные данные с веб-сайта в приложение и не требуются настройки входа в веб-браузер.Это не было очевидно, когда я просматривал документацию об автозаполнении.Веб-сайт, на котором размещена Apple-App-Site-Association, не должен иметь логин или что-либо в этом роде, это может быть просто простой веб-сайт с небольшим количеством информации (возможно, о приложении или компании, которая делает приложение)..

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...