使用 AWS Amplify 构建 Flutter 移动应用程序 - 第 1 部分

创建适用于 iOS 和 Android 的行程规划器应用程序

简介

模块 2：添加 Amplify 身份验证

概述

在本模块中，您将学习如何使用托管用户身份服务 Amazon Cognito 通过 Amplify Auth 类别对用户进行身份验证。

您还将学习如何使用 Amplify Authenticator 库快速创建应用程序的身份验证流程，只需几行代码就能让用户注册、登录和重置密码。

要完成的目标

向应用程序中添加 Amplify 身份验证类别
使用 Amplify Authenticator 实现身份验证流程

最短完成时间

10 分钟

操作步骤

向应用程序中添加 Amplify 身份验证类别

步骤 1：前往应用程序的根文件夹，并在终端运行以下命令。

amplify add auth

步骤 2：选择 Default configuration（默认配置）选项，登录方式选择 Email（电子邮件）。然后选择 No, I am done（不，我已完成）选项。

Using service: Cognito, provided by: awscloudformation
 
 The current configured provider is Amazon Cognito. 
 
 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Email
 Do you want to configure advanced settings? No, I am done.
✅ Successfully added auth resource amplifytripsplanner035b18d6 locally

✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

步骤 3：现在 Amplify Auth 类别已准备就绪。运行 amplify push 命令，在云上创建资源。

Run amplify push to create the resources

步骤 4：按下 Enter 键。Amplify CLI 将部署身份验证资源并显示确认消息，如屏幕截图所示。

The Amplify CLI deploys the authentication resources

使用 Amplify Authenticator 实现应用程序身份验证流程

步骤 1：在 lib/features/trip/ui 文件夹中新建一个文件夹并将其命名为 trips_list，然后在其中创建 trips_list_page.dart 文件。

步骤 2：打开 trips_list_page.dart 文件并使用以下代码更新该文件。这些代码对应的是应用程序的主页。

import 'package:flutter/material.dart';
import 'package:amplify_trips_planner/common/utils/colors.dart' as constants;

class TripsListPage extends StatelessWidget {
  const TripsListPage({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
          'Amplify Trips Planner',
        ),
        backgroundColor: const Color(constants.primaryColorDark),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        backgroundColor: const Color(constants.primaryColorDark),
        child: const Icon(Icons.add),
      ),
      body: const Center(
        child: Text('Trips List'),
      ),
    );
  }
}

步骤 3：在 lib/common/navigation/router 文件夹中新建一个文件并将其命名为 router.dart。

The router.dart file inside the router navigation folder

步骤 4：打开 router.dart 文件并使用以下代码更新该文件，为应用程序创建路由。

import 'package:amplify_trips_planner/common/navigation/router/routes.dart';
import 'package:amplify_trips_planner/features/trip/ui/trips_list/trips_list_page.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      name: AppRoute.home.name,
      builder: (context, state) => const TripsListPage(),
    ),
  ],
  errorBuilder: (context, state) => Scaffold(
    body: Center(
      child: Text(state.error.toString()),
    ),
  ),
);

步骤 5：在 lib 文件夹中新建一个 dart 文件并将其命名为 trips_planner_app.dart。

步骤 6：打开 trips_planner_app.dart 文件并使用以下代码更新该文件，将 MaterialApp 封装在一个 Amplify Authenticator 小部件中。

import 'package:amplify_authenticator/amplify_authenticator.dart';
import 'package:amplify_trips_planner/common/navigation/router/router.dart';
import 'package:amplify_trips_planner/common/utils/colors.dart' as constants;
import 'package:flutter/material.dart';

class TripsPlannerApp extends StatelessWidget {
  const TripsPlannerApp({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Authenticator(
      child: MaterialApp.router(
        routerConfig: router,
        builder: Authenticator.builder(),
        theme: ThemeData(
          colorScheme:
              ColorScheme.fromSwatch(primarySwatch: constants.primaryColor)
                  .copyWith(
            background: const Color(0xff82CFEA),
          ),
        ),
      ),
    );
  }
}

步骤 7：打开 main.dart 文件并使用以下代码更新该文件。其中包含为 Auth 类别配置 Amplify 的逻辑。

import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:amplify_trips_planner/trips_planner_app.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'amplifyconfiguration.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  try {
    await _configureAmplify();
  } on AmplifyAlreadyConfiguredException {
    debugPrint('Amplify configuration failed.');
  }

  runApp(
    const ProviderScope(
      child: TripsPlannerApp(),
    ),
  );
}

Future<void> _configureAmplify() async {
  await Amplify.addPlugins([
    AmplifyAuthCognito(),
  ]);
  await Amplify.configure(amplifyconfig);
}

步骤 8：在模拟器中运行应用程序，并使用身份验证流程创建用户。
下面是一个使用 iPhone 模拟器的示例。

结果

在本模块中，您仅用几行代码就在应用程序中实现了用户身份验证流程。在下一个模块中，我们将为应用程序添加 API。

开始学习模块 3