Flutter на AWS Amplify

AWS Amplify с поддержкой Flutter

Содержимое страницы

Быстрый старт - как создать Полный стек Flutter-проекта на AWS Amplify платформа.

topimage

Когда

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

Среди других инструкций Вот быстрый старт, как запустить новый проект Flutter, который отлично интегрируется с AWS Amplify.

Установка

Перед тем как приступить, убедитесь, что у вас установлены следующие компоненты:

Node.js v18.17 или более поздней версии - (Установка Node.js с помощью NVM)
npm v9 или более поздней версии
git v2.14.1 или более поздней версии (Установка некоторых приятных инструментов для Linux)
Вы также должны создать учетную запись AWS, если у вас еще нет. AWS Amplify является частью бесплатного тарифного плана AWS.
Стабильная версия Flutter - (Установка Flutter)
Настройте вашу учетную запись AWS для использования с инструкциями Amplify. (см. ниже)

Если у вас есть профиль IAM, привяжите управляемую политику AmplifyBackendDeployFullAccess к вашему пользователю IAM. иначе - см. ниже настройка...

Для обновленной информации см. https://docs.amplify.aws/flutter/start/quickstart/

Настройка вашей учетной записи AWS для использования с инструкциями Amplify

https://docs.amplify.aws/flutter/start/account-setup/

Создайте пользователя с разрешениями Amplify

Войдите в консоль AWS, чтобы получить доступ к странице IAM Identity Center и выберите Включить.

Откроется диалоговое окно, которое попросит вас “Выбрать, как настроить IAM Identity Center в вашей среде AWS.”

Выберите Включить с использованием AWS Organizations и нажмите Продолжить.

Теперь мы автоматизируем несколько шагов, которые имитируют операции по настройке пользователя в консоли IAM Identity Center.

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

read -p "Enter email address: " user_email # hit enter

Enter email address: <your-email-address>

Теперь выполните следующую команду

response=$(aws sso-admin list-instances)
ssoId=$(echo $response | jq '.Instances[0].IdentityStoreId' -r)
ssoArn=$(echo $response | jq '.Instances[0].InstanceArn' -r)
email_json=$(jq -n --arg email "$user_email" '{"Type":"Work","Value":$email}')
response=$(aws identitystore create-user --identity-store-id $ssoId --user-name amplify-admin --display-name 'Amplify Admin' --name Formatted=string,FamilyName=Admin,GivenName=Amplify --emails "$email_json")
userId=$(echo $response | jq '.UserId' -r)
response=$(aws sso-admin create-permission-set --name amplify-policy --instance-arn=$ssoArn --session-duration PT12H)
permissionSetArn=$(echo $response | jq '.PermissionSet.PermissionSetArn' -r)
aws sso-admin attach-managed-policy-to-permission-set --instance-arn $ssoArn --permission-set-arn $permissionSetArn --managed-policy-arn arn:aws:iam::aws:policy/service-role/AmplifyBackendDeployFullAccess
accountId=$(aws sts get-caller-identity | jq '.Account' -r)
aws sso-admin create-account-assignment --instance-arn $ssoArn --target-id $accountId --target-type AWS_ACCOUNT --permission-set-arn $permissionSetArn --principal-type USER --principal-id $userId

Чтобы проверить, что это сработало, выполните следующую команду в CloudShell. Если

printf "\n\nStart session url: https://$ssoId.awsapps.com/start\nRegion: $AWS_REGION\nUsername: amplify-admin\n\n"

Вы должны увидеть

Start session url: https://d-XXXXXXXXXX.awsapps.com/start
Region: us-east-1
Username: amplify-admin

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

В консоли IdC перейдите в раздел Пользователи > amplify_admin > Сбросить пароль > Отправить электронное письмо пользователю с инструкциями по сбросу пароля.
Проверьте свою электронную почту (убедитесь, что вы также проверяете папку со спамом). Нажмите на ссылку Сбросить пароль и выберите пароль по своему выбору. При входе убедитесь, что используете amplify-admin в качестве имени пользователя.
Теперь настройте профиль AWS, связанный с пользователем, который вы только что создали на вашем локальном компьютере. Существует несколько вариантов получения учетных данных пользователя IAM Identity Center, но мы будем использовать мастер настройки AWS CLI.
Установите AWS CLI
Откройте свой терминал, вы готовы настроить профиль AWS, который использует пользователя SSO. Используйте информацию из CloudShell, чтобы заполнить информацию ниже.

aws configure sso

| SSO session name (Recommended): amplify-admin
| SSO start URL: <START SESSION URL>
| SSO region: <your-region>
| SSO registration scopes [sso:account:access]: <leave blank>
| Попытка автоматического открытия страницы авторизации SSO в вашем стандартном браузере.
| Если браузер не открывается или вы хотите использовать другое устройство для авторизации этого запроса, откройте следующий URL:
|
| https://device.sso.us-east-2.amazonaws.com/
|
| Затем введите код:
|
| SOME-CODE

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

Единственная доступная учетная запись AWS: <your-aws-account-id>
Использование идентификатора учетной записи <your-aws-account-id>
Единственная доступная роль: amplify-policy
Использование имени роли "amplify-policy"
Регион по умолчанию для клиента CLI [us-east-1]: <your-region>
Формат вывода по умолчанию для CLI [None]:

Убедитесь, что имя профиля установлено по умолчанию. В качестве альтернативы запомните автоматически сгенерированное имя профиля; вам понадобится это позже.

Если у вас уже настроен профиль по умолчанию - он предложит вам другое имя профиля

Имя профиля CLI [amplify-policy-<your-aws-account-id>]: default
Чтобы использовать этот профиль, укажите имя профиля с помощью --profile, как показано:

aws s3 ls --profile default

Если вы проверите ~/.aws/config, вы должны увидеть профиль SSO:

nano ~/.aws/config

[profile default]
sso_session = amplify-admin
sso_account_id = <your-aws-account-id>
sso_role_name = AdministratorAccess
region = <your-region>
[sso-session amplify-admin]
sso_start_url = https://xxxxxx.awsapps.com/start#
sso_region = <your-region>
sso_registration_scopes = sso:account:access

Настройка вашей учетной записи AWS

Теперь вы готовы использовать этот профиль AWS с AWS Amplify.

Откройте свой проект Amplify и запустите песочницу.

это следующий шаг!!! без проекта это не сработает.

Если у вас есть несколько локальных профилей или вы назвали свой профиль не по умолчанию, вы можете указать профиль с помощью –profile.

npx ampx sandbox

или

npx ampx sandbox --profile <profile-name>

Создание Flutter-приложения Amplify

flutter create my_amplify_app
cd my_amplify_app

Создание бэкенда Amplify

npm create amplify@latest -y

Выполнение этой команды создаст файлы бэкенда Amplify в вашем текущем проекте с добавлением следующих файлов:

├── amplify/
│   ├── auth/
│   │   └── resource.ts
│   ├── data/
│   │   └── resource.ts
│   ├── backend.ts
│   └── package.json
├── node_modules/
├── .gitignore
├── package-lock.json
├── package.json
└── tsconfig.json

выход будет выглядеть примерно так

Установка devDependencies:
 - @aws-amplify/backend
 - @aws-amplify/backend-cli
 - aws-cdk@^2
 - aws-cdk-lib@^2
 - constructs@^10.0.0
 - typescript@^5.0.0
 - tsx
 - esbuild

Установка зависимостей:
 - aws-amplify

✔ DevDependencies установлены
✔ Зависимости установлены
✔ Созданы шаблонные файлы
Успешно создан новый проект!

Добро пожаловать в AWS Amplify!
 - Начните с выполнения команды npx ampx sandbox.
 - Выполните команду npx ampx help для получения списка доступных команд.

Amplify собирает анонимные данные телеметрии о общем использовании CLI. Участие является добровольным, и вы можете отказаться от него, используя npx ampx configure telemetry disable. Чтобы узнать больше о телеметрии, посетите https://docs.amplify.aws/react/reference/telemetry

вы видите? вы можете выполнить…

npx ampx configure telemetry disable

Теперь настройте песочницу Amplify для каждого разработчика

Чтобы развернуть ваш бэкенд, используйте песочницу Amplify для каждого разработчика. Эта функция предоставляет отдельную среду бэкенда для каждого разработчика в команде, идеально подходящую для локального разработки и тестирования. Чтобы запустить ваше приложение с использованием среды песочницы, вы можете выполнить следующую команду:

npx ampx sandbox --outputs-format dart --outputs-out-dir lib

или

npx ampx sandbox --outputs-format dart --outputs-out-dir lib --profile <profile-name>

Добавление аутентификации

Исходный шаблон уже имеет предварительно настроенный бэкенд аутентификации, определенный в файле amplify/auth/resource.ts. Мы настроили его для поддержки входа по электронной почте и паролю, но вы можете расширить его для поддержки различных механизмов входа, включая Google, Amazon, Sign In With Apple и Facebook.

Самый быстрый способ запустить ваш опыт входа - использовать компонент пользовательского интерфейса Authenticator, доступный в библиотеке Amplify UI.

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

pubspec.yaml:

dependencies:
  amplify_flutter: ^2.0.0       # для подключения вашего приложения к ресурсам Amplify.
  amplify_auth_cognito: ^2.0.0  # для подключения вашего приложения к ресурсам Amplify Cognito.
  amplify_authenticator: ^2.0.0 # для использования компонентов пользовательского интерфейса Amplify.

После добавления зависимостей вам нужно выполнить следующую команду для установки зависимостей:

flutter pub get

Обновите свой файл main.dart, чтобы использовать компоненты пользовательского интерфейса Amplify

main.dart:

import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_authenticator/amplify_authenticator.dart';
import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:flutter/material.dart';

import 'amplify_outputs.dart';

Future<void> main() async {
  try {
    WidgetsFlutterBinding.ensureInitialized();
    await _configureAmplify();
    runApp(const MyApp());
  } on AmplifyException catch (e) {
    runApp(Text("Ошибка настройки Amplify: ${e.message}"));
  }
}

Future<void> _configureAmplify() async {
  try {
    await Amplify.addPlugin(AmplifyAuthCognito());
    await Amplify.configure(amplifyConfig);
    safePrint('Успешно настроено');
  } on Exception catch (e) {
    safePrint('Ошибка настройки Amplify: $e');
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return Authenticator(
      child: MaterialApp(
        builder: Authenticator.builder(),
        home: const Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SignOutButton(),
                Text('TODO Application'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

И теперь посмотрите на эту красоту, страница аутентификации здесь:

signin page

и AWS Cognito уже выполняет проверку электронной почты

Внутри немного, но все равно:

empty app page