はじめに
DRF(Django REST framework)の勉強のため、以下書籍を参考にサンプル作成します。
最終的には書籍にあるVue+DRFの作成を目指します。
- 現場で使えるDjangoの教科書
- 現場で使えるDjango REST Frameworkの教科書
Vol.4では別オリジンで動作するフロントエンド(Vue)からアクセスするためのCORS設定を行いました。
Vol.5ではOpenAPI形式のAPIのドキュメント生成をできるようにします。
環境
- Intel Mac 13.4.1(c)
- Python 3.11.4
- Django 4.2.3
- DRF 3.14.0
手順
drf-spectacularの導入
drf-spectacular
パッケージを導入します。
$ poetry add drf-spectacular
この時点のpyproject.toml
[tool.poetry]
name = "backend"
version = "0.1.0"
description = ""
authors = ["Jozuo jozuo.dev@gmail.com"]
readme = "README.md"
[tool.poetry.dependencies]
python = "^3.11"
django = "^4.2.3"
djangorestframework = "^3.14.0"
djangorestframework-simplejwt = "^5.2.2"
dj-rest-auth = "^4.0.1"
django-cors-headers = "^4.2.0"
drf-spectacular = "^0.26.4"
[tool.poetry.group.dev.dependencies]
debugpy = "^1.6.7"
pytest = "^7.4.0"
black = "^23.7.0"
ruff = "^0.0.280"
mypy = "^1.4.1"
[build-system]
requires = ["poetry-core"]
build-backend = "poetry.core.masonry.api"
設定変更
設定ファイルに以下を追加します。
INSTALLED_APPS = [
--- 省略 ---
# 3rd party package
"rest_framework",
"rest_framework.authtoken",
"dj_rest_auth",
"corsheaders",
+ "drf_spectacular",
--- 省略 ---
]
--- 省略 ---
REST_FRAMEWORK = {
"DEFAULT_AUTHENTICATION_CLASSES": [
"dj_rest_auth.jwt_auth.JWTCookieAuthentication",
],
+ "DEFAULT_SCHEMA_CLASS": "drf_spectacular.openapi.AutoSchema",
}
ルート設定
ルート設定に以下を追加します。
+ from django.conf import settings
--- 省略 ---
+ if settings.DEBUG:
+ urlpatterns += [
+ path("api/schema/", SpectacularAPIView.as_view(), name="schema"),
+ path(
+ "api/schema/swagger-ui/",
+ SpectacularSwaggerView.as_view(url_name="schema"),
+ name="swagger-ui",
+ ),
+ path(
+ "api/schema/redoc/",
+ SpectacularRedocView.as_view(url_name="schema"),
+ name="redoc",
+ ),
+ ]
Swagger-UIでのAPI動作確認
ブラウザでhttp://localhost:800/api/scheme/swagger-ui/
にアクセスするとAPIドキュメントが表示されます。
認証不要なAPIはこの状態で呼び出すことができますが、認証が必要なAPIは認証エラーになるため続けて認証の設定を行います。
JWTトークンの発行
Swagger-UIからPOST: /api/v1/login/
エンドポイントを利用してJWTトークンを発行します。
以下のいずれかの組み合わせでAPIを実行します。
- ユーザー名 + パスワード
- メールアドレス + パスワード
ログインに成功すると、以下のようなレスポンスが表示されるため、access
の値をコピーします。
{
"access": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjkwNTA1OTEwLCJpYXQiOjE2OTA1MDIzMTAsImp0aSI6IjQ3Y2JmYTYwYTU1NzQ5MzJiNDg2MmNiMWY1MzE2MTg5IiwidXNlcl9pZCI6MX0.kYB0PQgBZnWB-O0a1Y5Z5or--BPSEzeykA34pwdHN_8",
"refresh": "",
"user": {
"pk": 1,
"username": "admin",
"email": "admin@example.com",
"first_name": "",
"last_name": ""
}
}
JWTトークンの設定
Swagger-UI画面右上にある「Authorize」をクリックすると認証用ダイアログが表示されます。
このアプリケーションはヘッダー認証を利用しているためjwtHeaderAuth (apiKey)
側するので、そちらのValueに "JWT [上で取得したトークン値]" を入力してAuthorizeを行います。
これで認証が必要なAPIもSwagger-UIから呼び出すことが可能になります。