Самый быстрый способ добавить аутентификацию в ваше приложение для реагирования

Я основательно создавал нативные приложения React в течение прошлого года и балуюсь этим еще несколько лет.

React Native — отличный инструмент, выпущенный Facebook для создания мобильных приложений как для Android, так и для IOS. Он позволяет вам очень быстро освоиться и позволяет проходить обучение, поскольку вам не нужны специальные разработчики для IOS или Android.

Поскольку большинству приложений требуется какая-либо форма аутентификации, способ быстрой аутентификации будет большой победой. В прошлом я использовал несколько библиотек для аутентификации, например Firebase, но, безусловно, самая быстрая из тех, которые я использовал, и это потому, что у нее есть собственные выделенные компоненты React Native (а также React) для входа в систему, выхода из системы и сброса пароля — это AWS Amplify Authentication. .

Модуль AWS Amplify Authentication предоставляет API-интерфейсы аутентификации и стандартные блоки для разработчиков, которые хотят создавать возможности аутентификации пользователей.

За кулисами Amplify использует AWS Cognito, полнофункциональную службу каталогов пользователей для регистрации, хранения, аутентификации и восстановления учетных записей пользователей.

Используемые технологии

Итак, давайте начнем, прежде чем мы перейдем к кодированию, вот предварительные условия.

• Установить Node.js® а также нпм если они еще не установлены на вашем компьютере.
• Создайте приложение React Native (необходимо только в том случае, если у вас нет существующего приложения).

$ npm install -g create-react-native-app

• Ан Аккаунт AWS не волнуйтесь, есть свободно 12-месячный уровень.
• Усилить клиент

$ npm install -g @aws-amplify/cli
$ amplify configure

• Симулятор iPhone и эмулятор Android для запуска мобильных приложений
  Они связаны с Xcode и Android Studio.

Создать новый проект

Если вы хотите добавить авторизацию в существующее приложение, перейдите к следующему разделу.

$ create-react-native-app myAuthProject$ cd myAuthProject && react-native run-ios

Вы получите что-то похожее на экран выше.

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

Добавление настройки Auth Backend

Теперь нам нужно добавить авторизацию, из терминала/командной строки запустите эту команду (убедитесь, что вы находитесь в корневой папке myAuthProject или существующего приложения).

Во-первых, нам нужно инициализировать наш проект как проект AWS Amplify, это позволит нам добавить все необходимые функции.

$ amplify init

Следуйте указаниям мастера, выберите JavaScript, а затем React Native, когда он запросит у вас сведения о приложении. Эта команда загрузит папку amplify в ваше приложение, в которой есть некоторые детали конфигурации.

После того, как у вас есть эта настройка, выполните следующие команды. Это добавит возможности аутентификации в ваше приложение, изменив папку amplify. Команда push отправляет обновления, внесенные вами в облачную конфигурацию AWS.

amplify add authamplify push

Теперь у нас есть серверная часть, готовая начать получать наши запросы на авторизацию из мобильного приложения.

Добавление настройки Auth Front-end

Если вы выполнили шаги, описанные выше, у вас должна быть структура папок, подобная этой.

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

$ npm install --save aws-amplify$ npm install --save aws-amplify-react-native

Почему две библиотеки, спросите вы?

aws-amplify предоставляет более общие инструменты AWS, такие как Auth, в то время как aws-amplify-react-native предоставляет более конкретные инструменты для React Native, такие как компоненты для аутентификации, хранения, взаимодействия и т. д.

Откройте файл App.js в любом текстовом редакторе или редакторе кода, добавьте следующие строки в начало файла.

import Amplify from "aws-amplify";
import aws_exports from "./aws-exports";
Amplify.configure(aws_exports);

Мы импортируем экспорт по умолчанию из библиотеки aws-amplify и импортируем загруженный файл aws-exports.js, который содержит всю нашу внутреннюю конфигурацию, и передаем его в качестве аргумента нашей локальной установке Amplify, это создает клей между нашим передним end и облачный сервер, который мы создали на предыдущем шаге.

Использование компонента высшего порядка withAuthenticator

Кратко о компонентах более высокого порядка, это в основном функции, которые принимают компонент в качестве входных данных и возвращают новый компонент. Если вы использовали Redux connect, React Natvigations withNavigator и т. д.

Мы импортируем компонент/функцию withAuthenticator.

import { withAuthenticator } from "aws-amplify-react-native";

затем мы передаем наш компонент приложения в функцию withAuthenticator и экспортируем его.

export default withAuthenticator(App);

Если вы выполнили все шаги, у нас должен получиться App.js, похожий на этот.

Примечание. Я удалил экспорт по умолчанию в строке 9 и вместо этого переместил его в строку 21, чтобы мы могли передать созданный нами компонент приложения в качестве аргумента для withAuthenticator, и все готово! Ууууууу.

Теперь, если вы снова запустите react-native run-ios, вы должны увидеть этот экран, вуаля!

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

Если вы войдете в свою учетную запись AWS и перейдете к пулу пользователей Cognito, вы увидите своего блестящего нового пользователя. Существует множество настроек, которые вы можете применить к пользовательскому интерфейсу, Auth Flow, то есть вы можете использовать ссылку для проверки учетных записей вместо электронной почты, что позволяет MFA действительно список бесконечен.

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

Эта статья изначально была опубликована на моей средней странице