在 AWS Amplify 上使用 Flutter

AWS Amplify 支持 Flutter

快速入门 - 如何在 AWS Amplify 平台创建 Flutter 全栈项目。

topimage

何时使用

Amplify 是一个非常有用的平台，用于托管全栈应用程序。

在其他教程中，这里是一个快速入门指南，教你如何启动一个新的 Flutter 项目，并与 AWS Amplify 顺利集成。

安装

在开始之前，请确保你已安装以下内容：

Node.js v18.17 或更高版本 - (使用 NVM 安装 Node.js)
npm v9 或更高版本
git v2.14.1 或更高版本 (为 Linux 安装一些有用的工具)
如果你还没有 AWS 账户，需要创建一个。AWS Amplify 是 AWS 免费套餐的一部分。
Flutter 的稳定版本 - (安装 Flutter)
配置你的 AWS 账户以使用 Amplify 指南（见下文）

如果你的 IAM 用户已附加了 AmplifyBackendDeployFullAccess 管理策略，可以跳过以下步骤。否则，请参见下面的 configure...

有关最新信息，请参阅 https://docs.amplify.aws/flutter/start/quickstart/

配置你的 AWS 账户以使用 Amplify 指南

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

创建具有 Amplify 权限的用户

一个对话框将打开，提示你“选择如何在你的 AWS 环境中配置 IAM 身份中心”。

选择使用 AWS Organizations 启用并继续。

接下来，我们将自动化一些步骤，模拟在 IAM 身份中心控制台中设置用户的操作。

要开始，请打开位于控制台页脚的 CloudShell。
在 CloudShell 终端中粘贴以下命令，并输入你希望与该 AWS 账户关联的电子邮件地址：

read -p "Enter email address: " user_email # 按 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 控制台中，导航到 Users > amplify_admin > 重置密码 > 向用户发送重置密码的电子邮件。
检查你的电子邮件（确保也检查垃圾邮件文件夹）。点击“重置密码”链接并选择一个密码。登录时请确保使用 amplify-admin 作为用户名。
现在在本地计算机上设置一个与你刚刚创建的用户关联的 AWS 配置文件。获取 IAM 身份中心用户凭证有几种方法，但我们将使用 AWS CLI 配置向导。
安装 AWS CLI
打开终端，你已准备好配置一个使用 SSO 用户的 AWS 配置文件。使用 CloudShell 中的信息来填写以下信息：

aws configure sso

| SSO 会话名称（推荐）: amplify-admin
| SSO 开始 URL: <START SESSION URL>
| SSO 区域: <your-region>
| SSO 注册范围 [sso:account:access]: <留空>
| 正在尝试自动在默认浏览器中打开 SSO 授权页面。
| 如果浏览器未打开或你希望使用其他设备授权此请求，请打开以下 URL：
|
| https://device.sso.us-east-2.amazonaws.com/
|
| 然后输入代码：
|
| SOME-CODE

提供这些信息后，浏览器将自动打开，提示你使用刚刚创建的用户名和密码登录并配置多因素设备进行身份验证。
现在返回终端并输入以下信息：

目前可用的唯一 AWS 账户是: <your-aws-account-id>
使用账户 ID <your-aws-account-id>
目前可用的唯一角色是: amplify-policy
使用角色名称 "amplify-policy"
CLI 默认客户端区域 [us-east-1]: <your-region>
CLI 默认输出格式 [None]:

确保将配置文件名称设置为 default。或者，记住自动生成的配置文件名称；你之后会需要它。

如果你已经配置了 default 配置文件 - 它将提供另一个配置文件名称

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 项目并启动沙盒。

这是下一步！！！ 没有项目，这将无法工作。

如果你有多个本地配置文件或你的配置文件名称不是 default，你可以使用 –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

安装 dependencies:
 - aws-amplify

✔ devDependencies 已安装
✔ dependencies 已安装
✔ 模板文件已创建
成功创建了一个新项目！

欢迎使用 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、使用 Apple 登录和 Facebook。

最快的方法是使用 Amplify UI 库中提供的 Authenticator 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 UI 组件。

添加依赖项后，你需要运行以下命令来安装依赖项：

flutter pub get

更新你的 main.dart 文件以使用 Amplify UI 组件

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("Error configuring Amplify: ${e.message}"));
  }
}

Future<void> _configureAmplify() async {
  try {
    await Amplify.addPlugin(AmplifyAuthCognito());
    await Amplify.configure(amplifyConfig);
    safePrint('Successfully configured');
  } on Exception catch (e) {
    safePrint('Error configuring 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

何时使用

安装

配置你的 AWS 账户以使用 Amplify 指南

创建 Flutter Amplify 应用

创建 Amplify 后端

添加身份验证

有用的链接