ワンチェンの袖

https://github.com/y-ooe/hackz-megalo/

TypeScript

React

AWS

C

認証をたくさんします。

y-ooe

川久保和弥

推しアイデア

いっぱい認証使いました

作った背景

・認証やりたい ・Iotもやりたい ・テーマが風 →認証するたびに風を吹かせよう!!

推し技術

認証とIotを組み合わせてること!

プロジェクト詳細

Hackz-Megalo

プロダクト概要

  1. SMS OTP(ワンタイムパスワード)
  2. GitHub OAuth
  3. Amazon Cognito(amazonアカウント認証)
  4. Google OAuth 2.0
  5. 顔認証(S3 + lambda + rekognition)

認証成功時にはESP32デバイスに通知を送り、その都度プロペラを回すようにしてます


主な機能

  • 多要素認証の段階的フロー(5ステップ)
  • OAuth/OIDC連携(GitHub / Google / Amazon Cognito)
  • SMS OTP認証(Vonage/Nexmo Verify API)
  • Webカメラ画像の取得とサーバー送信
  • lambda + rekognitionによる顔認証
  • ESP32へのHTTP通知(各認証成功イベント)

技術スタック(詳細)

フロントエンド

  • React + Vite

バックエンド

  • Express + TypeScript
  • Passport

認証・クラウド・外部サービス

  • Vonage (Nexmo) Verify API
    • SMS OTPの送信・照合。
  • GitHub OAuth
    • user:emailスコープで認証連携。
  • Google OAuth 2.0
    • email, profileスコープで認証連携。
  • Amazon Cognito (OIDC)
    • openid email profileスコープで認証連携。
  • amazon rekognition
    • 画像解析のサービス 顔認証に使用。
  • ESP32
    • 認証成功イベントをHTTPで受けるIoT連携先。

アーキテクチャ概要

  • フロントは各ステップでバックエンドの認証エンドポイントへ遷移・送信。
  • バックエンドは認証成功後にフロントへリダイレクトし、クエリパラメータで結果を返却。
  • 顔認証ステップでは、フロントから受け取った画像をS3へ保存後、外部認証APIへuserIdを渡して判定。
  • 各ステップの成功時にESP32へ命令を送信し、物理デバイス側アクションと連携。

実装上の特徴

  • 認証機能をfeatures/auth配下に分割した拡張しやすい設計。
  • OAuth/OIDCのコールバック成功/失敗を統一パターンでハンドリング。
  • タイムアウト付きIoT通信により、ESP32がオフラインでも認証フローを継続。
  • TypeScript(バックエンド)による型安全なAPI実装。

やりたかったこと

  • 顔認証をcognitoのカスタム認証で行いたかった
  • 音楽はスピーカー経由で流したかった

y-ooe

@Yooe