【FlutterFlow】App Stateを使った重要情報の管理方法

FlutterFlow

FlutterFlowは、ノーコードでアプリケーション開発が可能なプラットフォームとして、多くの開発者に利用されています。アプリケーション開発において、APIキーやユーザー認証情報などの重要情報の管理は非常に重要です。

本記事では、FlutterFlowのApp Stateを使ってこれらの重要情報をどのように安全に管理するかについて解説します。

FlutterFlowにおける重要情報の管理の重要性

アプリケーション開発において、APIキーやユーザー認証情報はアプリケーションの機能を支える重要な要素です。これらの情報が漏洩すると、アプリケーションが不正利用されたり、ユーザーデータが盗まれたりするリスクがあります。

そのため、これらの情報を安全に管理することは、アプリケーションの信頼性とセキュリティを確保するために不可欠です。

App Stateの概要

FlutterFlowでは、アプリケーションの状態を管理するためにApp Stateという機能が提供されています。

App Stateは、アプリ全体で共有される変数やデータを管理するための機能であり、これを使用することで、ユーザーのセッション情報や一時的なデータを簡単に管理できます。

App Stateの特徴

FlutterFlowのApp Stateには以下のような特徴があります:

  1. グローバルな状態管理:
    アプリ全体で共有される変数を管理できるため、異なる画面やコンポーネント間でデータを簡単に共有できます。
  2. 多様なデータ型のサポート:
    文字列、数値、ブール値、リストなど、様々なデータ型を扱うことができます。
  3. 永続化オプション:
    「Persisted」オプションを有効にすることで、アプリの再起動後もデータを保持できます。
  4. セキュアな保存機能:
    「Secure persisted fields」オプションにより、機密情報を端末固有の暗号化ストレージに安全に保存できます。
  5. 簡単な設定と使用:
    GUIを通じて簡単に変数を追加・管理でき、コード内でも簡単にアクセスできます。
  6. リアルタイムな更新:
    App State変数の値が変更されると、関連するUIが自動的に更新されます。
  7. カスタムアクションとの連携:
    カスタムアクション内でApp State変数を簡単に読み取り・更新できます。

App Stateはどこから使う?

App Stateは左側メニューの中ほどにあるApp Valuesから作成できます。

Field Name, Data Typeを設定することですぐに使えます。

App Stateのセキュリティ機能

FlutterFlowのApp Stateには、データを安全に管理するためのいくつかのセキュリティ機能が含まれています。特に「Securing persisted field」機能は、重要な情報を保護するために役立ちます。

Securing persisted fieldとは

Securing persisted fieldは、App Stateに保存されるデータを暗号化する機能です。

この機能を有効にすることで、デバイス上に保存されるデータが暗号化され、不正アクセスやデータの漏洩から保護されます。

公式サイトの記載はこちら

App State | FlutterFlow Docs

APIキーの安全な管理方法

APIキーは、外部サービスと連携するために使用される重要な情報です。これを安全に管理するためには、以下の手順を遵守することが重要です。

ステップ1: APIキーを保存するためのApp Stateを作成

まず、APIキーをApp Stateに保存するための箱を作ります。App Stateの「+ Add App State Variable」を押して作成を開始します。

例えば、以下のようにAPIKeyを補完するためのApp Stateを作成します。
この際、PersistedをONにしておいてください

persistedをONにすると、Secure persisted fieldsを設定できるようになりますので、こちらのSecure persisted fieldsもONにしてください。

これでpersisted fieldsの中身が暗号化されます。

あとは、以下のようにデフォルトのAPIキーの値を設定すれば完了です。

ステップ2: APIキーの使用時にApp Stateから取得する

APIキーを使用する際は、App Stateから取得します。

アクションの中で値を取得する

こちらは簡単。値を取得するSet Variableの中にApp Stateがあるのでそれを使えばOKです。

API Callで使用する

API Callの中で使用する場合には以下のように実装します。今回の例はStripeのAPIを使用する際にHeadersにAPI keyを設定する際の方法になります。

Headersは以下のように変数としてapiKeyを取ってくるようにします。

変数(Variables)の設定は以下のようになります。

APIをコールする際にApp stateの値(以下の例はApp stateに保管したstripeAPIKey)を渡します。

ベストプラクティス

FlutterFlowで重要情報を管理する際のベストプラクティスをいくつか紹介します。

定期的なキーのローテーション

APIキーや認証トークンは定期的に更新することで、セキュリティリスクを軽減します。

FlutterFlowでキーをローテーションする際は、以下の手順を踏みます:

  1. 新しいAPIキーを生成
  2. App StateのapiKey変数を更新
  3. アプリをリリース
  4. 一定期間後、古いキーを無効化

最小権限の原則

必要最低限の権限だけを持つキーを使用することで、不正利用のリスクを減らします。

セキュアな通信

APIキーを使用してサーバーと通信する際は、必ずHTTPS接続を使用してください。

FlutterFlowでは、デフォルトでHTTPS接続が使用されますが、カスタムAPIを使用する場合は特に注意が必要です。

バックエンドでの処理実行

可能な限り、重要な操作はバックエンド(例:Firebase Cloud Functions)で行うようにしましょう。これにより、クライアントサイドでAPIキーを直接使用する必要性を減らすことができます。
今回はクライアント側でAPIキーを保存して使用していますが、FlutterFlowの場合はcloud functionを利用できるのでサーバーサイドで処理を実装することで更にセキュリティを強固に出来ます。

例えば、Stripeの支払い処理を行う場合、以下のようなアプローチを取ることができます:

  1. FlutterFlowアプリから必要な情報(金額、商品IDなど)をCloud Functionに送信
  2. Cloud Function内でStripe APIキーを使用して支払い処理を実行
  3. 結果をFlutterFlowアプリに返す

まとめ

FlutterFlowでの重要情報の管理は、アプリケーションのセキュリティを確保するために非常に重要です。

App Stateのセキュリティ機能を活用し、APIキーやユーザー認証情報を安全に管理することで、アプリケーションの信頼性とセキュリティを向上させることができます。

本記事で紹介した方法とベストプラクティスを参考に、安全なアプリケーション開発を行いましょう。