NCMBとMonaca、Framework7を使ってチャットアプリを作る（その2：認証実行）

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

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

コードについて

今回のコードはNCMBMania/MonacaChatDemoにアップロードしてあります。実装時の参考にしてください。

最初に読み込む画面について

www/index.html にて最初に読み込む画面を指定します。今回は /chat/ としていますので、チャット画面が読み込まれます。

<div id="app">
	<!-- Views/Tabs container -->
	<div class="views tabs safe-areas">
		<!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
		<div id="view-home" class="view view-main view-init" data-url="/chat/">
		</div>
	</div>
</div>

routes.jsにて認証状態の判定

/chat/ へ移動する際に、認証状態をチェックします。もし認証されていないようであれば、/login/ へ遷移します。これは routes.js で、 beforeEnter 関数を使って処理するのがポイントになります。リダイレクト処理を行う場合には reject 関数を呼び出し、その上でルーターで画面遷移します。

// チャット画面
{
	path: '/chat/',
	componentUrl: './pages/chat.html',
	beforeEnter: ({ resolve, reject, router }) => {
		// ログインユーザー情報の取得
		const user = ncmb.User.getCurrentUser();
		if (!user) {
			// 認証していない場合（user === null）
			// エラー判定
			reject();
			// ログイン画面に遷移
			router.navigate('/login/');
		} else {
			// 認証している場合
			resolve();
		}
	}
},

ログイン画面について

ログイン画面ではユーザー名を設定してもらいます。そしてボタンを押すと login 関数が呼び出されます。

<div class="page" data-name="form">
	<div class="navbar">
		<div class="navbar-bg"></div>
		<div class="navbar-inner sliding">
			<div class="title">名前を決める</div>
		</div>
	</div>
	<div class="page-content">
		<div class="block-title">チャットの名前を決めてください</div>
		<form id="login">
			<div class="list no-hairlines-md">
				<ul>
					<li>
						<div class="item-content item-input">
							<div class="item-inner">
								<div class="item-title item-label">名前</div>
								<div class="item-input-wrap">
									<input type="text" name="displayName" placeholder="お名前" required/>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="block block-strong">
				<p class="row">
					<a href="#" @click=${login} class="col button">入室する</a>
				</p>
			</div>
		</form>
	</div>
</div>

ログイン処理について

login 関数では、まず匿名認証を実行します。その結果としてユーザーオブジェクトが返ってきますので、そこに表示名 displayName を設定して更新します。これだけで認証処理と、表示名の設定が完了します。

認証終了後は再度 /chat/ に遷移します。認証していればユーザーオブジェクトが存在するので、www/pages/chat.html が読み込まれます。

export default (props, { $f7router }) => {
	// ログイン処理を行う関数
	const login = async () => {
		// 入力値の取得
		const params = app.form.convertToData($('#login'));
		// 匿名認証の実行
		const user = await ncmb.User.loginAsAnonymous();
		// 入力された表示名を適用して更新
		await user
			.set('displayName', params.displayName)
			.update();
		// チャット画面にリダイレクト
		$f7router.navigate('/chat/');
	}
	return $render;
}

まとめ

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