Добавьте полный поток аутентификации в ваше приложение React

Что такое AWS Amplify?

AWS Amplify был анонсирован в ноябре 2017 года как библиотека с открытым исходным кодом для разработчиков, которые хотят создавать облачные приложения с помощью JavaScript в Интернете или на мобильных платформах.

Вы когда-нибудь слышали о Firebase от Google? Это очень похожая концепция, но работает в AWS.

AWS Amplify позволяет невероятно быстро создавать приложения, используя услуги, предоставляемые Amazon, без управления какой-либо инфраструктурой.

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

Amplify предоставляет набор функций, таких как аутентификация, аналитика, API (GraphQL и REST), взаимодействия, прогнозы, PubSub, хранилище, push-уведомления и XR, которые позволяют создавать многофункциональные бессерверные приложения на базе сервисов AWS.

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

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

Звучит здорово, давайте посмотрим, как это работает!

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

Базовая настройка

Во-первых, если у вас еще нет Node, скачайте и установите его.



Скачать | Node.js
Node.js® - это среда выполнения JavaScript, построенная на движке JavaScript V8 Chrome. nodejs.org



Вам также понадобится учетная запись AWS для запуска Amplify. Создайте учетную запись AWS, если у вас ее еще нет.



Amazon Web Services (AWS) - сервисы облачных вычислений
Ищите и анализируйте свои журналы с помощью единственного 100% -ного дистрибутива Elasticsearch с открытым исходным кодом для сборки, обучения и развертывания… aws.amazon.com



Усилить

Теперь, когда основная настройка завершена, приступим.

Установите Amplify CLI

Интерфейс командной строки Amplify (CLI) - это унифицированный набор инструментов для создания, интеграции и управления облачными сервисами AWS для вашего приложения.

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

Настроить Amplify

Войдите в свою учетную запись AWS и запустите:

$ amplify configure

Нажмите Enter, укажите регион AWS, имя пользователя и еще раз Enter.

amplify configure
Scanning for plugins...
Plugin scan successful
Follow these steps to set up access to your AWS account:
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue
Specify the AWS Region
? region:  eu-west-2
Specify the username of the new IAM user:
? user name:  amplify-7T7mt
Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=undefined#/users$new?step=final&accessKey&userNames=amplify-7T7mt&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess
Press Enter to continue

Завершите создание пользователя AWS Amplify, загрузите учетные данные и добавьте оставшуюся информацию в терминал:

Вы завершили настройку Amplify, теперь давайте создадим наше приложение.

Приложение React

Создайте свое приложение React с помощью create-response-app:

$ npx create-react-app react-amplify
$ cd react-amplify

Теперь давайте инициализируем наше приложение , выполнив следующую команду:

$ amplify init

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

Сделайте выбор ниже или в соответствии с вашей конфигурацией:

Некоторые следующие шаги:

  • amplify status: покажет, что вы уже добавили, и настроено ли это локально или развернуто.
  • amplify <category> add: позволит вам добавлять такие функции, как вход пользователя в систему или внутренний API.
  • amplify push: создаст все ваши локальные внутренние ресурсы и предоставит их в облаке.
  • amplify console: Откройте консоль Amplify и просмотрите статус вашего проекта.
  • amplify publish: Создайте все свои локальные внутренние и внешние ресурсы (если у вас есть добавленная категория хостинга) и подготовьте их в облаке.

Настройте свое приложение React

Давайте установим пакеты AWS Amplify в наше приложение React:

$ sudo npm install aws-amplify @aws-amplify/ui-react

Аутентификация

Давайте продолжим и добавим аутентификацию в приложение.

Аутентификация в Amplify использует Amazon Cognito.

$ amplify add auth

Сделайте выбор ниже или в соответствии с вашей конфигурацией:

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

Если вы не уверены, какая конфигурация вам нужна, выберите Yes, use the default configuration в качестве первого вопроса. Вы всегда можете вернуться и изменить эти настройки, выполнив команду amplify update auth.

Теперь у нас есть модуль аутентификации, настроенный для нашего приложения. Но нам все еще нужно развернуть эту конфигурацию в нашей учетной записи AWS. К счастью для нас, этим также занимается Amplify CLI.

Давайте отправим конфигурацию в облако с помощью следующей команды:

$ amplify push

Это создаст и развернет необходимые изменения в нашей учетной записи AWS для поддержки нашего модуля аутентификации. Файл конфигурации с именем aws-exports.js будет скопирован в ваш настроенный исходный каталог, например ./src.

Настройте Amplify в приложении React

Теперь давайте добавим службу аутентификации Amplify в наше приложение React.

Откройте вашу любимую IDE и отредактируйте index.js файл:

Затем добавьте Amplify Authenticator в ваш App.js файл:

Импортируйте withAuthenticator и оберните приложение React.

import { withAuthenticator, AmplifySignOut } from "@aws-amplify/ui-react";
...
export default withAuthenticator(App);

Теперь мы готовы протестировать приложение.

Запустите приложение, используя:

npm run start

Ваш браузер загрузит защищенную страницу для входа в систему. Теперь ваше приложение защищено с помощью Amplify.

Создать новый аккаунт:

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

Войдите в систему и добро пожаловать в свое безопасное приложение React:

Войдите в свою учетную запись AWS, перейдите в сервис Cognito, и теперь вы можете увидеть нового пользователя, созданного в AWS Cognito:

Следующие шаги

Это только начало использования Amplify с React. В следующих постах я расширю приложение, добавив:

  • API: выполняйте HTTP-запросы с помощью REST и GraphQL легко и безопасно.
  • Аналитика: прямая аналитика для отслеживания пользовательских сеансов, атрибутов и показателей в приложении.
  • Хранилище: безопасное управление пользовательским контентом в облаке или на устройстве.

Весь исходный код доступен на моем GitHub.

Обновлять

  • Теперь доступно создание приложения React с помощью AWS Amplify в простых шагах (Часть 2). Добавьте API AWS AppSync GraphQL в свое приложение React.
  • 2020–05–21: обновлен код до Amplify версии 3.

Удачного кодирования!