Serverpodでログイン機能を実装する際に、「ドキュメント見たけど、具体的な実装方法がわからない、、、」「ネットにServerpodの情報が十分にないから検索してもわからない」といった悩みを抱える人が多いと思います。

本記事では、そんな人に向けて、Serverpodのログイン機能の実装方法を解説していきます。

＜目次＞

• ログイン機能の全体的な流れ

• ログイン機能の実装手順

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

• 会員登録時にEmailAuthController.createAccountRequestでアカウント作成

• ログイン時にEmailAuthController.signInでログイン処理

• まとめ

ログイン機能の全体的な流れ

Serverpodでログイン機能を実装する際はserverpod_auth_email_flutterというパッケージを利用します。

serverpod_auth_email_flutterパッケージとは、Serverpodでメールでサインインするためのパッケージです。

ログイン機能の全体的な流れは以下の通りです。

1. 会員登録時にクライアントからサーバーにメールアドレス、パスワード、ユーザーネーム送信

2. サーバーで認証を行う。

3. SessionManagerのデータ構造を介してクライアントにuserIDとkeyが送られる。

4. ３以降、userIDとkeyをサーバーにリクエスト時に送信する。

5. userIDとkeyからサーバーでユーザー情報を取得する。

SessionManagerでは、ユーザーの状態を管理し、サーバーからクライアントに渡される認証キーの処理やユーザープロファイル画像のアップロードなどを行います。

ログインによく用いられるJWTログイン機能と比較した場合は以下のようになります。

ログイン機能の実装手順

Serverpodでのログイン機能は以下の３つのステップで行うことができます。

1. serverpod_auth_email_flutterパッケージのインストール

2. 会員登録時にEmailAuthController.createAccountRequestでアカウント作成

3. ログイン時にEmailAuthController.signInでログイン処理

１. Serverpod_auth_email_flutterパッケージのインストール

serverpod_auth_email_flutterパッケージとは、Serverpodでメールでサインインするためのパッケージです。

以下のコマンドでインストールすることができます。

$ flutter pub add serverpod_auth_email_flutter

そして、自分のflutterパッケージのpubspec.yamlファイルに以下の文を追記する必要があります。

dependencies:

  serverpod_auth_email_flutter: <インストールするバージョン>

そうすると、以下のようにimportすることができ、serverpod_auth_email_flutterを利用することができます。

import 'package:serverpod_auth_email_flutter/serverpod_auth_email_flutter.dart';

2. 会員登録時にEmailAuthController.createAccountRequestでアカウント作成

serverpod_auth_email_flutterパッケージには、EmailAuthControllerというクラスが存在し、そのメソッドを利用することで、ログイン用のアカウント作成や、ログイン、パスワードリセットといった機能の実装を行うことができます。

まず、ログイン用のアカウント作成について解説します。

ログイン用のアカウント作成にはcreateAccountRequestメソッドを利用します。

createAccountRequestメソッドは以下のように記述することができます。

createAccountRequest(userName, email, password);

第一引数にはユーザーネーム、第二引数にはメールアドレス、第三引数にはパスワードを入れる必要があります。

また、createAccountRequestメソッドはFuture関数であるので、asyncとawaitキーワードを忘れないように注意する必要があります。

また、会員登録を行う上で、アプリ内のどこからでもサーバーと接続できるようにするために、クライアントオブジェクトのセットアップを行う必要があり、以下のように記述する必要があります。以下のコードではデフォルトのポートで、ローカルサーバーに接続するように設定されています。ゆえに、接続するサーバーを変更する場合は、'http://localhost:8080/'の部分の変更を行う必要があります。

var client = Client(

 'http://localhost:8080/',

)..connectivityMonitor = FlutterConnectivityMonitor();

具体的な実装例としては以下のようなコードで、会員登録ページを実装しているクラス内で、会員登録ボタンのonPressedの処理に記述すれば実装することができます。

var client = Client(

 'http://localhost:8080/',

)..connectivityMonitor = FlutterConnectivityMonitor();

class SignUpPage extends StatefulWidget {

 const SignUpPage({super.key});

 @override

 State<SignUpPage> createState() => SignupPageState();

}

class SignupPageState extends State<SignUpPage> {

 late String userName;

 late String email;

 late String password;

 final caller = client.modules.auth;

 @override

 Widget build(BuildContext context) {

   return Scaffold(

     appBar: AppBar(

       title: const Text('Serverpod'),

       backgroundColor: Colors.blue,

     ),

     body: Center(

       child: Container(

         padding: const EdgeInsets.all(30.0),

         child: Column(

           crossAxisAlignment: CrossAxisAlignment.start,

           children: <Widget>[

             // ユーザーネーム入力フォーム

             TextFormField(

               decoration: const InputDecoration(labelText: 'ユーザーネーム'),

               onChanged: (value) {

                 setState(() {

                   userName = value;

                 });

               },

             ),

             // メースアドレス入力フォーム

             TextFormField(

               decoration: const InputDecoration(labelText: 'メールアドレス'),

               onChanged: (value) {

                 setState(() {

                   email = value;

                 });

               },

             ),

             // パスワード入力フォーム

             TextFormField(

               decoration: const InputDecoration(labelText: 'パスワード'),

               obscureText: true,

               onChanged: (value) {

                 setState(() {

                   password = value;

                 });

               },

             ),

             Center(

               // 会員登録用のボタン

               child: ElevatedButton(

                   onPressed: () async {

                     // アカウント作成

                     await EmailAuthController(caller)

                         .createAccountRequest(userName, email, password);

                   },

                   child: const Text('会員登録')),

             ),

           ],

         ),

       ),

     ),

   );

 }

}

以下、会員登録画面の画像です。



3. ログイン時にEmailAuthController.signinでログイン処理

続いて、ログイン処理の実装方法について解説していきます。

ログイン処理の実装については2のアカウント作成同様に用いたEmailAuthControllerクラスのsigninメソッドを利用します。

signinメソッドは以下のように記述することができます。

signIn(email, password);

第一引数にはメールアドレス、第二引数にはパスワードを入れる必要があります。

また、signintメソッドはcreateAccountRequestメソッド同様、Future関数であるので、asyncとawaitキーワードを忘れないように注意する必要があります。

具体的な実装例としては以下のようなコードで、ログインページを実装しているクラス内で、ログインボタンのonPressedの処理に記述すれば実装することができます。

class LoginPage extends StatefulWidget {

 const LoginPage({super.key});

 @override

 State<LoginPage> createState() => _LoginPageState();

}

class _LoginPageState extends State<LoginPage> {

 late String email;

 late String password;

 final caller = client.modules.auth;

 @override

 Widget build(BuildContext context) {

   return Scaffold(

     appBar: AppBar(

       title: const Text('Login'),

       backgroundColor: Colors.blue,

     ),

     body: Center(

       child: Container(

         padding: const EdgeInsets.all(30.0),

         child: Column(

           crossAxisAlignment: CrossAxisAlignment.start,

           children: <Widget>[

             // メールアドレス入力

             TextFormField(

               decoration: const InputDecoration(labelText: 'メールアドレス'),

               onChanged: (value) {

                 setState(() {

                   email = value;

                 });

               },

             ),

             // パスワード入力

             TextFormField(

               decoration: const InputDecoration(labelText: 'パスワード'),

               obscureText: true,

               onChanged: (value) {

                 setState(() {

                   password = value;

                 });

               },

             ),

             Center(

               // ログインボタン

               child: ElevatedButton(

                   onPressed: () async {

                     // ログイン処理

                     await EmailAuthController(caller).signIn(email, password);

                   },

                   child: const Text('ログイン')),

             ),

           ],

         ),

       ),

     ),

   );

 }

}

以下、ログイン画面の画像です。

まとめ

本記事では、Serverpodでログイン機能を実装する方法を解説していきました。

現状、公式ドキュメントには、サードパーティを用いたログインが主に紹介されており、Serverpodのみでログイン機能を実装する方法が詳細に記載されていないので、実装に戸惑うことがあると思います。

しかし、今後、バージョンがアップデートされ、ログイン用のクラスが新たに追加されることや、ログインに関するドキュメントが更新されることが考えられるので、Serverpodに関する情報を日頃から確認しておきましょう。

以上、最後までお読みいただきありがとうございました！

増田 太一