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