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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

3959閲覧

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

iruka-s

総合スコア12

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2020/06/10 06:32

編集2020/06/10 06:34

前提・実現したいこと

手探りながら、以下のフレームワークを用いて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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cuz

2020/06/10 07:28

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

2020/06/10 07:41

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

回答1

0

自己解決

cuz様に教わった方法で解決。

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

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

投稿2020/07/10 07:39

iruka-s

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問