Zenn
🐺

Flutter WebでFirebase Authenticationを使ったユーザー認証システムの実装方法

2024/06/28に公開
Firebase
Flutter
Google Cloud
Dart
Authentication
tech

はじめに

この記事では、Flutter WebとGoogle Cloud Platform（GCP）を使用して、Firebase Authenticationを利用したユーザー認証システムを構築する方法を紹介します。具体的には、Firebase Authenticationの導入、ユーザー登録、ログイン、ログアウト機能の実装、UIカスタマイズ、およびセキュリティベストプラクティスについて解説します。

Firebase Authenticationの導入

まず、Firebaseプロジェクトを作成し、Firebase Authenticationを有効にします。

Firebaseプロジェクトの作成

  1. Firebaseコンソールにアクセスし、プロジェクトを作成します。
  2. プロジェクトが作成されたら、左側のナビゲーションメニューから「Authentication」を選択し、「始める」をクリックします。
  3. 認証プロバイダを設定します。ここでは、Email/Passwordを使用しますので、「Email/Password」を有効にします。

FlutterプロジェクトへのFirebase導入

次に、FlutterプロジェクトにFirebaseを導入します。FlutterFire CLIを使用して簡単にセットアップできます。

flutter pub add firebase_core firebase_auth
flutterfire configure

これにより、Firebaseの設定ファイルが自動的に生成されます。

ユーザー登録、ログイン、ログアウト機能の実装

次に、ユーザー登録、ログイン、ログアウトの機能を実装します。

ユーザー登録

ユーザー登録機能は、新しいユーザーをFirebase Authenticationに登録するためのものです。以下は、ユーザー登録フォームの例です。

SignUpScreen.dart
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

class SignUpScreen extends StatefulWidget {
  @override
  _SignUpScreenState createState() => _SignUpScreenState();
}

class _SignUpScreenState extends State<SignUpScreen> {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _signUp() async {
    try {
      UserCredential userCredential = await _auth.createUserWithEmailAndPassword(
        email: _emailController.text,
        password: _passwordController.text,
      );
      // 登録成功後の処理
    } on FirebaseAuthException catch (e) {
      // エラーハンドリング
      print('Failed with error code: ${e.code}');
      print(e.message);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Sign Up')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            ElevatedButton(
              onPressed: _signUp,
              child: Text('Sign Up'),
            ),
          ],
        ),
      ),
    );
  }
}

ログイン

次に、ユーザーが既存のアカウントでログインできるようにします。

LoginScreen.dart
class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login() async {
    try {
      UserCredential userCredential = await _auth.signInWithEmailAndPassword(
        email: _emailController.text,
        password: _passwordController.text,
      );
      // ログイン成功後の処理
    } on FirebaseAuthException catch (e) {
      // エラーハンドリング
      print('Failed with error code: ${e.code}');
      print(e.message);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Login')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            ElevatedButton(
              onPressed: _login,
              child: Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}

ログアウト

ログアウト機能は非常にシンプルです。FirebaseAuthのsignOutメソッドを呼び出すだけです。

void _logout() async {
  await FirebaseAuth.instance.signOut();
}

Firebase Authenticationのカスタマイズ

UIのカスタマイズ

Flutterでは、Firebase AuthenticationのUIを自由にカスタマイズできます。上記の例でも、TextFieldやElevatedButtonを使用してUIを構築していますが、これをさらにカスタマイズして、ブランドに合わせたデザインにすることが可能です。

認証プロバイダの設定

Firebase Authenticationは、多くの認証プロバイダをサポートしています。Email/Password以外にも、Google、Facebook、Twitterなどの認証プロバイダを追加できます。Firebaseコンソールから認証プロバイダを有効にし、必要な設定を行います。

例えば、Google認証を追加する場合、以下のように設定します。

import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

void _signInWithGoogle() async {
  final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
  final GoogleSignInAuthentication googleAuth = await googleUser!.authentication;

  final AuthCredential credential = GoogleAuthProvider.credential(
    accessToken: googleAuth.accessToken,
    idToken: googleAuth.idToken,
  );

  await FirebaseAuth.instance.signInWithCredential(credential);
}

セキュリティとベストプラクティス

パスワードの強度

ユーザーが強力なパスワードを設定するように促すことが重要です。パスワードの強度を検証し、十分に強力でない場合は登録を拒否するようにします。

メールアドレスの検証

登録時にユーザーのメールアドレスを検証することも重要です。Firebase Authenticationは、メールアドレスの検証をサポートしています。

void _sendEmailVerification() async {
  User? user = FirebaseAuth.instance.currentUser;
  if (user != null && !user.emailVerified) {
    await user.sendEmailVerification();
  }
}

エラーハンドリング

適切なエラーハンドリングを行うことで、ユーザーにとってより良い体験を提供できます。例えば、ユーザーが既に存在するメールアドレスで登録を試みた場合や、間違ったパスワードでログインを試みた場合に適切なメッセージを表示します。

まとめ

Firebase Authenticationを使用すると、簡単に安全なユーザー認証システムを構築できます。この記事では、基本的な導入から、ユーザー登録、ログイン、ログアウト機能の実装、UIカスタマイズ、セキュリティのベストプラクティスについて解説しました。これらを組み合わせて、自分のアプリに最適なユーザー認証システムを構築してください。

Discussion