NCMBとFlutterを使ってチャットアプリを作ります。以前はPieSocketを使ってチャットアプリを作っていたのですが、現在PieSocketは無料での利用枠がなくなっています。そこで今回はgoofmint/ruby-websockets-chat-demoをベースにチャットアプリを作ります。これはごく単純なWebScoketサーバーで、Herokuにデプロイできるものです。Herokuの無料枠内での利用が可能です。

前回の記事では画面の説明とSDKの導入までを進めましたので、今回は認証周りを解説します。

コードについて

今回のコードはNCMBMania/flutter_chat: Flutter SDKを使ったチャットアプリですにアップロードしてあります。実装時の参考にしてください。

MyHomePageについて

MyHomePageでは認証状態に応じてLoginPageとChatPageを読み込みます。

class _MyHomePageState extends State<MyHomePage> {
  NCMBUser? _user;
	@override
	Widget build(BuildContext context) {
		return _user != null
				// ログインしている場合
				? ChatPage(
						user: _user!,
					)
				// ログインしていない場合
				: LoginPage(
						// ログインした際に呼ばれるイベント
						onLogin: checkLogin);
	}
}

認証をチェックする場合には NCMBUser.currentUser() を使います。認証済みであればNCMBUserが、認証されていない場合は null が返ってきます。

// ログインチェックを行う処理
void checkLogin() async {
	final user = await NCMBUser.currentUser();
	setState(() {
		_user = user;
	});
}

LoginPageについて

認証されていない場合に読み込まれるのがLoginPageです。このページでは認証処理を実行して、その結果をMyHomePageに返します。

class _LoginPageState extends State<LoginPage> {
  var _name = ''; // 入力してもらう表示名

  // ログイン処理
  void anonymousLogin() async {
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Login')),
        body: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          const Text(
            'チャットの名前を入力してください',
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(
                width: 250,
                child: TextField(
                  onChanged: (value) {
                    setState(() {
                      _name = value;
                    });
                  },
                ),
              ),
              TextButton(onPressed: anonymousLogin, child: const Text("ログインする"))
            ],
          )
        ]));
  }
}

認証処理について

匿名認証処理は NCMBUser.loginAsAnonymous() だけで完了します。NCMBの管理画面で匿名認証が有効になっていれば、これだけでNCMBUserが返ってきます。

認証が完了したら、LoginPageで入力された名前をdisplayNameに適用し、更新します。その後、ログイン完了イベントを呼びます。

// ログイン処理
void anonymousLogin() async {
	// 匿名認証でログイン
	final user = await NCMBUser.loginAsAnonymous();
	// 入力された表示名をセット
	user.set('displayName', _name);
	// 情報更新
	await user.save();
	// 完了イベントを呼ぶ
	widget.onLogin();
}

これで認証処理が完了し、ChatPageが表示されます。

まとめ

今回はチャットアプリの認証周りについて解説しました。次はチャット画面周りを解説します。