はじめに
FlutterFlowとXanoの概要
-
FlutterFlowは、直感的なドラッグ＆ドロップインターフェースを提供するモバイルアプリ開発プラットフォームです。このツールを使用すると、コーディングの知識が少なくても、美しく機能的なアプリを迅速に作成できます。
https://flutterflow.io/ -
Xanoはバックエンド開発を簡素化する強力なサーバーレスプラットフォームであり、APIの作成、データベース管理、認証機能などを提供します。
https://www.xano.com/
FlutterFlowの『カスタムAPI認証』機能とその可能性
FlutterFlowでは元々、FirebaseやSupabaseのような主要なバックエンドサービスをネイティブでサポートしていました。しかし、2023年10月より導入されたカスタムAPI認証機能により、開発者はこれらに限らず、さまざまなバックエンドサービスとの統合が可能になりました。この柔軟性により、開発者は自分のニーズに最適なバックエンドを選択し、カスタマイズされた認証フローを実装できるようになります。
この記事の目的と対象読者
この記事では、FlutterFlowを使用してモバイルアプリを開発し、Xanoをバックエンドとして統合する方法に焦点を当てます。特に、カスタムAPI認証機能を利用して、ユーザーのサインアップとログイン機能を実装する過程を詳細に解説します。この記事は、FlutterFlowやXanoを使用する開発者や、モバイルアプリ開発に興味があるがコーディング経験が少ない方々に最適です。
必要なツールと事前準備
FlutterFlowとXanoのアカウント作成
まず、FlutterFlowとXanoの公式ウェブサイトにアクセスし、それぞれのアカウントを作成します。アカウント作成は無料で、メールアドレスと基本的な情報を入力するだけで完了します。これにより、両プラットフォームの基本機能にアクセスできるようになります。FlutterFlowとXanoの基本的な操作方法などについてはこの記事では割愛します。
接続の手順
1. Xanoのセットアップ
-
新しいAPIエンドポイントの作成方法
Xanoの基本的なセットアップが終わったら、APIタブから、DefaultのAPI Groupを選択し、/auth/signupと/auth/loginのエンドポイントを確認しましょう。
-
必要なエンドポイントの構造と設定
デフォルトの設定では、レスポンスの値にauthTokenを含めることができないので、それぞれ以下の通りの内容でUpdate Variable Functionを追加します。これで、FlutterFlow側からauthTokenを取得できるようになります。
Signup
Login
Runして、ResultにauthTokenが含まれていれば、認証エンドポイントの設定は完了です。
3. FlutterFlowプロジェクトの設定
-
新しいプロジェクトの作成
FLutterFlowで新しいプロジェクトを作成します。※初期セットアップでFirebaseとの接続は行わないでください。
-
サインアップとログイン画面のレイアウト作成
サインアップとログイン画面を追加しておきましょう。FlutterFlowの「Flows」機能を使うと非常に簡単に認証に必要なページのまとまりを追加できます。
4. カスタムAPI認証の設定
-
DataTypeの設定
Data Schema > Data Typeから、UserのData Typeを作成します。認証されたユーザーデータはこのDataTypeに関連付けられます。今回は、usernameとemailのみを登録しています。
-
カスタムAPI認証の設定方法
Authenticationを有効化し、Authentication TypeでCustomを選択します。Associate User Data Typeを有効化し、先ほど作成したUserのData Typeを選択します。
5. XanoとFlutterFlowの接続
-
API接続の設定手順
APIタブを開き、AddからAPI Groupを作成し、XanoのAPI Group Base URLをコピペします。次に、メソッドをPOSTに変更して、API Callにsignupを定義し、エンドポイントに/auth/signup、Bodyに{ "name": "", "email": "", "password": "" }と入力し、それぞれ変数を入力しておきます。
-
APIのテスト
テスト用の値を入力して、Test API Callで実行します。問題なければ、Successの文字とXanoで定義したレスポンスが返ってきているはずです。※もし、エラーがあった場合は、入力内容に間違いがないかもう一度確認してください。
JSON Pathsにname, email, authTokenを登録しておきましょう。
signupがうまくできたら、次はloginのAPI Callを設定しましょう。ほぼ同じことの繰り返しなので、ここでは割愛します。
6. サインアップ機能の実装
-
ユーザー入力フォームの作成
-
XanoのサインアップAPI呼び出し
Create Accountボタンに以下のようなアクションフローを設定します。signup callでアカウントを作成し、authTokenでログインするようになっています。ログインが完了したら、忘れずHomePageへ遷移するようにしてください。
-
エラーハンドリングとフィードバック表示
signup callが失敗した場合は、条件分岐してAlart Dialogアクションでstatus codeとエラー文を表示する様にしてあります。
7. ログイン機能の実装
- XanoのログインAPI呼び出し
signup callをlogin callに変更すること以外は、サインアップ機能のアクションフローと同じように設定します。
8. テストとデバッグ
サインアップとログイン機能のテストを行います。
HomePageにログイン中のユーザーの情報が正しく表示されているのがわかります。また、Xanoのuserデータベースを確認すると、問題なく新しいユーザーが追加されていますね！
まとめと次のステップ
お疲れ様でした！これで、FlutterFlowとXanoを使ったサインアップとログイン機能の実装が完了しました。Xanoに限らずユーザー認証機能を持ったバックエンドサービスであれば自由に接続が可能になったことはFlutterFlowでの開発をより素晴らしいものにしてくれそうですね。
- パスワードリセット機能
- ソーシャルログインの統合（FacebookやGoogleなど）
- 二要素認証
このあたりの事はまだ未検証です。実際にサービスを作るならいずれも後回しには出来ない要素なので、できるだけ早く検証してみたいところです。
普段からFlutterFlowなどのTipsを𝕏でつぶやいています。よければフォローしてください。