概要
どうも、@daiki1003です。
(目次、すごい長いですがほぼ画像なんで一瞬ですよ！笑)
本記事では、FlutterでFirebaseにおける認証を、
firebase_authパッケージを使って実装するところまで解説したいと思います。
前回の記事で、Firebaseのプロジェクト作成からREST APIを使った認証までを解説しました。
この記事では、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を使ってコーディングしてみよう！
それでは、早速インストールしたfirebase_authパッケージを使ったコードを紹介します。
サンプルコード全体
・こちらの 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パッケージの何が良いのか
前回記事のコードと比較してみましょう。
前回のコード
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フォローお願いします
「次回以降も記事を読んでみたい！」「この辺分からなかったから質問したい！」
そんな時は、是非Twitter (@daiki1003)やInstagram (@ashdik_flutter)のフォローお願いします♪
Twitterコミュニティ参加お願いします
Twitterコミュニティ「Flutter lovers」を開設しました！参加お待ちしております😁
☕️ Buy me a coffee
また、記事がとても役に立ったと思う人はコーヒーを奢っていただけると非常に嬉しいです！
コメント