🐱

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

2022/07/11に公開2件

Firebase

Flutter

appcheck

tech

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

App Checkとは

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

App CheckをFlutterに導入する方法（Android特化）

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

パッケージインストール

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

flutter pub add firebase_app_check

アプリのルート箇所で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());
}

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

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

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

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

ですが、

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

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

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

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

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

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

android/app/build.gradle

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

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)

    }
}

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

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

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

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

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

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

Flutter アプリ実行

flutter runでアプリを実行

Logcatを確認

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

やった！

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

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

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

Discussion

Santa Takahashi

このactivateのandroidProviderのデフォルト値はAndroidProvider.platIntegrityとなっていて、debugトークンを扱うオプションになってないように見えます👀
もし記事に書いてあるようにデフォルト値をそのまま使っていたのであれば、ここにAndroidProvider.debugと入れると自分の環境では問題なく生成されたので、もしかするとこれで解決できたかもしれません！！

  Future<void> activate(
      {String? webRecaptchaSiteKey,
      AndroidProvider androidProvider = AndroidProvider.playIntegrity}) {
    return _delegate.activate(
        webRecaptchaSiteKey: webRecaptchaSiteKey,
        androidProvider: androidProvider);
  }

Taiki.Asakawa

なるほど！ありがとうございます！！
自環境で試してみます！