그래서,이 약간이 될 수 있습니다 오랜 대답 -하지만 당신은 다소 재미 있고 중요한 질문을 올렸습니다.
이런 종류의 일을 처리하기 위해 대부분의 시간을 노드와 파이썬에 쓰는 사람으로, 나는 여기에 뛰어들 것이라고 생각했다.
React 앱과 백엔드 API를 보호하기 위해 사용하려는 프로토콜은 OAuth2 암호 부여 플로우입니다. 이론적으로 작동하는 방식은 아주 간단합니다.
React 앱에서 사용자의 사용자 이름/비밀번호를 수집합니다. 이는 사용자의 애플리케이션을 구성한 방법 인 경우 이메일/비밀번호가 될 수도 있습니다.
POST api.myapp.com/oauth/token
grant_type=password&username=USERNAME&password=PASSWORD
은 서버에 게시 할 때 application/x-www-form-urlencoded
콘텐츠 형식을 사용하십시오 :
당신은 다음과 같은 형태 백엔드 API에 POST 요청을 보냅니다.
서버가이 요청을 받아서 OAuth2 라이브러리를 통해 실행하고 두 개의 토큰, 액세스 및 새로 고침 토큰을 생성합니다.
서버 측 API에서 토큰을 생성하면 쿠키에 토큰을 저장 한 다음 사용자 브라우저에 저장합니다.
이 시점부터 모든 것이 자동으로 이루어져야합니다. React 서버가 백엔드에 API 요청을하면 브라우저는 두 개의 토큰을 자동으로 포함하는 쿠키를 통해 사용자를 식별합니다.
당신이이 같은 일을 처리하므로, 서버 측에 대한 OAuth2를 라이브러리를 사용해야합니다
:
- 생성 토큰.
- 만료되면 새 액세스 토큰에 대한 새로 고침 토큰을 교환합니다.
- 토큰을 기반으로 사용자를 식별합니다.
- 해지 토큰 그들이 손상된 경우 등
거기에 꽤 많은 더 많은,하지만이 기본, 높은 수준의 생각이다.
알 수 있듯이 여기에는 API 키가 없습니다. 신뢰할 수없는 환경 (예 : 모바일 앱 또는 클라이언트 측 자바 스크립트 앱)을 사용하는 경우 영구 API 토큰을 저장하는 데 전혀 안전하지 않은입니다. 이유는 소스 코드 또는 자바 스크립트에서 쉽게 추출 할 수 있기 때문입니다. 안전하지 않은 위치에 저장
- 영구 자격 증명 : 당신이 보호 많이 얻을로 대신 위에서 언급 한 흐름을 사용
훨씬 안전합니다.
- 수명이 짧은 토큰이 식별자로 사용됩니다. 이들은 시간이 지남에 따라 회전합니다.
- 토큰은 Javascript에 액세스 할 수없는 쿠키에 저장됩니다. 이는 웹 노출의 위험이 적다는 것을 의미합니다. 희망이 도움이 : -
- 암호는 세션의 기간 동안, 한 번 교환이 덜 중요한 정보
는 어쨌든) = 자주 와이어를 통해 것입니다 의미합니다!
일부 도구를 찾으려면 oauth 라이브러리 (서버 측)가이 정보를 제공해야합니다. 이 작업을 수행 할 수있는 서비스를 찾고 있다면 작업중인 제품을 확인하십시오 (Stormpath). 유료 서비스이지만 사용자를 대신하여 이러한 복잡성을 많이 처리합니다.
전에 익스프레스를 사용하지 않았습니까? 'app.get ('some/route/here', authHandlerHere, requestHandlerHere);'당신의 인증 핸들러는'req.isAuthenticated()와 같은 일을 할 수 있습니까? next() : res.sendStatus (401); ' –
적어도 두 가지 질문이 있으며 어느 경우에도 너무 광범위합니다. Express, PassportJS의 문서를 읽고 라우팅 및 인증을 이해하고 크로스 사이트 요청 위조 보호를 찾으십시오. 그런 다음 여기에 코드를 게시하면 작동하지 않습니다. – Paul