質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.91%

Django + React でログイン後のトークン認証がうまくいかない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,393

score 12

前提・実現したいこと

手探りながら、以下のフレームワークを用いてWebアプリを開発中です。
サーバー側:Django
フロント側:React
参考URL:https://qiita.com/init/items/f5a5a64a05541fcda713

Django REST Frameworkでユーザー認証のAPIを作成。
Reactのフォームから「ユーザー名」「メールアドレス」「パスワード」を送信し、Djangoでログイン認証。
React側でレスポンスとして受け取ったトークンKeyを用いてGETリクエスト等の実行を実現したいです。

発生している問題・エラーメッセージ

React側からユーザー名等を送信し、Django側でログイン認証をすること、
ログインに成功した場合にトークンKeyをレスポンスとしてReact側に送ることは実現できました。
しかし、トークンKey取得後にReactからGETリクエストでDB情報を取得しようとしても、403エラーになります。
React側のトークンKeyの使い方が悪いのか、Django側の設定が悪いのか。わかりません。

Error: Request failed with status code 403
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:61)

該当のソースコード

【Django側】
settings.py

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'lch3^0yr14t7vg7z$27+%59es73wx-f#^d#xm@aqepn*)ly=hi'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []

# 追加
REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.IsAuthenticated',
    ],
    'DEFAULT_AUTHENTICATION_CLASSES': [ 
        'rest_framework.authentication.SessionAuthentication',
        'rest_framework.authentication.TokenAuthentication',
    ],
}

# Application definition

INSTALLED_APPS = [
    # Local
    'posts.apps.PostsConfig',

    # 3rd-party apps
    'rest_framework',
    'rest_framework.authtoken',
    'rest_auth',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'corsheaders',

    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.sites',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000',
    'http://127.0.0.1:3000',
)

ROOT_URLCONF = 'blog_project.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'blog_project.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}


# Password validation
# https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

# Internationalization
# https://docs.djangoproject.com/en/3.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'

EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
SITE_ID = 1

urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/v1/', include('posts.urls')),
    path('api-auth/', include('rest_framework.urls')),
    path('api/v1/rest-auth/', include('rest_auth.urls')),
    path('api/v1/rest-auth/registration/', include('rest_auth.registration.urls')),
]

【React側】

App.js

import React, { Component } from 'react';
import axios from 'axios';


class App extends Component {
    state = {
        posts: []
    };

    componentDidMount() {
        this.postLogin();
    }

    getPosts(tokenKey) {
      localStorage.setItem('jwt', tokenKey);
      axios
        .get('http://localhost:8000/api/v1/', {
          headers: {
            'Authorization': `Bearer ${tokenKey}`,
          }
        })
        .then(res => {
            this.setState({ posts: res.data });
        })
        .catch(err => {
            console.log(err);
        });
    }

    postLogin() {
      var params = new URLSearchParams();
      params.append('username', 'admin');
      params.append('email', 'admin@gmail.com');
      params.append('password', '12345678');

      axios.post('http://localhost:8000/api/v1/rest-auth/login/', params)
      .then(response => {
        console.log(response)
        this.getPosts(response.data.key)
      })
    }

    render() {
        return (
            <div>
                {this.state.posts.map(item => (
                     <div key={item.id}>
                        <h1>{item.title}</h1>
                        <p>{item.body}</p>
                     </div>
                ))}
            </div>
        );
    }
}

export default App;

試したこと

トークンKeyはローカルストレージに入れると良いと聞いたのでやってみた

localStorage.setItem('jwt', tokenKey);

リクエスト時のヘッダーに渡してやればいいと聞いたのでやってみた

get('http://localhost:8000/api/v1/', {
    headers: {
      'Authorization': `Bearer ${tokenKey}`,
    }
})


どちらもだめ。
http://localhost:8000/api/v1/に直接アクセスし、GET成功時の通信内容を開発者ツールで監視してみた。

イメージ説明

もしかしてトークン認証ではなくCookieとセッションIDを使用したセッション認証を行っている?
しかし、ログイン時のレスポンスを確認してもセッションIDは見つからず。

どうすればいいでしょうか。。。。

補足情報(FW/ツールのバージョンなど)

・Python 3.6.9
・npm 6.14.4

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • cuz

    2020/06/10 16:28

    リクエスト時のヘッダの"Bearer"を"Token"にしても動きませんか?

    キャンセル

  • iruka-s

    2020/06/10 16:41

    動きました!!!!!!!
    "Bearer"と"Token"がそれぞれ何を意味するのかこれから調べようと思います。

    ありがとうございました!

    キャンセル

回答 1

check解決した方法

0

cuz様に教わった方法で解決。
>>リクエスト時のヘッダの"Bearer"を"Token"にしても動きませんか?

Bearerトークンを使用する場合はヘッダもBearerにする。
今回は通常のトークンを使用するのでヘッダはTokenにする。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る