7分で出来た!FlutterでFirebase Authパッケージを使って認証を超簡単実装!

Dart

概要

どうも、@daiki1003です。
(目次、すごい長いですがほぼ画像なんで一瞬ですよ!笑)

本記事では、FlutterでFirebaseにおける認証を、
firebase_authパッケージを使って実装するところまで解説したいと思います。

前回の記事で、Firebaseのプロジェクト作成からREST APIを使った認証までを解説しました。

【超簡単!】FlutterでFirebaseを使って爆速コーディング!〜登録から認証まで〜
概要 みなさん、Firebase使ってますか? 「個人開発で何かを開発して世に出してみたい!」 って欲望のある人は確実に使った方が良いと思います。 めちゃくちゃ便利ですよ。 チーム開発した事がある人はすごさわかると...

この記事では、REST APIではなく
firebase_authパッケージを使って認証周りの実装をします。

それでは、解説していきましょー!

Flutterで使うためのFirebaseプロジェクト初期設定

iOS/Androidで少し手順は違いますが、どちらも解説します。
大まかな手順は、以下の通りです。

1. アプリ固有IDの登録
2. 設定ファイルのダウンロード
3. プロジェクトへ追加

です。
それでは、各プラットフォームの解説です。

iOSの場合

Firebaseプロジェクトを開く

iOSを選択

バンドルIDの設定画面になる

バンドルIDをコピーする

バンドルIDは

[project_root]/ios/Runner.xcworkspace

を開き、下記場所にあります。

バンドルID入力欄に貼り付けて、次へ

GoogleService-Info.plistをダウンロード

[project_root]/ios/Runner内にダウンロードしたplistを配置

xcodeprojに追加して次へ

3のプロセスは飛ばします

僕らが使いたいのはFlutter Firebase SDK出会ってFirebase SDKではないのでこちらのプロセスは
飛ばしてください。

4のプロセスも飛ばします

上記理由により、こちらのプロセスも飛ばしてください。

インストールの確認ステップ

こちらも飛ばしてしまって構いません。

これでFirebase側の設定は終わりです。
コーディングに進みましょう!

Androidの場合

Firebaseプロジェクトを開く

Androidを選択

Androidパッケージ名の設定画面になる

Androidパッケージ名をコピー

[project_root]/android/app/build.gradle

に下記記述があるので applicationIdの文字列部分をコピーします。

設定画面にペーストして、次へ

google-services.jsonをダウンロードして、指定の位置へ

gradleファイルの編集

Firebaseの画面の指示に従ってください。
基本的には、下記赤枠部分を追加するだけで事足りると思います。
また、最後の「Sync now」はしなくて良いです。

プロジェクトレベルのbuild.gradleファイルの変更([project_root]/android/build.gradle)

アプリレベルのbuild.gradle([project_root]/android/app/build.gradle)

Flutterのfirebase_authパッケージをインストール

まずは、今回の主役firebase_authパッケージをインストールします。

firebase_auth | Flutter Package
Flutter plugin for Firebase Auth, enabling Android and iOS authentication using passwords, phone numbers and identity providers like Google, Facebook and Twitte...

インストールの仕方がわからない場合はこちらの解説記事へどうぞ。

【超簡単!】Flutterのパッケージのインストール方法を説明するよ!
概要 Flutter(Dart)で画像のクリッピングするコードが書けますか? Flutter(Dart)でhttp通信するコードが書けますか? 大丈夫、書けなくて良いんです。 Flutterでは、色んな人が使いそ...

firebase_authを使ってコーディングしてみよう!

それでは、早速インストールしたfirebase_authパッケージを使ったコードを紹介します。

サンプルコード全体

daiki1003/firebase_sample
This is firebase sample created with flutter. Contribute to daiki1003/firebase_sample development by creating an account on GitHub.

・こちらの firebase_auth_package ブランチに移動
・上記設定ファイルを指定の場所に設置

して実行してみてください。

firebase_authを使ったサンプルコード (認証部分のみ)

import 'package:firebase_auth/firebase_auth.dart';

Future<void> trySubmit() async {
  // バリデーションなど

  final auth = FirebaseAuth.instance;
  if (_isLogin) {
    final result = await auth.signInWithEmailAndPassword(email: _email, password: _password);
    print(result.user.uid);
  } else {
    final result = await auth.createUserWithEmailAndPassword(email: _email, password: _password);
    print(result.user.uid);
  }
}

解説

めちゃくちゃ簡単じゃないですか?
もはや、解説いらないんじゃないかってくらいに。

ですが、軽く解説していきましょう。

FirebaseAuth.instance、こちらでFirebaseAuthのインスタンスを取得する事ができます。
お分かりかとは思いますが、シングルトンになっています。

このインスタンスに対して、
signInWithEmailAndPasswordないしcreateUserWithEmailAndPasswordメソッドを呼び出します。
これらのメソッドは Future<AuthResult> を返します。
なので、awaitを使ってAuthResultを取り出します。

成功すれば、このAuthResultに認証結果が格納されます。
ユーザー情報なども取得出来るので、
上記の例ではFirebaseによって割り振られた一意なIDを出力しています。

エラーハンドリングに関しては、近日中に記事を公開したいと思います。

firebase_authパッケージって何が良いの?

次に、firebase_authパッケージの何が良いのか
前回記事のコードと比較してみましょう。

【超簡単!】FlutterでFirebaseを使って爆速コーディング!〜登録から認証まで〜
概要 みなさん、Firebase使ってますか? 「個人開発で何かを開発して世に出してみたい!」 って欲望のある人は確実に使った方が良いと思います。 めちゃくちゃ便利ですよ。 チーム開発した事がある人はすごさわかると...

前回のコード

const GOOGLE_API_KEY = 'YOUR_API_KEY';
if (_isLogin) {
  final url =
      'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=$GOOGLE_API_KEY';
  final response = await http.post(url,
      body: json.encode({
        'email': _email,
        'password': _password,
        'returnSecureToken': true,
      }));
  print(json.decode(response.body));
} else {
  final url =
      'https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=$GOOGLE_API_KEY';
  final response = await http.post(url,
      body: json.encode({
        'email': _email,
        'password': _password,
        'returnSecureToken': true,
      }));
  print(json.decode(response.body));
}

ざっと違いを挙げると以下になるでしょうか。

1. API_KEYがない?
2. urlが必要ない?
3. jsonの処理をしたりキー名を指定したりしなくて良い?

API_KEYがない?

そうなんです、API_KEYないんですよ。
なんでかって言うと、予めGoogleの設定ファイルをダウンロードしましたよね?
それをパッケージ側が勝手に読み込んでくれるので使う我々は何もする必要はないと言う事ですね。

urlが必要ない?

urlはパッケージ側が管理してくれています。
急に古いURLが使えなくなることはありませんが、それでも変わる時はあります。

そんな時に、それぞれの場合だとどうなるか考えてみましょう。
今回の様に、パッケージを使っていれば何もする必要はありません。
しかし、前回(下の例)の様なやり方だとアプリのアップデートが必要になります。

jsonの処理をしたりキー名を指定したりしなくて良い?

これもurlが必要ない?と同じになりますが、
パッケージ側が管理してくれています。

最後に

いかがでしたでしょうか?
すごく簡単に認証周りの実装が出来ましたね!

次回はStreamBuilderの説明がてら、
認証の状態によって画面表示の出し分けを実装してみましょう!

誰かのお役に立てば。

Twitterフォローお願いします

「次回以降も記事を読んでみたい!」
「この辺分からなかったから質問したい!」

そんな時は、是非@daiki1003のフォローお願いします♪

また、記事がとても役に立ったと思う人は
コーヒーを奢っていただけると非常に嬉しいです!

コメント

タイトルとURLをコピーしました