はじめに
この記事では、FlutterFlowとFirebaseを連携して、サインアップ/ログイン/ログアウトするときに必要な認証機能を導入する方法についてまとめています。
Firebase Authenticationとは
Firebase Authenticationは、Firebaseのユーザー認証機能を提供するサービスです。Firebase Authenticationを使用することで、アプリケーションにユーザー認証機能を追加することができます。Firebase Authenticationは、Eメール、一般的なソーシャルメディアアカウント（Google、Facebook、Twitter...etc）、SMSなどの認証方法をサポートしています。
今回はこれらのうち 「Eメール/パスワード」を使用したユーザー認証を導入する方法 についてまとめています。
導入手順
まずは、Firebase側の設定を行い、次にFlutterFlowで認証機能を実装する手順で進めます。アプリとして動くようになるまでの具体的なステップは以下の6つです。
- Firebaseプロジェクトの作成
- Firebase Authentication（認証）の設定
- Firebase Cloud Firestore（データベース）の設定
- FlutterFlowプロジェクトの作成
- FlutterFlowとFirebaseの連携
- FlutterFlowでサインアップ機能の実装
Step1. Firebaseプロジェクトの作成
FirebaseにログインしてFirebaseコンソールを開き、新しいFirebaseプロジェクトを作成します。
プロジェクト名を任意で入力し、Googleアナリティクスを導入したい場合は有効に設定しておきます。プロジェクトのダッシュボードに遷移すれば、プロジェクトが作成できました。
Step2. Firebase Authenticationの設定
プロジェクトが作成できたら「構築 > Authentication」を選択して「始める」でFirebase Authenticationを有効化します。
Sign-in methodタブでログイン方法を設定します。今回はEメールを使用した認証を行いたいので、ネイティブプロバイダの「メール/パスワード」を選択します。
メール/パスワードを有効にして保存すれば、Firebase Authenticationの有効化が完了です。
Step3. Firebase Cloud Firestoreの設定
次にデータベースを準備します。「構築 > Firestore Database」を選択して「データベースの作成」でCloud Firestoreを有効化します。
セキュリティ保護ルールについては、一旦テストモードで作成しておきますが、こちらはFlutterFlowと連携する際に、権限を付与したルールで改めて更新を行います。
ロケーションはアプリが使用される位置を考慮して、適切な場所を選んで設定しておきます。
以上でデータベースとして使用するCloud Firestoreの準備が完了しました。
Step4. FlutterFlowプロジェクトの作成
次にFlutterFlowで認証機能を導入するためのプロジェクトを作成します。今回はCreateProjectでテンプレートを使用せずに任意の名前のBlankAppプロジェクトを作成します。
プロジェクトのセットアップでは以下3つのトグルを有効に設定して構築するようにします。なお、FirebaseProjectIDはStep5の連携で設定します。
- Setup Firebase
- Enable Authentication
- Create User Collection
以上で、FlutterFlowプロジェクトの準備が完了しました。
Step5. FlutterFlowとFirebaseの連携
FirebaseとFlutterFlow、それぞれのプロジェクトの準備できたので、次に連携の設定を行います。FlutterFlowからFirebaseへ接続するためには、以下の作業が必要です。
- FirebaseにFlutterFlowからの接続を許可する
- FlutterFlowにFirebaseProjectID登録とConfigFilesの生成
- Cloud Firestoreにセキュリティルールを適用する
5.1.Firebaseに接続許可
Firebaseのプロジェクト設定画面の「ユーザーと権限」タブを選択し、「メンバーの追加」ボタンから「firebase@flutterflow.io」を「編集者」としてFlutterFlowユーザーをFirebaseに登録します。
5.2.FirebaseProjectID登録とConfigFilesの生成
次にFlutterFlowのAppSettingsにあるFirebaseページを開き、FirebaseProjectID欄にFirebaseのプロジェクト設定画面から取得したプロジェクトIDを入力し「Connect」を実行します。
接続が完了したら、「Auto Generate Config Files」ボタンをクリックして設定ファイルを生成しておきます。
5.3.ルールの適用
次にナビゲーションメニューでFirestoreを選択して設定画面にあるFiresotreRulesの内容を確認します。ここでは「Users Collection」を選択して、自分自身の場合にのみ権限を付与しました。設定した権限に問題がなければ「Deploy」ボタンで適用します。
適用したルールはFirebase Cloud Firestoreコンソール画面でも確認することができます。高度なルール設定や本番環境への移行を実行する場合には、必ずルールが適正であるかを確認する必要があります。
もしDeploy時にエラーが出る場合は、Firebaseのロケーション設定が未設定になっている場合がありますので確認してみてください。未設定の場合は、編集アイコンから登録することができます。ロケーションはStep3のCloud Firestoreの設定で指定したロケーションを指定します。
Step6. FlutterFlowでサインアップ機能の実装
以上までのステップが完了すれば、FlutterFlowでサインアップ機能の実装を行う準備完了です。
アプリで必要なページとアクションを追加して仕上げていきます。まずはテンプレートを利用して認証で使用するページを新規で作成します。今回新しく作成したのは以下の3ページです。
| ページ名 | 役割 | 使用したテンプレート名 |
|---|---|---|
| index | アプリのトップページ。サインアップとログインページへ誘導するためのページ。 | Onboarding_4 |
| signup | サインアップページ。アカウント作成を行う。 | Simple3-CreateAccount |
| login | ログインページ。 | Simple2-Login |
テンプレートを使用すると、デザインなどは一部修正する必要があるかもしれませんが、最低限のアクションは既に設定してくれているので便利です。フォントなどは適宜好みのもので整えておきます。
ページの作成ができたら、AppSettingsの設定画面でEntryPageを「index」に、LoggedInPageを「HomePage」に設定しておきます。「HomePage」はプロジェクト作成時にデフォルトで作成された空のページです。
各ページのアクションは以下の通りです。
6.1.index
indexページのLoginとRegisterボタンには、それぞれのページへ遷移するように「NavigateTo」のアクションを設定しておきます。
6.2.signup/login
signupとloginページでは、テンプレートで設定されているAuthアクションをそのまま使用します。Authアクションが完了すれば、AppSettingsで設定したLoggedInPageに自動で遷移してくれます。
6.3.HomePage
ログアウトはHomePageを編集して「Logout」ボタンを配置し、アクションで「Firebase Authentication」の「Log out」を選択して設定します。ログアウトのAuthアクションが完了すれば、AppSettingsで設定したEntryPageに自動で遷移します。
以上でメールアドレスとパスワードを使用したサインアップ機能の実装が完了です。
まとめ
今回はFlutterFlowでFirebase Authenticationを導入する方法についてまとめました。手順としては6ステップと少し多めですが、各項目で行う作業自体はとてもシンプルなので手軽にアプリに認証機能を追加することが可能です。
参考ドキュメント
Discussion