📧

FlutterFlowでFirebase Authenticationのメールアドレスを更新する方法（カスタムアクション編）

yksmt

2023/06/23に公開

はじめに

この記事では、FlutterFlowでカスタムアクションを作成して、Firebase Authenticationのメールアドレスを更新する方法についてまとめています。使用しているバージョンはv3.1です。

カスタムアクション以外でAuthenticationのメールアドレスを更新したい場合は、RESTを使用したAPI Callでも可能です。RESTの方法については、こちらの記事でまとめています。

また、FlutterFlowでFirebase Authenticationを導入する方法についてはこちらの記事でまとめていますので、よろしければ併せてご参考ください。

firebase_authパッケージについて

今回は、pub.devにあるfirebase_authを使用します。

pub.devとは、Dart言語およびFlutterフレームワークのための公式のパッケージレジストリです。DartはGoogleによって開発されたオープンソースのプログラミング言語であり、FlutterFlowはGoogleのUIフレームワークであるFlutterをベースにしています。

pub.devで公開されているパッケージは、再利用可能なコードやライブラリの形式で提供されいるため、FlutterFlowでもこれらのパッケージを利用することで自分のプロジェクトを強化することができます。

今回使用するfirebase_authは、認証に必要なFirebase Authentication APIを使用するための Flutterプラグインとなっています。

なお、現時点での最新バージョンである「firebase_auth: ^4.6.1」をFlutterFlowで使用するには、追加でDependencies（依存関係）を登録する必要がありましたので、以下に必要なパッケージをリストしておきます。これら依存関係は、カスタムアクションの作成時に必要となります。

カスタムアクションの作成

カスタムアクションは下図のような内容で定義していきます。

ナビゲーションメニューのCustom Codeにある「+Add」ボタンからActionを選択して、Custom Acrionを作成します。
Action Nameに任意の名前を入力します。ここで指定した値が、UI側で呼び出すカスタムアクション名となります。ここでは「updateEmail」と入力しました。
実行結果を返却するようにString型のReturn Valueを設定します。
ユーザーが登録する新しいメールアドレスをString型の引数として定義します。ここでは名前を「newEmailAddress」としました。
前項でリストしたfirebase_authに関係するDependencies（依存関係）を登録し、import（以下コードブロック）しておきます。
Firebase Authenticationのメールアドレスを更新するためのカスタムコード（以下コードブロック）を作成します。
Compile Codeしてみて「No Errors」となればカスタムアクションの完成です。「Save」ボタンで保存しておきます。

//import dependencies
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_core_web/firebase_core_web.dart';
import 'package:firebase_auth_web/firebase_auth_web.dart';
import 'package:firebase_auth_platform_interface/firebase_auth_platform_interface.dart';

Future<String> updateEmail(String newEmailAddress) async {
  String returnAuth = "Success";
  try {
    //Get current user
    User? user = FirebaseAuth.instance.currentUser;
    if (user != null) {
      //Email update
      await user.updateEmail(newEmailAddress);
    } else {
      returnAuth = "UserNotLoggedIn";
    }
  } on FirebaseAuthException catch (e) {
    returnAuth = e.code;
  }
  return returnAuth;
}

以上で、カスタムアクションの作成が完了です。

Firebase の確認メール設定

もし、新しいメールアドレスへ確認メールを送信したい場合は、送信時に使用するメッセージをFirebase AuthenticationのTemplatesで設定することができます。

メッセージ内で使用する言語を変更したい場合は「テンプレート言語」から変更することが可能です。

また、確認メール内のリンクをクリックすると、下図のようなメッセージが表示され、Authentication UserのEmail Verifiedの値がtrueに更新されます。

FlutterFlowアプリからの実行

次に「updateEmail」カスタムアクションを呼び出す、UI側の作成をしていきます。

今回は、下図のようなユーザーのメールアドレスを表示するTextFieldと、更新を実行するButtonを配置した簡単なページを準備しました。TextFieldのInitial Valueには、Firestore Database側に登録されているusersコレクションのemailフィールドを表示しています。

メールアドレスの更新ボタンがタップされた時のアクションを定義していきます。まずはカスタムアクションを実行します。Select ActionからCustom Actionsの「updateEmail」を選択し、引数として定義したnewEmailAddressに、TextFieldの値をセットします。カスタムアクションからReturnされるStringを受け取る変数名をAction Output Variable Nameに登録します。変数名は任意で問題ありませんが、ここでは「returnValue」としています。

次にConditionalでAction Outputの値が「Success」であるかどうかを、ConditionsのSingle Conditionを使って判定します。First ValueにはAction Outputの変数名を指定し、Equal ToでSecond Valueには「Success」と入力します。

returnValueがSuccessの場合は、Firestore Database側のメールアドレスもBackend Call Update Documentで更新し、必要があれば確認メールを送信するSend E-mail Verification Linkアクションを追加しておきます。また、更新処理が終わればページを遷移させるなど、適宜必要なアクションを設定します。ここでは、HomePageへNavigate Toされるようにしました。

returnValueがSuccessでない場合、Firestore Databaseの更新などは行わず、Show Snack Barで取得したメッセージを表示するように設定します。

ここまでできたら、Test Modeでログインしているユーザーアカウントを使用してメールアドレスの更新を実行してみます。

Firebase Authenticationのメールアドレスが更新され、登録メールアドレスに確認メールを受信できれば成功です。

まとめ

今回は、FlutterFlowでカスタムアクションを作成して、Firebase Authenticationのメールアドレスを更新する方法についてまとめました。

また、カスタムアクションで利用したpub.devは、パッケージの人気度や信頼性に関する情報も提供されているため、開発者が最適なパッケージを選択するのに役立ちます。FlutterFlowでもパッケージを利用することで、開発者は効率的に必要なパッケージを探し、アプリケーションの機能や生産性を向上させることができそうですね😉

参考ドキュメント

https://pub.dev/

ノーコードラボPublication

ノーコードラボでは、ノーコードツールの Bubble を使って、受託開発、法人向けのアドバイザーなどを行っています。