В одном из наших последних проектов наш клиент попросил нас создать приложение, которое можно было бы использовать в качестве интерфейса для их технических описаний продуктов. У них уже есть контент и пользователь, хранящийся на сайте WordPress (контент использовал настраиваемые сообщения), и они не хотели переходить на другие платформы, поскольку создание нового внутреннего интерфейса для добавления данных и пользователей было слишком обширным (для пример при переходе на firebase), а также потому, что их команда уже знает, как управлять WordPress.

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

Далее следует упрощенная версия нашей системы входа в WordPress, созданная на React.

Если вы хотите следовать этому руководству, вы можете клонировать репозиторий проекта по адресу https://github.com/popeating/wp-login

Что мы будем развивать

Простой интерфейс входа в систему с использованием электронной почты и пароля позволит войти на удаленный сайт WordPress и будет хранить некоторые данные входа на устройстве для постоянства.
Мы также реализуем скрипт входа в систему PHP, который будет добавлен в Worpdress для обработки запрос на вход из приложения.

Предупреждения

И приложение, и файлы PHP представляют собой упрощенную версию готовой к работе, они не учитывают многие аспекты безопасности (особенно файл PHP) и не обрабатывают все ошибки, с которыми они могут столкнуться. В любом случае они просто демонстрация того, насколько легко можно реализовать вход на удаленный сайт WordPress с помощью React Native.

Концепция

Что мы в основном сделаем, так это создадим сценарий входа в WordPress (на PHP), который будет принимать электронную почту и пароль в качестве входных данных POST, а затем будет использовать их для аутентификации в WordPress, и если аутентификация прошла успешно, мы создаем токен пользователя, сохраняем его в мета пользователя (для использования в будущем) и отправьте данные пользователя и токен обратно в приложение. Приложение будет работать следующим образом: при запуске оно будет проверять, сохранен ли пользователь на устройстве, если мы предполагаем статус входа в систему (или, в более безопасном случае, мы перепроверяем данные по WordPress), если пользователь не сохранен. на устройстве мы представляем форму входа в систему, которая будет публиковаться в созданном нами скрипте WordPress, после ответа на вход в систему PHP мы получим данные ответа и (в случае правильной аутентификации пользователя) сохраним данные пользователя и установим устройство как зарегистрирован, иначе мы покажем ошибку. Если устройство зарегистрировано (как из формы входа, так и из данных устройства), мы показываем пользователю экран входа в систему.

Шаг, за которым мы будем следовать

В первую очередь займемся WordPress:

  • Защита доступа к WordPress и ограничение его только для авторизованных пользователей
  • Написание небольшого PHP для аутентификации

Затем мы собираемся настроить наше приложение:

  • Создание приложения с помощью Expo (но работало бы и без него)
  • Установка модулей и зависимостей, которые мы будем использовать в приложении
  • Определение компонентов, которые мы собираемся использовать
  • Написание функций
  • Подведение итогов

Раздел WordPress

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

Поместите этот код в functions.php в папку вашей темы

Затем мы собираемся создать новый файл PHP (мы называем его wp-response-login.php) и помещаем его в корневую папку WordPress, как упоминалось ранее, этот файл как есть не может считаться безопасным:

Раздел приложения

Мы начинаем создавать наше приложение с помощью Expo (но мы также можем использовать npm create-response-app):

expo-init wp-login

Мы устанавливаем несколько модулей, которые собираемся использовать: React Navigation, React Native Paper (для упрощения стилизации), AsyncStrorage (для сохранения / чтения с устройства):

npm install react-native-paper
npm install @react-navigation/native
npm install @react-navigation/stack
//navigation dependencies
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

После того, как все настроено, мы входим в папку проекта и создаем 3 новые папки: компоненты (мы будем хранить компоненты экрана), context (мы будем хранить здесь файлы контекста), const (файлы misc, лайки конфиги), дерево должно выглядеть как этот:

Поскольку мы собираемся обмениваться данными (статус пользователя, статус приложения, пользовательские данные) между компонентами вместо того, чтобы передавать реквизиты между компонентами, мы используем Context:

создайте новый файл в папке контекста и назовите его Context.js

Этот файл будет позже импортирован в App.js и использован для обертывания всех дочерних компонентов, чтобы они совместно использовали все, что находится в контексте; функция doSome () - это просто фиктивная функция, которую я использую, чтобы проверить, все ли работает правильно.

Мы создаем const.js внутри нашей папки const, на данный момент мы сохраняем в файле только URL-адрес сценария входа в WordPress.

Мы создаем два пустых файла в компонентах, Home.js и Login.js, которые будут служить нашим экраном:

Теперь мы можем приступить к созданию нашего App.js.
Прежде всего, необходимый импорт. Помимо стандартного и навигационного импорта, мы также импортируем нашу константу, наши компоненты и контекст:

После этого мы начинаем кодировать, с помощью useState настраиваем некоторые состояния, которые можно использовать позже:

Затем при запуске приложения мы хотим проверить, вошел ли пользователь в систему (т. Е. Имеет ли данные профиля на устройстве); мы можем добиться этого с помощью useEffect и AsyncStorage, это довольно просто и предполагает, что если у меня есть данные на устройстве, я зарегистрирован, это, конечно, можно улучшить, проверив, действительно ли сохраненный токен на сервере (для Например, мы можем сделать так, чтобы логин истекал через некоторое время, или, возможно, администратор сайта удалил пользователя). Во время этого процесса у нас есть состояние isLoading как true, а в конце его другие состояния изменяются в зависимости от статуса.

Теперь нам нужна функция для входа в систему и функция для выхода. Самый простой - это выход из системы, нам просто нужно удалить элемент из хранилища и сбросить некоторые состояния (например, очистить userProfile), мы также можем выполнить некоторые удаленные действия (например, удалить токен из метаданных пользователя в WordPress или сохранить метаданные пользователя. время и выполненное действие).

Вход в систему немного сложнее, так как нам нужно общаться с сервером, и на основе ответа, сохраняя или не сохраняя AsyncStorage; нам также необходимо отслеживать некоторые ошибки, которые могут произойти в процессе. В любом случае, Логин в основном устанавливает или отменяет статус входа в систему.

Последняя часть «раскрывает» все состояния и функции через наш контекст, чтобы мы могли получить к ним доступ в дочернем компоненте (подробнее об этом позже).

Пришло время выполнить рендеринг, используя состояния, которые мы можем условно рендерить фрагменты кода, показывая правильный «экран» нужному пользователю.
Вначале приложение имеет состояние isLoading, установленное на true, это состояние сохраняется, пока app (через ловушку useEffect) проверьте AsyncStorage; даже если это происходит почти сразу, мы используем этот фрагмент кода для рендеринга вращающегося колеса во время загрузки приложения:

Как только для isLoading установлено значение false (в конце перехвата useEffect), мы можем показать пользователю «настоящий» интерфейс в зависимости от его статуса: форма входа в систему, если он вышел из системы, экран приветствия при входе в систему; это может быть достигнуто с помощью условного рендеринга; также этот код заключен в контекст, так что все дочерние компоненты будут иметь доступ к объектам, переменным и функциям, определенным в самом контексте:

На данный момент нам не хватает только компонентов Login и Home.

Оба компонента являются базовыми, оба «импортируют» контекст (чтобы иметь доступ к данным контекста), Login будет отображать форму с двумя полями, при нажатии кнопки будет выполнен doLogin (в App.js). Форма отключена во время процесса входа в систему (через состояние loggingIn), отображается текст ошибки, если ошибка состояния имеет какое-либо значение.

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

Компонент Home еще проще, он показывает некоторые пользовательские данные (полученные из состояния userProfile) и кнопку выхода, которая выполняет функцию doLogout App.js.

Что дальше?

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

Другой способ входа

Вас интересуют другие способы реализации входа в систему с помощью удаленной службы?
Checkout React Native: аутентификация электронной почты Firebase в проекте Expo = › https://medium.com/react-native-playground/react-native-firebase-email-authenticaton-in -an-expo-project-2e413e9a4890 и Добавить Вход Google в Firebase внутри проекта Expo =› https://medium.com/@popeating/react-native- firebase-add-google-authentication-in-an-expo-project-2-ed20cb440732