More than 3 years have passed since last update.

Flutter✕Firebase(Authentication編)

Last updated at 2021-04-04Posted at 2020-12-20

Flutterの記事を整理し本にしました

本稿の記事を含む様々な記事を体系的に整理し本にまとめました
今後はこちらを最新化するため、最新情報はこちらをご確認ください
10万文字を超える超大作になっています(笑)

はじめに

概要

FlutterとFirebaseのAuthenticationを使って、認証機構を実装します
メールとパスワードによる認証を作り、パスワードの再設定も実装します

対象読者

FlutterでFirebase(mBaaS)によるサーバ認証を行ってみたい人

Flutter系の記事のまとめ

スタート(前提条件)

flutterの基本概念を理解されているとより理解できると思います。
Firebaseをflutterで使えるようになるまでの初期設定は省略します。

ゴール(達成できること)

flutter✕FirebaseのAuthenticationで認証ができるようになります

スコープ外(ふれないもの)

認証方式はメール&パスワード方式のみとし、Google,Github,Lineなどのソーシャルアカウント認証については触れません

開発環境

flutterWebを用いているため、現時点でbetaのチャンネルを使っています

.sh

% flutter --version
Flutter 1.25.0-8.1.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 8f89f6505b (5 days ago) • 2020-12-15 15:07:52 -0800
Engine • revision 92ae191c17
Tools • Dart 2.12.0 (build 2.12.0-133.2.beta)

本編

全体像/結論

FirebaseのAuthenticationを設定し、flutterから呼び出すことで実現できます

実装例

ソースコードなど

pubspec.yml

# 依存関係を記述しておきます
firebase_core: ^0.5.3
firebase_auth: ^0.18.0

今回はWeb版で利用するため、index.htmlのjsについても読み込んでおきます

index.html

<script src="https://www.gstatic.com/firebasejs/8.2.0/firebase-auth.js"></script>

dartのソースコード(抜粋)

// パッケージのimport
import 'package:firebase_auth/firebase_auth.dart';

// 登録
final User user = (await FirebaseAuth.instance.createUserWithEmailAndPassword(
  email: email, password: password)).user;

// ログイン
User user = (await FirebaseAuth.instance.signInWithEmailAndPassword(
  email: email,password: password)).user;

// パスワードリセット
await FirebaseAuth.instance.sendPasswordResetEmail(email: email);

// 例外処理(すでに登録済、フォーマットエラー、パスワードが短すぎなど)
// 例外のメッセージを少し加工して、flushbarで表示しています
Flushbar(
  message:e.toString().replaceAll(RegExp(r'\[.*\] '), ''),
  flushbarPosition: FlushbarPosition.TOP,
  backgroundColor: Colors.deepOrangeAccent,
  margin: EdgeInsets.all(8),
  borderRadius: 8,
  duration: Duration(seconds: 5),
)..show(context);