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が表示されます。
まとめ
今回はチャットアプリの認証周りについて解説しました。次はチャット画面周りを解説します。