FlutterアプリにAmazon Cognito認証を統合し、API Gatewayにリクエストを送る方法

AWS Amplifyを使用して、Flutterアプリに認証機能を追加し、認証されたユーザーに対してAmazon API Gatewayにリクエストを送信する方法を解説します。

前提条件

• AWSアカウント
• Amazon Cognitoユーザープール
• Amazon API Gatewayのセットアップ
• Amplify CLIのインストール

Amplify CLIのセットアップ

まず、Amplify CLIをインストールして初期設定を行います。

npm install -g @aws-amplify/cli
amplify init

次に、認証機能を追加します。

amplify add auth

これで、Amazon Cognitoユーザープールを作成し、Flutterアプリでのユーザー認証が可能になります。

Flutterプロジェクトに依存パッケージを追加

Flutterプロジェクトに以下のパッケージを追加します。

dependencies:
  amplify_flutter: ^0.3.0
  amplify_auth_cognito: ^0.3.0
  http: ^0.13.3  # APIリクエスト用

その後、以下のコマンドを実行して依存パッケージをインストールします。

flutter pub get

Amplifyの初期化

main.dartのファイルに以下のコードを追加し、Amplifyを初期化します。

import 'package:amplify_flutter/amplify.dart';
import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _amplifyConfigured = false;

  @override
  void initState() {
    super.initState();
    _configureAmplify();
  }

  void _configureAmplify() async {
    try {
      AmplifyAuthCognito auth = AmplifyAuthCognito();
      await Amplify.addPlugins([auth]);
      await Amplify.configure(amplifyconfig);

      setState(() {
        _amplifyConfigured = true;
      });
    } catch (e) {
      print('Amplify設定中にエラー: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Amazon Cognito 認証"),
        ),
        body: Center(
          child: _amplifyConfigured
              ? Text("Amplifyが設定されました")
              : Text("Amplifyを設定中..."),
        ),
      ),
    );
  }
}

認証機能の実装

以下のコードでユーザー認証機能を実装します。
ユーザーが認証された後、認証トークンを取得し、それを使ってAPI Gatewayにリクエストを送ることができます。

ユーザーのサインイン

Future<void> signInUser(String username, String password) async {
  try {
    SignInResult result = await Amplify.Auth.signIn(
      username: username,
      password: password,
    );

    if (result.isSignedIn) {
      print('ログイン成功');
      String token = (await Amplify.Auth.fetchAuthSession()).userPoolTokens.idToken;
      print('ID Token: $token');
      _callAPIGateway(token);
    } else {
      print('ログイン失敗');
    }
  } catch (e) {
    print('ログイン中にエラーが発生しました: $e');
  }
}

API Gatewayへのリクエスト送信

認証が通った後、取得したIDトークンを使って、Amazon API Gatewayにリクエストを送ります。
以下は、httpパッケージを使用してリクエストを送るコードです。

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<void> _callAPIGateway(String token) async {
  try {
    final response = await http.get(
      Uri.parse('https://your-api-id.execute-api.region.amazonaws.com/your-stage/your-resource'),
      headers: {
        'Authorization': 'Bearer $token',
      },
    );

    if (response.statusCode == 200) {
      print('APIレスポンス: ${response.body}');
    } else {
      print('APIリクエスト失敗: ${response.statusCode}');
    }
  } catch (e) {
    print('APIリクエストエラー: $e');
  }
}

まとめ

この手順では、FlutterアプリにAWS Amplifyを統合し、Amazon Cognitoを使って認証を行い、その認証トークンを利用してAPI Gatewayにリクエストを送信する方法を説明しました。
この統合により、セキュアな認証とクラウドリソースへのアクセスが可能になり、スケーラブルなアプリケーションを構築することができます。