イベントを誰もが見逃すことなく手軽に参加/運営することが出来、イベント開催にあたっての手順の多さとそれがもたらすイベント参加/運営への障壁をなくすことができるWebアプリ
ここ最近、情報系サークルに所属して学生生活を送っていく中で、イベント参加やイベント運営の楽しさを知った。 また、さまざまなサークル/団体が集まり、交流して話し合うことは、自分の技術力向上や悩み/不安への対応としてとても有効であると感じている。しかしそう思いイベントに参加したり、開催したりするうちに、イベント参加やイベント運営の手順の複雑さ、冗長さが気になり始めていた。その結果として、イベント参加者が毎回同じメンバーになっていて初心者がイベントに参加しづらくなったり、チーム開発に取り組める環境が減ってしまっているように感じた。 その理由は、いくつものイベントの参加/運営を通して以下のような課題点を経験したからである。
・どこに連絡が来ているかわからない(スケジュールや企画書を探すのに手間がかかる)
・自分の知らないところで自分の興味のある分野のイベントが開かれていた。
これらの問題点について考えたところ、現段階でほとんどのイベントが以下の手順で開催をしていることに気がついた。 企画部 → 広報部 → 広報部と各サークル/団体とのDiscordで告知する → compassまたはGoogleFormで参加登録をする → 当日GoogleSpreadSheetまたはexcelで出席登録をする → DiscordやSlackに記載しているスケジュールに従ってイベントを進行する。この手順を一つのアプリで完結させられるようになればイベントの参加/運営が簡単になり、問題点への解決策になるなと思い今回のWebアプリ開発をするに至った。
本アプリは、「イベントの企画から参加/出席管理までを一元化する、学生団体・IT系コミュニティ向けオールインワン型イベント掲示・運営プラットフォーム」です。 イベントの立案者（運営者）がイベント情報、スケジュール、必要な資料を登録する機能と、参加者がイベントの検索、参加、出席登録機能を提供します。これにより、従来の課題であった「情報が分散する」「複数のツールを行き来する必要がある」といった非効率性を解消し、イベントのライフサイクル全体を一つのアプリケーション内で完結させます。
DiscordやGoogle Form、スプレッドシートなど複数のツールに分散していた「告知」「参加登録」「資料共有」「出席管理」といったイベント運営の全手順を、本アプリ一つで完結させることができる。
「自分の知らないところで興味のあるイベントが開かれていた」という課題を解決するため、強力な検索機能を実装しています。イベント名はもちろん、開催場所、対象者、紹介文、開催日時などさまざまな条件（場所、対象者、日時など）でイベントを検索することができます。
参加ユーザー、一人ひとりにチェックボックスが用意してあるので、当日にスプレッドシートなどを使わずに出席管理ができるのと、アプリ内でイベント用のタイムテーブルを作成することができるので、別途当日のスケジュール用文書ファイルを用意したり、配布しなくてもいい。このタイムテーブルにもチェックボックスが用意されているのでどこまで進んでいて、次に何をするのかを簡単に確認できる。（このチェックボックスはLT会などの場合は登壇者の管理にも活用できる）
- IT系イベントの運営/参加における冗長な手続き
- 興味のある分野のイベント開催の見逃し
- スマートフォン用アプリケーションにする
- ユーザーが気になる分野のイベントや、過去に参加したイベントが再度行われる場合にユーザーに通知をする
- スケジュールから参加イベントの近日になったらユーザーに通知を入れる
- 参加処理を名前ではなく、QRコードなど人員がいなくてもできるようにする
- 堅牢なセキュリティ
- Webアプリのセキュリティ
・ユーザーIDベースのアカウントロック:
総当たり攻撃をされないために設定した一定時間内にn回(nは任意設定可能)ログイン処理が失敗した場合に一定時間アカウントへのログインをロックし、総当たりによるパスワードの突破をされないようにしている。この時にロックされたことをユーザーには通知しないことによってユーザーID側への総当たりをしてもそのユーザーIDが存在しているのかを教えないようにしている。
・IPブロック:
基本的にはDos攻撃対策として、一定時間内に同じIPからn回(nは任意設定可能)ログイン処理の失敗が行われた場合に、一定時間そのIPからログイン処理を受け付けないようにする。副次的な効果として、「よくある弱いパスワード」（例: Password123!）を1つ用意し、それを多数の異なるユーザーIDに対して順番に試していくパスワードスプレー攻撃や、他のサービスから流出したIDとパスワードのリストを使い、あなたのサービスで片っ端からログインを試みるクレデンシャルスタッフィング攻撃の対策としても機能する。
・強力なハッシュ化:
パスワードのハッシュ化には、現代的で強力なアルゴリズムである Argon2 を採用。さらに、サーバー側でのみ保持する秘密の値（ペッパー）をパスワードに付与してからハッシュ化することで、万が一データベースが漏洩した場合でもバックエンドの環境変数は漏れない限りはパスワードが漏れないようにしている。
・タイミング攻撃への耐性:
ユーザーIDが存在するか否かでレスポンス速度に差が生まれないよう、存在しないIDが入力された場合でもダミーハッシュを用いて常にハッシュ検証処理を実行。これにより、攻撃者がレスポンス時間からユーザーIDの有効性を推測するのを防いでいる。
・安全なセッション管理:
JWT (JSON Web Token) を採用し、httpOnly および secure, sameSite: 'strict' 属性を付与したCookieで管理している。これにより、XSS（クロスサイトスクリプティング）によるセッショントークンの盗難を防止している。
・安全な入力内容の取得:
ユーザーからの入力を受け取るときはプレースホルダーを使うことによってSQLインジェクションをされないようにしている。
(例)const [result1] = await db.query("SELECT * FROM Profiles WHERE userId = ${test}");
ではなくconst [result1] = await db.query("SELECT * FROM Profiles WHERE userId = ?", [test]);と書いている。
- UI:
AIとBlenderによる自作の3DCGを使うことによってオリジナリティがある、おしゃれなUIを作成した。
- タスク管理:
今回の開発8人というHackathonとしては大人数での開発だったので、暇な人ややることがよくわからずに何もしない人がでないようにLinearでタスク管理を行ったり、Larkを使って汎用性のあるコードなどはCheatSheatでシェアするようにした
- RESTful API：クライアント（Webブラウザ）とサーバー間の通信規約として採用しました。
- MySQL：データベース操作に使用した。
- Express.js：サーバーサイドのルーティング、ミドルウェア、API構築のためのWebアプリケーションフレームワーク。
- TypeScript：大規模開発におけるコード品質と保守性を高めるため、静的型付け言語として採用しました。
- Node.js：サーバーサイドの実行環境。
- HTML5：Webページの構造を定義するためのマークアップ言語。
- CSS3：Webページの視覚的なスタイル（レイアウト、デザイン）を定義するためのスタイルシート言語。
- PC
- 認証セキュリティの独自多層防御:
多くのWebアプリがライブラリのデフォルト設定に頼る中、本アプリではセキュリティを最重要視し、堅牢な認証フローを独自に設計・実装しました。 具体的には、IPアドレスベースのレートリミット（DoS・スプレー攻撃対策）とユーザーIDベースのアカウントロック（総当たり攻撃対策）を組み合わせた二重の防御壁を構築しています。 さらに、タイミング攻撃耐性（ダミーハッシュによる検証時間の均一化）や、Argon2 + サーバー側ペッパーによる強力なパスワードハッシュ化など、攻撃者の視点に立った複数の対策を組み込みました。 ひとつの防御ではどうやっても穴ができてしまうため、それぞれの技術の特徴を生かし、独自の多層構造防御を作成することでセキュアな認証基盤を実現しています。
- イベント管理の一元化:
従来、個別で存在していた「WebやSNSによるイベント情報の取得」「フォームによる参加登録」「スプレッドシートでの出欠管理」「別ファイルでの時程管理」「チェックボックスによる進行状況確認」を一つのアプリの機能としてまとめました。 これにより、イベントの企画・参加から当日の運営まで、ライフサイクル全体をすべて一元化して簡略化した点が、本アプリ独自の機能です。
-
特に力を入れた部分のファイルリンク
os_2508\Projects\Backend\Workspace\Routes\LoginRoutes.js