Flutter + firebase authentication でユーザ登録

Flutter + firebase authentication でユーザ登録

flutterアプリにfirebase authenticationを使ってユーザ登録機能を作成する時の方法について、本ページで記載します。

firebase authenticationを使うにはまず別のページで紹介している初期設定が必要になります。

そちらの設定がまだの方はまずページを参照し初期設定を行ってください。

Firebase authenticationとは

firebaseが用意する認証機能です。これを使うことでユーザ認証機能を爆速で作成することができます。

Firebase authentication実装

1. firebase authenticationパッケージを導入

flutterアプリのpubspec.yaml(プロジェクトフォルダ直下)に「firebase_auth: ^0.18.2」を追加します。

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  firebase_core: ^0.5.1
  firebase_auth: ^0.18.2 

^0.18.2は記事を書いている時点の最新のバージョンなので「https://pub.dev/」のサイトでfirebase_authと調べて最新バージョンを確認してみてください。

2. firebase_authenticationをimport

firebase_authenticationのパッケージをソースにimportします。

対象のソースで下記のimport文を記載してください

import 'package:firebase_auth/firebase_auth.dart';

3. firebase_authのインスタンスを生成

FirebaseAuth.instanceでインスタンスが生成できます。

ユーザ登録の画面で下記のようにインスタンスを生成します。

class _RegistrationScreenState extends State<RegistrationScreen> {
  final _auth = FirebaseAuth.instance;
  String email;
  String password;
  @override
  Widget build(BuildContext context) {

4. Firebaseへのユーザ登録

email変数とpassword変数に登録するユーザのemailアドレス、passwordが格納されているという前提で

ユーザ登録時にクリックするユーザ登録ボタンのonPressedメソッドに下記のようなコードを記載します。

onPressed: () async {
                try {
                  final user = await _auth.createUserWithEmailAndPassword(
                      email: email, password: password);
                  if (user != null) {
                    Navigator.pushNamed(context, "ユーザ登録後の遷移先");
                  }
                } catch (e) {
                  print(e);
                }
              },

3で作成したfirebase authenticationのインスタンスの.createUserWithEmailAndPassword(
email: email, password: password);メソッドを呼ぶことでユーザが作成されます。

5. firebaseのサイトにてfirebase authenticationを有効化

firebaseのプロジェクトサイトの左のメニューで開発→Authenticationを選択します。

sign-in methodのタブを選択します。

ここで様々なユーザ認証方法を選択できますが、今回はemailでの認証にフォーカスしようと思います。

なので、プロバイダが「メール/パスワード」となっているものを選択しましょう。画像では過去に有効化したことがあるためステータスが「有効」になっていますが、初めての方は「無効」になっているかと思います。

クリックをすると下記の画像の画面が出てくるので、画像のように一番上のチェックを有効にしましょう

以上になります。

最後に実際にユーザ登録を行い、firebaseのサイトのauthenticationのusersタブに登録したユーザが追加されることを確認してみましょう

登録がされていればユーザ登録機能は完了になります。




Firebaseカテゴリの最新記事