【超簡単!】FlutterでFirebaseを使って爆速コーディング!〜登録から認証まで〜

Dart

概要

みなさん、Firebase使ってますか?

「個人開発で何かを開発して世に出してみたい!」

って欲望のある人は確実に使った方が良いと思います。
めちゃくちゃ便利ですよ。

チーム開発した事がある人はすごさわかると思いますが、
メールアドレス登録/ログインの設定とか3秒で終わります笑

この記事では、そんな信じられないほど便利な
Firebaseの導入から使い方まで解説したいと思います。

でも、ちょっと待ってください。

FlutterもFirebaseも両方Googleじゃ…。

もう良いんです、魂を売り渡していきましょw

分量的に何本かの記事に分けて連載して行こうと思います。
今回はFirebaseへの登録と認証まで!

では張り切っていきましょー!

Flutter x Firebase (Authentication)

超簡単3ステップです!

1. Firebaseの登録
2. email/passwordによる認証の有効化
3. コーディング

の流れです。

まずは、Firebaseの登録から

ログイン - Google アカウント

こちらにアクセスします。

「プロジェクトを作成」をクリック

プロジェクト名の入力

Googleアナリティクスとの連携の設定

Firebaseプロジェクトの作成完了まで待つ

これで、Firebaseプロジェクトが作成されました。

Firebaseでメールアドレス&パスワードによる認証の有効化

Authenticationの選択

画面左にあるメニューからAuthenticationを選択します。

Sign-in Methodの選択

「メール / パスワード」 の選択

「有効にする」に変更

APIキーの取得

FirebaseのAPIを使うにはAPIキーが必要です。
それを取得しましょう。

管理画面TOP、「プロジェクトの概要」の右の歯車をクリック

「プロジェクトを設定」をクリック

このウェブAPIキーをコピーすれば終わりです。

これだけで、Firebaseの設定は終わりです。
簡単すぎませんか?

Flutterで使ってみよう

httpパッケージのインストール

http | Dart Package
A composable, multi-platform, Future-based API for HTTP requests.

こちらのパッケージをインストールします。

やり方がわからない方はこちらの記事で解説しています。

【超簡単!】Flutterのパッケージのインストール方法を説明するよ!
Flutterのパッケージのインストール方法で悩んでいませんか? この記事では、主に初心者向けにパッケージインストール方法からおすすめのパッケージについて解説しています。 是非ご覧ください♪

実際に使ってみる (サンプルコードあり)

それでは、実際にこの機能をウェブAPI経由で使ってみましょう。

Firebaseによる認証のサンプルコード (認証部分)

全部を載せると長くなりすぎるので、細分化して紹介したいと思います。
全体図に関しては、ダウンロードしてすぐに実行出来る様に下記にソースコードを用意してあります。

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

こちらをダウンロードして 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を載せておきますね。

Firebase Auth REST API

今回は、右のメニューの「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について詳しくない方はこちらの記事をご覧ください。

【誰でも分かる!】FlutterのFormを一から作りながら解説してみたよ
概要 「メールアドレス、パスワードの入力フォーム作りたいけどどうやれば良いかわからない...」 「TextFieldとか使って作ってみたけどコードがぐちゃぐちゃ...」 そんな悩みを抱えていませんか? アプリを作...

最後に

どうですか、すごい簡単でしたよね?

明日は、FirebaseAuthパッケージを使って
同じことをパッケージを使って実装する記事について解説しますのでお楽しみに!

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...
誰かのお役に立てば。

Twitterフォローお願いします

毎日技術ブログを更新しています。

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

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

コメント

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