🐱

Flutter Firebase App Check デバッグトークン確認方法

2022/07/10に公開約3,500字

表題の通り、Flutterで開発中のアプリにFirebaseのApp Checkを導入。
開発環境からApp Checkを通した通信を行うにはデバッグトークンを発行する必要があるのですが、その確認方法につまづいたのでメモ。

App Checkとは

App Checkとは簡単に言うと、アプリとFirebaseとの通信を安全に行うための仕組みです。
Zenn上に解説されていらっしゃる方がいたので、引用いたします。

https://zenn.dev/moga/articles/appcheck_looks_good

App CheckをFlutterに導入する方法(Android特化)

AppCheckはまだまだ新しい仕組みなので、最新の導入方法はFlutterFireを参照ください。

https://firebase.flutter.dev/docs/app-check/default-providers
  1. パッケージインストール

まずはパッケージをインストールします。

flutter pub add firebase_app_check


  1. アプリのルート箇所でApp Checkの初期化
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';

// Import the firebase_app_check plugin
import 'package:firebase_app_check/firebase_app_check.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  await FirebaseAppCheck.instance.activate(
    webRecaptchaSiteKey: 'recaptcha-v3-site-key',
  );
  runApp(App());
}


  1. Firebaseのコンソールにアクセスし、App Checkの有効化

App Checkの有効化を行う前にアプリがFirebaseに登録されている必要があります。
ここでは説明を省略します。(以下の記事などが参考になりそう)

https://zenn.dev/namioto/articles/026077bdee5eaa#android編

また注意点として、SHA1が登録されている必要があります以下を参照
(必須とはかかれていませんが、調べた限り必要)

https://zenn.dev/takumiendoh/articles/42d870436bc9c882bb85


以上でApp Checkの準備は完了です。

ですが、

開発環境ではデバッグトークンが必要なんです...

以下に開発環境でもApp Checkを介した通信を行う方法が書かれているのですが、、、

https://firebase.flutter.dev/docs/app-check/debug-provider

デバッグトークンが表示されない!

という問題?に直面したので、以下に手順を示します。
(繰り返しになりますが、最新情報をよく確認した上で以下を参照ください)

1.android/app/build.gradleに以下を追加

恐らく下の方にdependenciesがあると思います。

android/app/build.gradle
// ...
dependencies {
  implementation 'com.google.firebase:firebase-appcheck-debug:16.0.0-beta01'
}
// ...


  1. android/src/main以下のMainActivity.ktを変更

flutterの立ち上げ時にkotlinを選択していればMainActivity.ktがあるはずです。
そこを編集します。

MainActivity.kt
package プロジェクト名

import io.flutter.embedding.android.FlutterActivity
import android.os.Bundle

import com.google.firebase.FirebaseApp
import com.google.firebase.appcheck.FirebaseAppCheck
import com.google.firebase.appcheck.debug.DebugAppCheckProviderFactory

class MainActivity : FlutterActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        FirebaseApp.initializeApp(/*context=*/this);
        val firebaseAppCheck = FirebaseAppCheck.getInstance();
        firebaseAppCheck.installAppCheckProviderFactory(
            DebugAppCheckProviderFactory.getInstance()
        );
        super.onCreate(savedInstanceState)

    }
}


ここまではドキュメント通りです。

ここからがつまづいたポイントです。

  1. デバッグトークンを確認するためにlogcatを閲覧可能な状態にする


Android Studio の Event log、Android framework is detected.
Configureをクリック

その後、ダイアログが表示されるのでOKをクリック

すると、Logcatが確認できるようになるのでクリック


  1. Flutter アプリ実行

flutter runでアプリを実行


  1. Logcatを確認

Logcatに色々とログが表示されると思うので検索ボックスにDebugAppCheckProviderを入力すると、debug tokenが表示される

やった!


いつものコンソールに表示されると思いきや、Logcatにしか表示されず時間をかけてしまった...

よくよく考えればFlutterではなく、Kotlinでデバッグトークンを発行しているので、当たり前の話ですが(笑)

簡易的な記事になっておりますが、ネイティブアプリ開発をFlutterから始めた人などに役に立てば幸いです!

Discussion

ログインするとコメントできます