teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

一部解決しました

2021/05/26 20:00

投稿

ryo24
ryo24

スコア0

title CHANGED
File without changes
body CHANGED
@@ -1,131 +1,7 @@
1
1
  ### 前提・実現したいこと
2
- Next.jsにてdjango-allauthを用いて、ソーシャルログインを実装したい
3
- 認証はToken認証ではなく、session認証(cookie)にて実装したいです。
4
2
 
5
3
  ### 発生している問題・エラーメッセージ
6
4
 
7
- Docker上にてフロントはNext.js(127.0.0.1:3000)、バックエンドはDjango(127.0.0.1:8000)で開発を行っています。
8
- ソーシャルログインを実装するにあたり、django-allauthを用いてtwitter認証(http://127.0.0.1:8000/accounts/twitter/login/)を試みようとしています。
9
- 今回Session認証を採用したいため、ひとまず127.0.0.1:3000でProxy(Express+http-proxy-middleware)を通して、twitterの認証画面を呼ぼうとするのですが、以下エラーが出て認証画面が出ないことが多々あります。(たまに意図通り認証画面を呼べたりする)
10
-
11
- http://127.0.0.1:3000/accounts/twitter/login/
12
- ↓  ↑
13
- Proxy(Express+http-proxy-middleware)
14
- ↓  ↑
15
- http://127.0.0.1:8000/accounts/twitter/login/(Django-allauth)
16
- ↓  ↑★
17
- twitter
18
-
19
- ・django-allauthのエラーが返ってきているので、127.0.0.1:3000→127.0.0.1:8000は(ひとまず)できてる
20
- ・Next.js(http://127.0.0.1:3000)を経由せず直接http://127.0.0.1:8000/accounts/twitter/login/を叩くと、認証画面が返ってくる
21
- ・django-allauthのソースコードをざっと見る限り、エラーの場合はtwitterからのレスポンス(★)が正常ではないため、エラーが出ているっぽい
22
- ので、http://127.0.0.1:3000から叩くにあたり、ほかに気づいていない問題点があると予想しているのですが、原因がわかっていません。
23
- 解決策等わかる方いらっしゃったらご教授いただきたいです。
24
-
25
- ```
26
- {'provider': 'twitter', 'code': 'unknown', 'exception': OAuthError('不正なレスポンスが返されたため、 "api.twitter.com" からリクエストトークンを取得できませんでした。')}
27
- ```
28
-
29
5
  ### 該当のソースコード
30
- ```
31
- ■next.js
32
- export default function SignIn(){
33
- return(
34
- ---略---
35
- <form>
36
- <Button
37
- href={http://127.0.0.1:3000/accounts/twitter/login/}
38
- >
39
- twitterでログイン
40
- </Button>
41
- </form>
42
- )
43
- }
44
- ```
45
6
 
46
- ```
47
- ■server.js
48
- const express = require('express')
49
- const next = require('next')
50
- const { createProxyMiddleware } = require('http-proxy-middleware')
51
-
52
- const port = parseInt(process.env.PORT, 10) || 3000
53
- const dev = process.env.NODE_ENV !== 'production'
54
- const app = next({ dev })
55
- const handle = app.getRequestHandler()
56
-
57
- app.prepare().then(() => {
58
- const server = express()
59
-
60
- server.use('/accounts/twitter',createProxyMiddleware({
61
- target: 'http://backend:8000/', //dockerにあわせて127.0.0.1→backendに変更
62
- changeOrigin: true
63
- })
64
- );
65
-
66
- server.all('*', (req, res) => {
67
- return handle(req, res)
68
- })
69
-
70
- server.listen(port, err => {
71
- if (err) throw err
72
- console.log(`> Ready on http://localhost:${port}`)
73
- })
74
- })
75
- ```
76
-
77
- ```
78
- ■docker-compose.yml
79
- version: '3'
80
- services:
81
- db:
82
- container_name: postgresql
83
- image: postgres:11.2
84
- volumes:
85
- - django_data_volume:/var/lib/postgresql/data
86
- environment:
87
- POSTGRES_USER: postgres
88
- POSTGRES_PASSWORD: postgres
89
- POSTGRES_DB: test_db
90
- ports:
91
- - '5432:5432'
92
- backend:
93
- container_name: django-restapi
94
- build:
95
- context: ./
96
- dockerfile: dockerfilePython
97
- volumes:
98
- - ./django-restapi:/code
99
- command: sh -c "python test_app/manage.py runserver 0:8000"
100
- ports:
101
- - "8000:8000"
102
- depends_on:
103
- - db
104
- frontend:
105
- container_name: next.js
106
- build:
107
- context: ./
108
- dockerfile: dockerfileNode
109
- volumes:
110
- - ./my-app:/code:cached
111
- - /code/node_modules
112
- command: sh -c "npm run dev"
113
- ports:
114
- - "3000:3000"
115
- depends_on:
116
- - backend
117
- volumes:
118
- django_data_volume:
119
- ```
120
-
121
- ### 補足情報(FW/ツールのバージョンなど)
7
+ ### 補足情報(FW/ツールのバージョンなど)
122
- 環境は以下です。
123
- ・Windows10 Pro(WSL2)
124
- ・Docker Desktop
125
- ・images&FW etc
126
- node:14.15.1-alpine3.10
127
- next.js;10.2.0
128
- express: 4.17.1,
129
- python:3.7
130
- Django:2.1.7
131
- django-allauth; 0.44.0

1

2021/05/26 20:00

投稿

ryo24
ryo24

スコア0

title CHANGED
File without changes
body CHANGED
@@ -27,7 +27,8 @@
27
27
  ```
28
28
 
29
29
  ### 該当のソースコード
30
+ ```
30
- ```next.js
31
+ next.js
31
32
  export default function SignIn(){
32
33
  return(
33
34
  ---略---
@@ -42,7 +43,8 @@
42
43
  }
43
44
  ```
44
45
 
46
+ ```
45
- ```server.js
47
+ server.js
46
48
  const express = require('express')
47
49
  const next = require('next')
48
50
  const { createProxyMiddleware } = require('http-proxy-middleware')
@@ -72,7 +74,8 @@
72
74
  })
73
75
  ```
74
76
 
77
+ ```
75
- ```docker-compose.yml
78
+ docker-compose.yml
76
79
  version: '3'
77
80
  services:
78
81
  db: