Zenn
🏫

学校でMPという仮想ポイントをやり取りするアプリを作った話

に公開
React
tech

はじめに

学校で友達と会話している時にこのような話になりました。
「麻雀とかポーカーって楽しいけどなんかかけたらもっとおもろいんやろうな」
しかしここは日本。お金をかけることは違法です。さてどうしたものか

そうだ！架空のポイントを賭ければいいんだ!

まあ何とも子供らしい発想に至りました。ポイントをやり取りする方法なのですが、私が通っているのは高専なのでせっかくならプログラムで作りたいと思い仮想のポイントをやり取りするアプリを作りました。名前は MPoint です。
拙い文章ですが少しお付き合いください

この記事の対象者

  • 学生
  • セキュリティーの大切さを知りたい人
  • デバッカーのいることのありがたさを知りたい人

という謎な対象者で書いていこうと思います。

技術構成

フロントエンド

  • React
  • TypeScript
  • TailwindCss
  • Shadcn/ui

バックエンド

  • Firebase

このような技術構成で作成しました。後述しますがバックエンドの Firebase は間違いだったかもしれない...

作成したアプリの機能


↑ 実際の画面

このアプリ Mpoint の機能は次に挙げる通りです

ポイント送受信

この機能がこのアプリのメインの機能です。仕様としては、

  1. 受け取る側のユーザが受け取るポイントを決める
  2. 1 で決めたポイントに応じて Firestore にリクエスト用ドキュメントを作成する
  3. 2 で作成したドキュメントの ID を QR コードにして送信側で読み取る
  4. 読み取ったドキュメントの ID から情報を取得しポイント送受信処理
    という流れでポイントを送受信しています。
    受け取る側ではなく送る側から送るポイントを決めるようにした方が良かったのかなとも思うのですが、QR コードで送受信ができるようにできたのは結構お気に入りです。

取引履歴の確認

ポイントの送受信の履歴を確認することができる機能です。ポイントの送受信が終わった後にユーザーのコレクションに histories というものを作成しているのでそこに取引履歴をドキュメントとして保存しています

ログインボーナス

ただただ交換するだけでは全体のポイントは増えないしかといって何かの報酬にしてしまうと自分の仕事が多くなりすぎると思いつけました。
ユーザーのドキュメントに lastLoginDate というフィールドを持たせてそれが今日の日時と異なっていれば付与するようにしています。

この 3 つが主な機能となっています。
はじめてしっかりした Web アプリを作ったので機能が少ないですが意外といいものができたと思っています

ここで一つ問題が

ある程度機能が完成してから友達や後輩に使ってもらいました。
その翌日後輩から送られてきた衝撃の内容は

ポイントがアカウント登録して付与されるポイントの 10000 倍になった画面

はじめは開発者ツール使っていじったのかと思いました。しかし Fireconsole のデータベースを見ると何ということでしょう書き換えられているではないですか。
聞けば Python で RESTAPI 使って頑張りましたとのこと。
もう恐怖です。お遊び程度のポイントアプリだったから良かったものの本当のお金を取引を行うサービスなら洒落になりません。
ここで対策を講じようと考えました。ルールを更新したり、AppCheck を導入したりなどその全てが無駄になりました。もう笑えてきました。AppCheck は RESTAPI の前では無力のようです(FirebaseSDK 経由だかららしい。間違っていたらご指摘ください)
ここで CloudFunction というものを知りました。何やらこれを使えばこの問題が解決できそう。しかし Blaze プランではないと使えないとのこと。まだ私は学生なのでクレジットカードが登録できず、セキュリティーの更新は断念しました。まあ友人同士の遊びで行うものなので一部の変態は置いといて一般人は Firestore を書き換えないので良いでしょう。

しかし本当のサービスを運用する際はどうでしょう。この問題は個人情報の流出にもつながります。しっかりしたサービスを運用しようと考え始めているのでこれは教訓として自分の身に刻んでおきたいと思いました。

もし CloudFunction を使わずとも対策できる方法がわかる方がいればご教授いただけると幸いです。

このアプリ開発を通して学んだこと

  • Firebase のセキュリティーは自分でしっかりしないとゆるい
  • デバックってやっぱりいろんな人にやってもらった方がバグが見つかる

このほかにも AppCheck の方法や、Firebase の transaction 機能やダークモードを切り替える方法などが学べましたがそれはまた別の機会に。

まとめ

セキュリティーはちゃんとしよう！
後デバックもね

ここまで読んでくださりありがとうございます。まだまだ勉強途中ですので間違っていることなどありましたらコメントいただけると幸いです。

Discussion