programing

로컬 전략으로 CORS를 사용하여 클라이언트 측 앱을 REST API로 인증

lastcode 2023. 2. 26. 09:46
반응형

로컬 전략으로 CORS를 사용하여 클라이언트 측 앱을 REST API로 인증

문제:

로컬 인증 전략만 사용하여 클라이언트 측 앱에 보안 API를 제공합니다.
빨간색 화살표는 지식 격차의 일부입니다.

여기에 이미지 설명 입력

콘텍스트:

---어느 정도 ---어느 정도라고 할 수 있습니다.client.example.com POST 하고 있습니다.api.example.com/login했을 때client.example.com다음과 같은 GET 서비스를 이용할 수 있습니다.api.example.com/secret.

아이디어!

API 앞에 있는 하이브리드 그랜트 타입을 사용한 OAuth 2.0의 임플리케이션.

왜 하이브리드일까요?

  • 그런 일은 없을 거야Implicit Grant Flow a a a aClient-Side Web Applications FlowAPI 서버로의 리다이렉트도 없기 때문에 액세스 토큰을 허가할 수 없습니다.(예를 들어) "데이터에 액세스해도 괜찮습니까?"

  • 그런 일은 없을 거야Resource Owner Password Flow클라이언트 ID와 클라이언트 비밀은 요청과 함께 전달되므로 클라이언트 앱은 서버 측으로 간주됩니다.

좋아, 그럼 둘 다 조금씩은 어때?

클라이언트 측 앱의 페이지 로드 시 CRSF 토큰을 사용하여 액세스 토큰으로 교환할 수 있는 OAuth 2.0 인증 엔드포인트를 사용하여 POST하면 어떻게 됩니까?로그인 성공 후 액세스토큰과 CRSF 토큰을 사용하여 이후의 각 요구를 인증합니다.

정상적인 Node.js OAuth 2.0 라이브러리를 찾았습니다.

https://github.com/ammmir/node-oauth2-provider

도와 주세요

이 문제를 해결하는 인증 조치의 실제 예를 찾을 수 없습니다.올바른 방향으로 안내해 주세요.

궁극적으로, 위의 규약이 불가능하더라도 로컬 전략(즉, 사용자 이름 및 비밀번호)으로 CORS를 사용하여 클라이언트 측 앱을 REST API에 인증하는 것이 목표입니다.

보상금을 수용하기 위해:

클라이언트측 앱이니 트렌드를 유지합시다.

API/Auth 서버용으로 위의 Node.js OAuth 2.0 시드와 Angular.js 또는 Backbone.js같은 프런트 엔드 프레임워크를 사용하여 요청을 작성하는 작업 예를 찾고 있습니다.

이 예는 위에서 설명한 컨텍스트와 일치해야 합니다.

저는 비슷한 아키텍처를 가진 앱을 만들고 있지만 서비스는 입니다.노드가 아닌 NET Web API로 DotNetOpen을 사용하고 있습니다.OAuth 공급자의 인증.고객이 제안하는 하이브리드 방식이 아니라 다음을 수행합니다.

  1. x.com은 로그인 페이지를 제공합니다.
  2. 로그인 페이지 POST 자격 정보를 x.com로 되돌립니다.
  3. x.com의 서버 측 로직은 client_id 및 client_secredential을 credential과 조합하여 토큰 요구(상기 설명한 리소스 소유자 비밀번호 credential 부여)를 제출하고 임시 액세스 토큰과 새로 고침 토큰을 모두 받습니다.
  4. 리프레시 토큰은 x.com에 의해 발행된 쿠키로 암호화됩니다.
  5. 그런 다음 쿠키(암호화된 리프레시 토큰 포함)와 임시 액세스 토큰이 모두 브라우저로 전송됩니다.
  6. 클라이언트 앱(내 경우 참조)은 액세스 토큰을 사용하여 api.x.com에 접속할 수 있습니다(CORS의 한계를 잘 알고 있는 것 같습니다만, 이것을 용이하게 하기 위해서 Angular의 $리소스 버전을 해킹했습니다만, 모든 HTTP 동사를 사용해 IE9를 서포트하고 싶었기 때문에 그다지 예쁘지 않았습니다).
  7. 액세스 토큰이 만료되면 클라이언트 측 앱은 x.com에서 새 액세스 토큰을 요청할 수 있습니다.
  8. 서버측에서 x.com은 리프레시 토큰을 취득하기 위해 쿠키를 복호화하고 새로운 액세스 토큰에 대해 다른 oauth 콜을 발행합니다.

이것은 꽤 높은 레벨이지만, 상황에 대처하는 방법에 대한 센스를 얻을 수 있기를 바랍니다.고객님의 경우 세션 상태나 데이터베이스를 사용하여 리프레시 토큰을 저장하고 싶지 않았습니다.단, 리프레시 토큰을 브라우저에 공개하면 보안상의 문제가 발생하기 때문에 리프레시 토큰의 암호화가 중요하며 cookie를 사용하면 세션 상태나 다른 상태를 유지할 필요가 없어집니다.x.com의 영속적인 스토리지.

상을 노리고 있는 답은 없다.단 2센트 :)

내 웹 서버에서

인증은 https를 통한 기본 인증으로 로그인/비밀번호를 사용하여 rest call을 통해 수행합니다.이 호출은 키를 클라이언트에 전달합니다(1페이지 웹 앱).

그 후 모든 REST 콜은 키로 서명됩니다.서버는 시그니처가 올바른지 확인하고 모든 것이 https로 발생합니다.

이 메커니즘은 꽤 사용되고 있다고 생각합니다.

크로스 도메인은 문제가 되지 않습니다.다른 소스로부터 필요한 것이 있으면 JSONP를 사용합니다.

https->http 포워더로서 nginx 를 사용합니다.

OAuth2 솔루션과 어떻게 경쟁하는지는 잘 모르겠습니다.

Node와 Passport를 사용하여 이 예를 구축했습니다.페이스북 또는 로컬 전략으로 사용자를 인증하는 방법을 보여주는 JS.양쪽 모두 설명한 대로 다른 도메인에 있으며, 이를 위해서는 CORS가 활성화되어야 합니다.

GitHub: https://github.com/pablodenadai/Corsnection
라이브 데모: http://corsnection-client.herokuapp.com/

작업 예시를 쓸 시간은 없지만 2가지 경로를 보여 드릴 수 있습니다.

가장 큰 거래는 CORS입니다.그 문제를 해결하면 $http 서비스를 쉽게 이용할 수 있습니다.따라서 첫 번째이자 가장 쉬운 방법은 api.x.com을 가리키는 x.com 웹 서버에서 리버스 프록시를 설정하는 것입니다.나는 여기에 기사를 썼다.

두 번째 접근법은 리소스를 사용하도록 특정 도메인을 승인하는 것이 더 낫고 정확히 이 목적을 위해 작성되었습니다.이것은 api.x.com에서 약간의 코딩을 수반하기 때문에 다른 도메인에서 제공되는 새로운 웹 어플리케이션에서는 아무것도 변경할 필요가 없습니다.api.x.com 서비스에서는 CORS 요청을 승인하기만 하면 됩니다.

  • 인증된 도메인 목록을 관리할 수 있는 테이블을 데이터베이스에 만듭니다.
  • 이 테이블 레코드에 "x.com"을 추가합니다.
  • api.x.com에서 요청 필터/요구 또는 요청 처리 후 호출해야 하는 메서드에 사용하는 기술 용어를 추가하여 응답에 추가합니다.Access-Control-Allow-Origin: x.com요구가 x.com 에서 송신된 경우(즉, 체크 인 요구 헤더의 값이 위의 표의 임의의 값과 일치하는 것을 참조해, 그 값을 Access-Control-Allow-Origin 응답 헤더에 넣습니다.

이것으로 끝입니다. 후 $syslog 또는 jQuey.ajax 사용법을 알고 있으면 인가 도메인에서 api.x.com에 대한 모든 요청을 몇 분 안에 POST/PUT/DELETE/...할 수 있습니다.

vinilla js 웹 앱과 GA 백엔드 또는 Open에 대한 교차 도메인 인증을 사용하는 것과 매우 유사한 아이디어입니다.아이디 커넥트

웹 앱은 CDN에서 실행됩니다.로그인 링크를 클릭하면 해당 로그인 서버로 이동하고 웹 앱(XSRF 보안 토큰 및 HTTPS 전용 쿠키 포함)으로 리다이렉트됩니다.로그인 서버는 credential이 있는 교차 도메인 요청을 받아들입니다.XSRF 토큰은 모든 요구에 대해 (헤더에) 설정해야 합니다.cookie는 브라우저에 의해 설정됩니다.HTTP 전용 쿠키이므로 JS는 읽을 수 없습니다.그 기술은 매우 안전하다.

로그인하면 로그인 서버에서 안전한 평가를 받을 수 있습니다.

상세한 것에 대하여는, 여기를 참조해 주세요.또, 오픈 소스 레포는 이쪽에서 보실 수 있습니다.

언급URL : https://stackoverflow.com/questions/15286324/authenticate-client-side-app-to-rest-api-using-cors-with-local-strategy

반응형