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

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

[前回の記事では画面の説明とSDKの導入まで](https://qiita.com/goofmint/items/f7372fd933acb265bb61)を進めましたので、今回は認証周りを解説します。

## コードについて

今回のコードは[NCMBMania/MonacaChatDemo](https://github.com/NCMBMania/MonacaChatDemo)にアップロードしてあります。実装時の参考にしてください。

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

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

```html
<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` 関数を呼び出し、その上でルーターで画面遷移します。

```js
// チャット画面
{
	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` 関数が呼び出されます。

```html
<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>
```

![FireShot Capture 484 - Monaca × Framework7 × NCMB - localhost 20220803154332 - 484.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/6b506c16-95a5-4f1d-531e-f068a15295dc.jpeg)


### ログイン処理について

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

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

```js
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;
}
```

## まとめ

今回はチャットアプリの認証周りについて解説しました。次は[チャット画面周りを解説](https://qiita.com/goofmint/items/34492ece8d3f8b986d3e)します。