🐡
# 4.9 Okta ログイン(django-allauth を使った統合認証)
前回は Django 側に Session 認証 を導入した。
今回はさらに一歩進めて、Okta を使った統合認証(SSO) を Django に組み込む方法を紹介する。
1. Okta と OpenID Connect
Okta はクラウド型の ID 管理・認証基盤。
SPA を含む業務システムでは、社内アカウントを使った シングルサインオン(SSO) を実現するために利用される。
Okta との連携には OpenID Connect (OIDC) を使った。
当初は SAML2.0 での連携も検討したが、うまく動作しなかったため、よりモダンで SPA との親和性が高い OIDC(OpenID Connect) を採用した。
-
OIDC とは?
OAuth2.0 をベースにした認証プロトコルで、
アクセストークンだけでなく「ユーザー情報(IDトークン)」を安全に受け取れるのが特徴。 - SPA とバックエンドの構成でよく利用され、Okta の標準方式でもある。
2. 必要なパッケージ
pip install django-allauth
pip install socialaccount-providers-okta
3. Django 側の設定
INSTALLED_APPS
INSTALLED_APPS = [
...
"django.contrib.sites",
"allauth",
"allauth.account",
"allauth.socialaccount",
"allauth.socialaccount.providers.okta",
]
SITE_ID = 1
LOGIN_REDIRECT_URL = "/" # 認証後に戻すパス
LOGOUT_REDIRECT_URL = "/" # ログアウト後
Okta 連携用設定(実際の設定例)
SOCIALACCOUNT_PROVIDERS = {
'okta': {
'SCOPE': ['openid', 'email', 'profile'],
'AUTH_PARAMS': {'response_type': 'code'},
'OKTA_BASE_URL': os.getenv('OKTA_BASE_URL'),
'OAUTH_PKCE_ENABLED': True,
'client_id': os.getenv('OKTA_CLIENT_ID'),
'KEY': os.getenv('OKTA_CLIENT_ID'),
'SECRET': os.getenv('OKTA_CLIENT_SECRET'),
'redirect_uri': os.getenv('OKTA_REDIRECT_URI')
}
}
👉 .env
には以下を記載する:
OKTA_BASE_URL=https://dev-123456.okta.com
OKTA_CLIENT_ID=xxxxxxxxxxxxxxxxxx
OKTA_CLIENT_SECRET=yyyyyyyyyyyyyy
OKTA_REDIRECT_URI=http://127.0.0.1:8000/okta/login/callback/
4. Okta 側の設定(管理画面)
スクリーンショットの内容を整理すると以下の通り。
-
クライアントID / シークレット
- Okta が発行するアプリケーション固有の資格情報
- Django 側の
client_id
/SECRET
に設定
-
リダイレクトURI
- Okta ログイン後に戻る先
- 開発環境:
http://127.0.0.1:8000/okta/login/callback/
- 本番環境:
https://example.com/okta/login/callback/
-
サインアウトリダイレクトURI
- ログアウト後に戻す先
- 例:
http://localhost:5173
(開発時の Vue アプリ)
-
サインオン方法
-
OpenID Connect
を選択 - これにより OIDC の認可コードフローが使える
-
👉 画像にあるチェック「認証コード」「リフレッシュトークン」は、
SPA + サーバー連携の場合に一般的に使う設定。
5. Django 管理画面での設定
Django 管理画面 (/admin/socialaccount/socialapp/
) から Social Application を作成。
- Provider:
Okta
- Client ID: Okta から取得したもの
- Secret Key: Okta のシークレット
- Sites:
example.com
を選択 - Settings: 空 or JSON 設定
👉 これで Django ↔ Okta 間の接続が構成される。
6. 認証フロー(全体の流れ)
- ユーザーが
/accounts/login/
にアクセス - Okta ログインページにリダイレクト
- 認証成功後、Django 側の
/okta/login/callback/
に戻る - allauth がトークンを受け取り、ユーザーを作成/更新
- Vue 側は
/auth/status/
を叩いてログイン済みを確認
7. Vue 側との接続
Vue 側の処理は 4.8 と同じ:
- axios に
withCredentials: true
を付けて API 呼び出し -
/auth/status/
でログイン状態をチェック - ログインしてなければ
/accounts/login/
にリダイレクト
👉 違いは「ログイン画面が Django ではなく Okta に移る」点だけ。
まとめ
- Okta を使うと、企業の統合認証基盤に業務システムを載せられる
- Django 側は django-allauth + Okta プロバイダ を利用
- 設定には OpenID Connect が必須
- Vue 側からの利用方法は SessionAuth と同じ
Discussion