Udemyセール開催中! 対象コースが1,220円から

【FlutterFire】メールアドレスとパスワード認証による新規登録

所有時間3分

今回はFirebaseAuthを使用してメールアドレスとパスワードによる新規登録機能を実装する方法を紹介します。

目次

今回のゴール

今回は新規登録ページで「メールアドレス」と「パスワード」を入力し新規登録ボタンを押したら、ログインして別のページに画面遷移する機能を作っていきます!

下準備

  1. Firebaseで新規プロジェクト作成
  2. Authenticationで「メール/パスワード」を有効にする
  3. pub.devから「firebase_core」と「firebase_auth」を導入
  4. 初期コードをコピペ

メール/パスワードの登録を有効化

Firebaseプロジェクト > Authentication > Sign-in methodから「メール/パスワード」をクリックします。

「メール/パスワード」を有効にして保存をクリック、これでFlutterアプリでユーザーがメールアドレスとパスワードを使用して登録できるようになります。

初期コードをコピペ

//初期コード
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';


void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(
    MaterialApp(
      initialRoute: '/register',
      routes: {
        '/register': (context) => const Register(),
        '/content': (context) => const MainContent(),
      },
    ),
  );
}

class Register extends StatefulWidget {
  const Register({Key? key}) : super(key: key);

  @override
  _RegisterState createState() => _RegisterState();
}

class _RegisterState extends State<Register> {
  String email = '';
  String password = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('新規登録'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: TextField(
              onChanged: (value) {
                email = value;
              },
              decoration: const InputDecoration(
                hintText: 'メールアドレスを入力',
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: TextField(
              onChanged: (value) {
                password = value;
              },
              obscureText: true,
              decoration: const InputDecoration(
                hintText: 'パスワードを入力',
              ),
            ),
          ),
          ElevatedButton(
            child: const Text('新規登録'),
            onPressed: () {
              try {
                Navigator.pushNamed(context, '/content');
              } catch (e) {
                print(e);
              }
            },
          )
        ],
      ),
    );
  }
}

class MainContent extends StatefulWidget {
  const MainContent({Key? key}) : super(key: key);

  @override
  _MainContentState createState() => _MainContentState();
}

class _MainContentState extends State<MainContent> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('成功'),
      ),
      body: Center(
        child: Text('新規登録成功!'),
      ),
    );
  }
}

初期コードをDartPadで実行してチェックしてみて下さい!

新規登録画面を作る

記事下の完成コードで示している「ステップ○」を参考にして読んでみて下さい。

ステップ1:FirebaseAuthをインスタンス化する

//ステップ1
final _auth = FirebaseAuth.instance;

FirebaseAuthをインスタンス化します。

ステップ2:入力されたメールアドレスとパスワードをチェック&登録

//ステップ2
onPressed: () async {
  try {
    final newUser = await _auth.createUserWithEmailAndPassword(
        email: email, password: password);
    if (newUser != null) {
      Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => const MainContent()),
      );
    }
  } catch (e) {
    print(e);
  }
}

TextFieldでユーザーから取得したメールアドレスとパスワードをそれぞれcreateUserWithEmailAndPassword()のemailプロパティ、passwordプロパティに渡します。

認証された場合はサインインされて、エラーが発生した場合は「FirebaseAuthException」のエラーコードがスローされます。

ステップ2の応用:エラーコード別に実行する処理を指定

  • email-already-in-use
  • invalid-email
  • operation-not-allowed
  • weak-password

createUserWithEmailAndPassword()のエラーは上記の4つだけなのでそれぞれのエラーコードがスローされた場合の処理を指定しておきます。

//ステップ2
onPressed: () async {
  try {
    final newUser = await _auth.createUserWithEmailAndPassword(
        email: email, password: password);
    if (newUser != null) {
      Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => const MainContent()),
      );
    }
  } on FirebaseAuthException catch (e) {
    if (e.code == 'email-already-in-use') {
      print('指定したメールアドレスは登録済みです');
    } else if (e.code == 'invalid-email') {
      print('メールアドレスのフォーマットが正しくありません');
    } else if (e.code == 'operation-not-allowed') {
      print('指定したメールアドレス・パスワードは現在使用できません');
    } else if (e.code == 'weak-password') {
      print('パスワードは6文字以上にしてください');
    }
  }
},

これでメールアドレスとパスワードによる新規登録は完了です。

完成コード

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(
    MaterialApp(
      initialRoute: '/register',
      routes: {
        '/register': (context) => const Register(),
        '/content': (context) => const MainContent(),
      },
    ),
  );
}

class Register extends StatefulWidget {
  const Register({Key? key}) : super(key: key);

  @override
  _RegisterState createState() => _RegisterState();
}

class _RegisterState extends State<Register> {
  //ステップ1
  final _auth = FirebaseAuth.instance;

  String email = '';
  String password = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('新規登録'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: TextField(
              onChanged: (value) {
                email = value;
              },
              decoration: const InputDecoration(
                hintText: 'メールアドレスを入力',
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: TextField(
              onChanged: (value) {
                password = value;
              },
              obscureText: true,
              decoration: const InputDecoration(
                hintText: 'パスワードを入力',
              ),
            ),
          ),
          ElevatedButton(
            child: const Text('新規登録'),
            //ステップ2
            onPressed: () async {
              try {
                final newUser = await _auth.createUserWithEmailAndPassword(
                    email: email, password: password);
                if (newUser != null) {
                  Navigator.pushNamed(context, '/content');
                }
              } on FirebaseAuthException catch (e) {
                if (e.code == 'email-already-in-use') {
                  print('指定したメールアドレスは登録済みです');
                } else if (e.code == 'invalid-email') {
                  print('メールアドレスのフォーマットが正しくありません');
                } else if (e.code == 'operation-not-allowed') {
                  print('指定したメールアドレス・パスワードは現在使用できません');
                } else if (e.code == 'weak-password') {
                  print('パスワードは6文字以上にしてください');
                }
              }
            },
          )
        ],
      ),
    );
  }
}

class MainContent extends StatefulWidget {
  const MainContent({Key? key}) : super(key: key);

  @override
  _MainContentState createState() => _MainContentState();
}

class _MainContentState extends State<MainContent> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('成功'),
      ),
      body: Center(
        child: Text('新規登録成功!'),
      ),
    );
  }
}

以上です。

参考

  • URLをコピーしました!
目次
閉じる