🐡

# 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 側の設定(管理画面)

スクリーンショットの内容を整理すると以下の通り。

  1. クライアントID / シークレット

    • Okta が発行するアプリケーション固有の資格情報
    • Django 側の client_id / SECRET に設定
  2. リダイレクトURI

    • Okta ログイン後に戻る先
    • 開発環境: http://127.0.0.1:8000/okta/login/callback/
    • 本番環境: https://example.com/okta/login/callback/
  3. サインアウトリダイレクトURI

    • ログアウト後に戻す先
    • 例: http://localhost:5173 (開発時の Vue アプリ)
  4. サインオン方法

    • 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. 認証フロー(全体の流れ)

  1. ユーザーが /accounts/login/ にアクセス
  2. Okta ログインページにリダイレクト
  3. 認証成功後、Django 側の /okta/login/callback/ に戻る
  4. allauth がトークンを受け取り、ユーザーを作成/更新
  5. 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