Flutter

【Flutter】get_itでFirebaseを設定し、ログイン機能を実装する

作成日：2022年04月11日

更新日：2022年04月13日

Flutter で Firebase を使用するために設定し、ログインを実装します。

Firebase と Flutter をやりとりするのには、パッケージで get_it を使用します。

まずは、Firebase にアクセスします。

『コンソールへ移動』をクリックします。

プロジェクトを追加をクリックします。

プロジェクト名を作成し、『続行』をクリックします。

Google アナリティクスを有効を解除します。

『続行』をクリックします。

プロジェクトが完成しました。

iOS を設定する

次に、iOS のアイコンをクリックします。

今、開発しているファイルに戻りましょう。

ios フォルダを xcode で開きます。

Visial Studio Code では、ios フォルダを右クリックし、『Open in Xcode』をクリックすると、xcode が開きます。

Runner の Bundle Identifer の中身をコピーします。

Firebase の ① アプリの登録にある、Apple バンドル ID へペーストします。

『アプリを登録』をクリックします。

② 設定ファイルのダウンロードで、『GoogleService-info.plist をダウンロード』をクリックします。

ダウンロードしたファイルを、Xcode の Runner ファイル内へドラッグ&ドロップします。

Pods フォルダの Podfile の 2 行目にある platform のコメントアウトを解除します。

現在、9.0 になっているところを、10.0 へ変更します。

Xcode の Runner をクリックし、TARGETS の deployment Info の iOS を 10.0 へ変更します。

また、TARGETS の上にある PROJECT 内の Runner をクリックします。

iOS Deployment Target を 10.0 へ変更しましょう。

これで、iOS のの設定が完了しました。

Android を設定する

次は、Android を設定します。

Firebase コンソールの『アプリを追加』をクリックします。

Android のアイコンをクリックしましょう。

今、開発しているファイルに戻りましょう。

android フォルダの app フォルダの build.gradle をクリックします。

defaultConfig 内の applicationId の内容をコピーします。

Firebase の ① アプリの登録にある、Apple バンドル ID へペーストします。

『アプリを登録』をクリックします。

② 設定ファイルのダウンロードで、『google-services.json をダウンロード』をクリックします。

ダウンロードしたファイルを、android フォルダの app フォルダにドラッグ&ドロップします。

Firebase に戻り、『次へ』をクリックします。

③Firebase SDK の追加の buildscript の dependencies にある classpath をコピーします。

android フォルダの build.gradle を開きます。

buildscript の dependencies に先程コピーした内容を貼り付けます。

③Firebase SDK の追加のapply plugin: 'com.android.application’をコピーします。

android フォルダの app フォルダの build.gradle をクリックします。

先程コピーした内容を貼り付けます。

同じファイル内の defaultConfig の minSdkVersion を 21 へ変更します。

Android の設定が完了しました。

Firebase のクラスを作成

Firebase とやりとりするために、新たにクラスを作成します。

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

まずは、firebase_core をインストールするために、ターミナルでflutter pub add firebase_coreを実行します。

次に、firebase_auth をインストールするために、ターミナルでflutter pub add firebase_authを実行します。

Firebase と Flutter をやりとりするのに、get_it を使用します。

ターミナルでdart pub add get_itを実行します。

最後に、ターミナルでflutter pub getを実行します。

lib フォルダに service フォルダを作成し、firebase_service.dart を作成します。

FirebaseService クラスを作成します。

dart
import 'package:firebase_auth/firebase_auth.dart';

class FirebaseService {
  FirebaseService();
}

main.dart に移動します。

firebase_coreとget_itをインポートします。

dart
import 'package:firebase_core/firebase_core.dart';
import 'package:get_it/get_it.dart';

main 内を async にします。

Firebase を初期化します。

dart
void main() async {
  await Firebase.initializeApp();
  GetIt.instance.registerSingleton<FirebaseService>(
  runApp(const MyApp());
}

このままではエラーになるので、アプリが適切に初期化されているか確認します。

WidgetsFlutterBindingのensureInitializedを設定します。

dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

先程作成した firebase_service をインポートします。

dart
import 'package:test_form/services/firebase_service.dart';

get_it で FirebaseService を生成します。

dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  GetIt.instance.registerSingleton<FirebaseService>(
    FirebaseService(),
  );
  runApp(const MyApp());
}

Flutter で Firebase 初期設定が完了しました。

Firebase の認証を実装する

Firebase の認証を実装します。

service フォルダの firebase_service.dart を開きます。

firebase_authをインポートします。

dart
import 'package:firebase_auth/firebase_auth.dart';

FirebaseAuth のインスタンスを参照します。

dart
import 'package:firebase_auth/firebase_auth.dart';

class FirebaseService {
  FirebaseAuth _auth = FirebaseAuth.instance;

  FirebaseService();
}

loginUser関数を作成します。

loginUserでは、emailとpasswordを設定します。

dart
class FirebaseService {
  FirebaseAuth _auth = FirebaseAuth.instance;

  FirebaseService();

  Future<bool> loginUser({
    required String email,
    required String password,
  })
}

FirebaseAuthのsignInWithEmailAndPasswordを使用し、email と password を非同期で確認します。

email と password が存在していた場合 true を返し、存在していない場合 false を開始ます。

また、ログイン時エラーが発生した場合 false を返すように、try/catch で設定します。

dart
import 'package:firebase_auth/firebase_auth.dart';

class FirebaseService {
  FirebaseAuth _auth = FirebaseAuth.instance;

  FirebaseService();

  Future<bool> loginUser({
    required String email,
    required String password,
  }) async {
    try {
      UserCredential _userCredential = await _auth.signInWithEmailAndPassword(
          email: email, password: password);
      if (_userCredential.user != null) {
        return true;
      } else {
        return false;
      }
    } catch (e) {
      print(e);
      return false;
    }
  }
}

前回作成した、ログインページにget_itとfirebase_serviceをインポートします。

前回作成した内容は、こちらをご確認ください。

【Flutter】ログイン画面を実装する

dart
import 'package:get_it/get_it.dart';
import 'package:test_form/services/firebase_service.dart';

FirebaseService の変数を作成します。

dart
class _LoginState extends State<Login> {
  double? _deviceWidth, _deviceHeight;

  FirebaseService? _firebaseService;

initStateを作成し、GetItのgetでFirebaseServiceを呼び出します。

dart
@override
void initState() {
  super.initState();
  _firebaseService = GetIt.instance.get<FirebaseService>();
}

Firebase の Authentication の接続を確認するために、_loginで_firebaseServiceのloginUserを設定します。

_resultを表示できるようにしておきましょう。

dart
void _login() async {
  _loginKey.currentState!.save();

  bool _result =
      await _firebaseService!.loginUser(email: _email!, password: _password!);
  print('認証結果： $_result');
}