Как создать систему аутентификации с реакцией за считанные минуты

AWS Amplify вместе с AWS Cognito выполняет всю тяжелую работу

Практически каждое приложение нуждается в системе аутентификации. Обычно мы подключаемся к серверу, аутентифицируемся там, а затем предоставляем доступ, если учетные данные действительны. Если вы создаете приложение, которому требуется единственная проверка подлинности в бэкэнде, то на самом деле сервер вам не нужен.

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

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

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

Сначала давайте установим Amplify CLI на ваш компьютер, запустив следующий код в вашем терминале:

npm install -g @aws-amplify/cli

Теперь, когда на вашем компьютере установлен интерфейс командной строки, давайте создадим наше приложение React с помощью этой команды (замените app-name любым именем приложения по вашему выбору):

npx create-react-app <app-name>

2. Конфигурация AWS Amplify

Давайте настроим AWS Amplify, запустив следующий код:

amplify configure

Вам будет предложено войти в свою учетную запись AWS и автоматически откроется браузер. Убедитесь, что вы вошли в свою учетную запись AWS. После входа в систему вернитесь к терминалу и нажмите клавишу Enter. Вот как должен выглядеть ваш терминал:

PS D:\amplifydemo> amplify configure
Initializing new Amplify CLI version...
Done initializing new version.
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

Затем вам будет предложено выбрать регион для развертывания приложения. Выберите подходящий вариант в зависимости от региона регистрации AWS.

Specify the AWS Region
? region: 
  us-east-1
> us-east-2
  us-west-2
  eu-west-1
  eu-west-2
  eu-central-1
  ap-northeast-1

Следующим шагом является имя нового пользователя IAM (Identity and Access Management) или его предложенный вариант. Здесь я создам один со своим именем:

Specify the username of the new IAM user:
? user name:  harsha

Нажмите Enter, и в вашем браузере откроется новая вкладка. Это консоль управления IAM для настройки нового пользователя IAM на Amplify. Убедитесь, что установлен флажок Программный доступ, затем нажмите Следующие разрешения.

На следующем экране убедитесь, что "Доступ администратора" установлен по умолчанию. Нажимайте «Далее», пока не дойдете до кнопки «Создать пользователя».

Как только ваш пользователь будет создан, вы увидите экран ниже.

Вы увидите следующее сообщение на терминале. Нажмите Enter, чтобы продолжить, затем вставьте идентификатор ключа доступа в приглашение.

Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=us-east-2#/users$new?step=final&accessKey&userNames=harsha&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess
Press Enter to continue

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

Наконец, он запросит имя профиля. Вы можете выбрать любое имя и нажать Enter, чтобы успешно настроить пользователя. В моем случае я введу здесь harsha-profile.

Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name:  harsha-profile
Successfully set up the new user.

3. Инициализация AWS Amplify

Выполните следующую команду и при появлении запроса введите имя своего приложения.

PS D:\amplifydemo> amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project amplifydemo
The following configuration will be applied:
Project information
| Name: amplifydemo
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm.cmd run-script build
| Start Command: npm.cmd run-script start
? Initialize the project with the above configuration? (Y/n)

Затем он запросит метод аутентификации. Выберите «Профиль AWS» и выберите только что созданного пользователя. Выберите метод аутентификации, который вы хотите использовать: Профиль AWS, а затем выберите профиль, который вы только что создали.

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html
? Please choose the profile you want to use harsha-profile

После того, как все будет успешно инициализировано, вы должны увидеть папку amplify в каталоге приложения React и файл с именем aws-exports.js в папке src.

4. Добавьте Amplify Authentication

Выполните следующую команду, чтобы начать добавление аутентификации в наше приложение React.

amplify add auth

Как только вы запустите команду, вы увидите, что она автоматически использует службу Cognito. Выберите «Конфигурация по умолчанию» и нажмите Enter.

Using service: Cognito, provided by: awscloudformation
The current configured provider is Amazon Cognito.
Do you want to use the default authentication and security configuration? (Use arrow keys)
> Default configuration
  Default configuration with Social Provider (Federation)
  Manual configuration
  I want to learn more.

Затем он запросит способ входа для ваших пользователей. В этом руководстве выберите «Электронная почта», затем «Нет, готово».

How do you want users to be able to sign in?
  Username
> Email
  Phone Number
  Email or Phone Number
  I want to learn more.
 Do you want to configure advanced settings? (Use arrow keys)
> No, I am done.
  Yes, I want to make some additional changes.

Теперь мы добавили этот ресурс аутентификации локально. Выполните команду ниже, чтобы отправить этот ресурс в облако:

amplify push

Он спросит, хотите ли вы создать новый ресурс. Введите «Y» в поле «Да» и нажмите Enter, чтобы продолжить.

? Are you sure you want to continue? Yes
- Updating resources in the cloud. This may take a few minutes...

Подождем, пока процесс завершится.

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

5. Давайте создадим домашнюю страницу React.

Сначала давайте импортируем пакеты, необходимые для нашего приложения React, запустив:

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

Создайте в своей src папке новый файл с именем Home.js. Это компонент, который увидят только вошедшие в систему пользователи.

Мы сделаем следующее:

Импортируйте необходимые пакеты
Импортировать aws-exports.js
Импорт компонентов пользовательского интерфейса Amplify
Позвоните Amplify.configure(awsExports), чтобы настроить Amplify
Добавить компонент AmplifySignOut
Оберните компонент Home в withAuthenticator()

Итак, наш Home.js должен выглядеть примерно так:

6. Заключительный шаг

В App.js удалим весь код и оставим кнопку «Войти» для перенаправления на компонент Home, когда пользователь нажимает на нее. Для простоты этого руководства давайте просто импортируем компонент Home напрямую. Ваш файл App.js должен выглядеть примерно так:

И это последний шаг. Теперь запустите yarn start в терминале для проверки.

Время для тестирования

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

Проверить доступ без аутентификации

Если ни один пользователь не вошел в систему, автоматически отобразится страница входа. Чтобы проверить, разрешен ли случайный пользователь, давайте введем фиктивные учетные данные и проверим, работает ли это.

Он не пропускает пользователя. Он показывает баннер, что Пользователь не существует.

Создание аккаунта

Давайте создадим учетную запись сейчас.

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

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

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

Давай авторизуемся

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

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

Заключение

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

Ссылка

Начало работы - Установка - Amplify Docs
Интерфейс командной строки Amplify (CLI) - это унифицированный набор инструментов для создания облачных сервисов AWS для вашего приложения. Поехали… docs.amplify.aws

Начало работы - Amplify Docs
Amplify Framework с открытым исходным кодом предоставляет следующие продукты для создания полнофункциональных iOS, Android, Flutter, Web и… docs.amplify .aws

Больше контента на plainenglish.io