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

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

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

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

image2

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

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

image3

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

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

image4

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

image5

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

iOS を設定する

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

image6

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

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

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

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

image7

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

image8

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

image9

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

image10

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

image11

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

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

image12

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

image13

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

image14

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

image15

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

Android を設定する

次は、Android を設定します。

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

image16

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

image17

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

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

image18

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

image19

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

image20

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

image21

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

image22

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

image23

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

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

image24

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

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

image25

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

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

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

image26

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

image27

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 クラスを作成します。

import 'package:firebase_auth/firebase_auth.dart';

class FirebaseService {
  FirebaseService();
}

main.dart に移動します。

firebase_coreget_itをインポートします。

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

main 内を async にします。

Firebase を初期化します。

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

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

WidgetsFlutterBindingensureInitializedを設定します。

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

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

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

get_it で FirebaseService を生成します。

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をインポートします。

import 'package:firebase_auth/firebase_auth.dart';

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

import 'package:firebase_auth/firebase_auth.dart';

class FirebaseService {
  FirebaseAuth _auth = FirebaseAuth.instance;

  FirebaseService();
}

loginUser関数を作成します。

loginUserでは、emailpasswordを設定します。

class FirebaseService {
  FirebaseAuth _auth = FirebaseAuth.instance;

  FirebaseService();

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

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

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

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

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_itfirebase_serviceをインポートします。

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

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

FirebaseService の変数を作成します。

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

  FirebaseService? _firebaseService;

initStateを作成し、GetItgetFirebaseServiceを呼び出します。

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

Firebase の Authentication の接続を確認するために、_login_firebaseServiceloginUserを設定します。

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

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

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

一通り完成したので、動作確認します。

Firebase の Authentication にメールアドレスとパスワードを登録したユーザーを作成しておきます。

image28

まずは、Android から確認します。

適当に入力して、ログインボタンをタップすると、

image29

認証結果:false が表示されました。

では、Firebase で登録したユーザー情報を入力して、ログインボタンをタップしてみます。

image30

認証結果:true が表示されました。

次は、iOS を確認します。

適当に入力して、ログインボタンをタップすると、

image31

こちらも認証結果:false が表示されました。

では、Firebase で登録したユーザー情報を入力して、ログインボタンをタップしてみます。

image32

認証結果:true が表示されました。

Android と iOS、どちらも Firebase で認証することができました。

次回は、ユーザー登録機能を実装します。

ブログ一覧