Express 서버, Passport를 사용하는 ReactJS 및 Relay 응용 프로그램에 대한 인증 전략

Question

ReactJS 응용 프로그램을 구축하는 데 몇 주가 지난 후 인증에 시간을 추가해야합니다. 이것은 나에게 매우 혼란 스럽기 때문에 SO 커뮤니티에 도움을 청하기로 결정했습니다.

내 응용 프로그램이 구성되어

:

• 포트 3000에서 실행, 3001
• 와 클라이언트 ReactJS + 릴레이 응용 프로그램이 라우터 V4 반응 포트에 몽구스/MongoDB를 통해 GraphQL 서버를 실행하는 급행 서버

나는 서버와 클라이언트 (npm start)를 동시에 시작하는 스크립트를 가지고있어 모든 것이 잘 작동합니다. 서버가로드되고 클라이언트가로드되고 브라우저는 포트 3000에서 열리고 포트 3001의 서버에서 RelayJs를 사용하여 GraphQL 데이터를 요청합니다.

저는 LocalStrategy를 사용하여 과거에 Passport 인증을 사용했습니다. Passport는 데이터베이스로 이동하여 사용자 이름과 암호를 확인하고 Express 미들웨어의 라우터를 사용하여 요청을 만듭니다. 제대로 작동하지만 클라이언트 측이 아니라 서버 측에서 작동합니다. 권한이없는 경우

• , 그것은 로그인 페이지로 리디렉션됩니다

  내 목표는 그들 (오늘 포트 3000에 브라우저를) 사용자가 클라이언트 응용 프로그램을 미사일하는 것입니다.

• 인증되면 사용자가 응용 프로그램으로 리디렉션됩니다.

• 사용자는 '내 계정 기억'을 사용하여 로그인하지 않고도 (동일한 브라우저에서 하루 종일) 로그인 할 수 있습니다.

• 사용자가 사용자 이름/암호를 기억하지 못하면 다시 설정하도록 요청하고 새 자격 증명을 전자 메일로 보냅니다.

현재로서는 이러한 것들이 어떻게 작동하는지 알 수 없습니다. Passport는 서버에서 실행되며 모든 논리는 클라이언트에서 수행됩니다 (MongoDB에서 사용자 정보 수집 제외).

나는 두 가지 방법을 볼 수 있습니다 : 인증 된 경우 exclusivelly 포트 3000에 인증을 처리하는 프록시 서버를 구축

A)가,가, 또 다른 내부 포트에 실제 ReactJS 응용 프로그램 프록시 실행됩니다 것

. 하지만 이렇게하면 사용자가 3000 번 포트를 처음 방문 할 때 로그인하는 방법을 찾을 수 없습니다. 따라서 클라이언트를 변경해야합니다 ( create-react-app은 webpack-dev-server가 포함 된 상태로 실제로 꺼내기 후에 나는 클라이언트 스크립트 안에 어떤 일이 일어나는지 이해할 수 없다.) 즉, 혼란스럽고 내 아키텍처를 변경해야합니다.

b) 내 ReactJS 응용 프로그램에 Passport를 추가하십시오. 이것은 암호가 노드 (서버 측)에서 실행되도록 빌드되므로 작동하지 않습니다. 나는 이것이 가능한지 또는 어떻게하는지 알 수 없다.

이러한 "명확하지 않으며 혼동스러운"아키텍처를 수행 한 후에는 무엇을 해야할지 알 수 없습니다.

이 시나리오에서 앞으로 이동하는 방법을 알려주십시오. 도움말은 대단히 감사하겠습니다.

Answer 1

당신은 이런 식으로 작업을 수행 할 수 있습니다

• 는
• 가 POST를 통해
• 양식 보내기 자격 증명 데이터 반응에 로그인 폼을 만들고 그 노선에 로그인에
• 사용 여권 미들웨어를 명시 적으로 경로를 만들기 그 로그인 경로를 표현
• 패스포트가 사용자 이름과 패스워드가 괜찮은지 확인한 후에, 그것은 모두 괜찮다는 것을 되돌려 보내고 사용자를 당신의 앱으로 보낼 수 있습니다.

고객에게 보낼 표현은 고객이 사용하고자하는 것에 달려 있습니다. 그것은

그런 식으로 당신이

내가 비슷한 설정을 사용 (API가/graphql에 있고 로그인/로그인에) graphql graphql 전에없이 인증을 처리하는 ... (JWT) 토큰 쿠키 될 수 있으며, 나는 당신에게 더 많은 정보를 줄 수있다;)