概要
みなさん、Firebase使ってますか？
「個人開発で何かを開発して世に出してみたい！」
って欲望のある人は確実に使った方が良いと思います。
めちゃくちゃ便利ですよ。
チーム開発した事がある人はすごさわかると思いますが、
メールアドレス登録/ログインの設定とか3秒で終わります笑
この記事では、そんな信じられないほど便利な
Firebaseの導入から使い方まで解説したいと思います。
でも、ちょっと待ってください。
FlutterもFirebaseも両方Googleじゃ…。
もう良いんです、魂を売り渡していきましょｗ
分量的に何本かの記事に分けて連載して行こうと思います。
今回はFirebaseへの登録と認証まで！
では張り切っていきましょー！
Flutter x Firebase (Authentication)
超簡単3ステップです！
1. Firebaseの登録
2. email/passwordによる認証の有効化
3. コーディング
の流れです。
まずは、Firebaseの登録から
こちらにアクセスします。
「プロジェクトを作成」をクリック
プロジェクト名の入力
Googleアナリティクスとの連携の設定
Firebaseプロジェクトの作成完了まで待つ
これで、Firebaseプロジェクトが作成されました。
Firebaseでメールアドレス＆パスワードによる認証の有効化
Authenticationの選択
画面左にあるメニューからAuthenticationを選択します。
Sign-in Methodの選択
「メール / パスワード」 の選択
「有効にする」に変更
APIキーの取得
FirebaseのAPIを使うにはAPIキーが必要です。
それを取得しましょう。
管理画面TOP、「プロジェクトの概要」の右の歯車をクリック
「プロジェクトを設定」をクリック
このウェブAPIキーをコピーすれば終わりです。
これだけで、Firebaseの設定は終わりです。
簡単すぎませんか？
Flutterで使ってみよう
httpパッケージのインストール
こちらのパッケージをインストールします。
やり方がわからない方はこちらの記事で解説しています。
実際に使ってみる (サンプルコードあり)
それでは、実際にこの機能をウェブAPI経由で使ってみましょう。
Firebaseによる認証のサンプルコード (認証部分)
全部を載せると長くなりすぎるので、細分化して紹介したいと思います。
全体図に関しては、ダウンロードしてすぐに実行出来る様に下記にソースコードを用意してあります。
こちらをダウンロードして firebase_auth_web ブランチで実行してみてください。
Firebase認証部分
import 'dart:convert';
import 'package:http/http.dart' as http;
Future<void> trySubmit() async {
// バリデーション等...
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));
}
解説
まず、認証部分のURLですが下記にREST API Referenceを載せておきますね。
今回は、右のメニューの「Sign in with email / password」「Sign up with email / password」が
該当しますのでこちらをクリックします。
そうすると、上記サンプルのURLがそれぞれ見つかると思います。
[API_KEY]の部分には前項で取得したAPI_KEYを入れます。
Firebaseへのパラメタの渡し方
これは、Firebaseに限った話ではなく、httpパッケージの話ですが、
postメソッドの引数としてbodyの中にjsonを入れてやるとパラメタを送信する事ができます。
ドキュメントを見ると、
・email
・password
・returnSecureToken
の3つを必要としているので、これらをキーに指定してMapにします。
このMapをjson.encodeすることによりjsonの形式で渡す事ができる様になります。
※json.encode/decodeを使うには
import 'dart:convert';
が必要です。
レスポンスのパース
正しく通信されていれば、responseが正しく初期化されます。
json.decode(response.body)
としてやれば、レスポンスをMapとして扱う事ができる様になります。
Firebaseによる認証の実行結果
flutter: {kind: identitytoolkit#SignupNewUserResponse, idToken: eyJ...xSQ, email: test2@test.com, refreshToken<…>
と言う結果が返ってきました。
補足
このサンプル記事では、Formと言うウィジェットを使って新規登録/サインインの実装をしました。
Formについて詳しくない方はこちらの記事をご覧ください。
最後に
どうですか、すごい簡単でしたよね？
明日は、FirebaseAuthパッケージを使って
同じことをパッケージを使って実装する記事について解説しますのでお楽しみに！
Twitterフォローお願いします
「次回以降も記事を読んでみたい！」「この辺分からなかったから質問したい！」
そんな時は、是非Twitter (@daiki1003)やInstagram (@ashdik_flutter)のフォローお願いします♪
Twitterコミュニティ参加お願いします
Twitterコミュニティ「Flutter lovers」を開設しました！参加お待ちしております😁
☕️ Buy me a coffee
また、記事がとても役に立ったと思う人はコーヒーを奢っていただけると非常に嬉しいです！
コメント