🐙

【Flutter】Firebase修行①　『Authentication』で認証機能をアプリに追加しよう✨

2023/02/19に公開

Firebase

Flutter

Authentication

tech

【修行】アプリにFirebaseを組み込む📱

この記事はFirebaseの修行のための忘備録的な感じで書いていきます✨
今回は認証機能の『Authentication』をアプリに組み込んでいきます。

👨『まだだ…まだ終わらんよ』

Firebaseアカウントの作成・Flutterアプリとの紐付け方法

下記サイトを参考にアカウント作成とアプリの紐付けを行いました。

「Authenctication」の有効化手順

下記サイトを参考に「Authenctication」の有効化を行いました。

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

下記サイトからfirebase_authのパッケージをインストールします。

$ flutter pub add firebase_auth

https://pub.dev/packages/firebase_auth

実装例

このアプリでは、①メールアドレスとパスワードによるユーザの登録認証②ログイン③パスワードリセットを行います。

Twitterに上げた動画はこちら

実際のコードを下記に記載。

firebase_auth.dart

import 'package:firebase_test2/firestore.dart';
import 'package:firebase_test2/original_dialog.dart';
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:line_icons/line_icons.dart';
import 'firebase_options.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  // 入力したメールアドレス・パスワード
  String _email = '';
  String _password = '';
  String get_email = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // backgroundColor: Colors.white10,
      appBar: AppBar(
        title: Text('Authentication のテスト'),
        backgroundColor: Colors.grey,
      ),
      body: Center(
        child: Container(
          padding: const EdgeInsets.all(24),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 1行目 メールアドレス入力用テキストフィールド
              TextFormField(
                decoration: const InputDecoration(labelText: 'メールアドレス'),
                onChanged: (String value) {
                  setState(() {
                    _email = value;
                  });
                },
              ),
              // 2行目 パスワード入力用テキストフィールド
              TextFormField(
                decoration: const InputDecoration(labelText: 'パスワード'),
                obscureText: true,
                onChanged: (String value) {
                  setState(() {
                    _password = value;
                  });
                },
              ),
              // 3行目 ユーザ登録ボタン
              ElevatedButton.icon(
                icon: Icon(LineIcons.save),
                label: const Text('ユーザ登録'),
                onPressed: () async {
                  try {
                    final User? user = (await FirebaseAuth.instance
                            .createUserWithEmailAndPassword(
                                email: _email, password: _password))
                        .user;
                    if (user != null)
                      print("ユーザ登録しました: ${user.email} , ${user.uid}");
                    setState(() {
                      get_email = _email;
                    });
                    showAlertDialog(
                      context,
                      // 好きな文字列を入れてください。
                      title: 'アカウント登録完了',
                      // 好きな文字列を入れてください。
                      content: ' 登録アドレス;$_email',
                    );
                  } catch (e) {
                    print(e);
                  }
                },
              ),
              // 4行目 ログインボタン
              ElevatedButton.icon(
                icon: Icon(LineIcons.doorOpen),
                style: ElevatedButton.styleFrom(
                  primary: Colors.amber, // background
                  onPrimary: Colors.white, // foreground
                ),
                label: const Text('ログイン'),
                onPressed: () async {
                  try {
                    // メール/パスワードでログイン
                    final User? user = (await FirebaseAuth.instance
                            .signInWithEmailAndPassword(
                                email: _email, password: _password))
                        .user;
                    if (user != null)
                      print("ログインしました　${user.email} , ${user.uid}");
                  } catch (e) {
                    print(e);
                  }
                },
              ),
              // 5行目 パスワードリセット登録ボタン
              ElevatedButton.icon(
                  icon: Icon(LineIcons.key),
                  style: ElevatedButton.styleFrom(
                    primary: Colors.redAccent, // background
                    onPrimary: Colors.white, // foreground
                  ),
                  label: const Text('パスワードリセット'),
                  onPressed: () async {
                    try {
                      await FirebaseAuth.instance
                          .sendPasswordResetEmail(email: _email);
                      print("パスワードリセット用のメールを送信しました");
                    } catch (e) {
                      print(e);
                    }
                  }),
            ],
          ),
        ),
      ),
    );
  }
}

【修行】アプリにFirebaseを組み込む📱

Firebaseアカウントの作成・Flutterアプリとの紐付け方法

「Authenctication」の有効化手順

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

実装例

Discussion