🐯

FastAPIでJWT認証付きREST APIを構築してみた【初心者向け+図解あり】

に公開

FastAPIでJWT認証付きREST APIを構築してみた【初心者向け+図解あり】

個人的なぼやき(フロントエンド出身のぼやき)

こんにちは、Takaです。
実はこれまで、フロントエンドの立場からAPIの裏側を深く意識したことがなかったんです。
fetchで叩けばJSONが返ってくる。それが当たり前だと思ってました。

でも、今回FastAPIで認証付きのAPIを自作してみて感じたのは、

「裏でこれだけ丁寧に設計されてるから、フロントは安心して使えるんだな」

ってことでした。

認証ロジック、トークンの安全性、データの扱い方……。
サーバー側の気持ちがちょっとわかって、これからのUI設計にも優しさが加わりそうです。

前回のZenn投稿「UUIDを使ったREST API設計で初心者がつまずいた3つのポイント」では、FastAPIでのCRUD API実装に挑戦しました。
今回はその続編として、JWT(JSON Web Token)を用いた認証付きのAPIを構築してみたので、つまずきポイントや構成含めてわかりやすくまとめていきます ✅


✅ やりたかったこと

  • /token でユーザー認証 → トークン発行
  • Authorization: Bearer でトークン付きリクエスト
  • /items/ CRUD APIを認証必須

📁 ディレクトリ構成

uuid_api/
├── main.py         # アプリのエントリーポイント
├── auth.py         # JWT認証関連の処理
├── crud.py         # アイテムのCRUD処理
├── models.py       # Pydanticモデル定義
├── database.py     # ダミーDB定義
└── __init__.py     # パッケージ初期化(空でOK)

🔑 JWT認証のフロー(図解)

graph LR
A[Login: /token POST] -->|username/password| B[認証 & トークン発行]
B --> C[アクセストークン返却]
C --> D[Authorize ボタンでUIにトークンセット]
D --> E[/items/ にGETやPOST]
E -->|トークン付き| F[認証チェックOK]

🧪 動作確認手順

  1. /tokenusername=taka, password=password123 でPOST
  2. トークンをSwagger UI右上の「Authorize」に貼る
  3. /items/ にGETリクエスト → 成功 🎉

※エラー例、bcryptバージョン不一致、インポートエラーなども経験 → bcrypt==3.2.0 で安定


✅ まとめ

  • FastAPI + JWT + UUIDの構成は小規模アプリにちょうどよい
  • ファイル分割して責務を明確に
  • Swagger UIで認証テストも完結

次回はSupabaseやMySQL連携でデータの永続化+可視化ダッシュボード構築に挑戦予定です🔥


📦 GitHubリポジトリ(コード全文)
▶️ https://github.com/TKNRFJK1208/fastapi-uuid

応援 & フォロー励みになります!

Discussion