java - 프론트엔드와 백엔드 인증코드 분리 문제

Question

전제

인증 코드를 얻기 위한 인터페이스가 https://api.b.com/captcha에 있다고 가정해 보겠습니다.

내가 상상한 인증코드 새로고침 방법

제 상상으로는 URL 뒤에 타임스탬프를 추가하는 방식으로 인증코드 새로고침 기능이 구현되는 것 같아요. 예를 들어 URL을 이렇게 바꿔서요

https://api.b.com/captcha?149...

인증 코드를 확인하는 전통적인 방법

기존 인증코드는 주로 세션을 통해 이루어져야 합니다. 프런트엔드는 쿠키에 세션 ID를 기록합니다.

백엔드는 또한 이 세션 ID와 해당 확인 코드를 Redis에 기록합니다.

프런트 엔드에는 인증 코드를 클릭하여 새로 고치는 기능이 있습니다. 클릭할 때마다 새로운 인증 코드가 생성되고, 세션 ID에 해당하는 인증 코드 값이 매번 Redis에 업데이트됩니다.

Redis의 세션 ID 값이 프런트엔드 값과 일치하는지 쿼리하면 확인 방법이 완료됩니다.

지금까지 발생한 문제

지금은 앞부분과 뒷부분을 분리하는 프로젝트를 진행하고 있습니다.

그리고 어떻게 해결해야 할지 모르겠는 크로스 도메인 쿠키 문제가 있습니다.

시나리오는 다음과 같습니다. 프런트엔드 프로젝트는 www.a.com이라는 도메인 이름에 있고, 백엔드 프로젝트는 api.b.com이라는 도메인 이름에 있습니다.

프런트엔드와 백엔드가 서로 다른 도메인 이름으로 되어 있기 때문에(사실 두 프로젝트를 같은 도메인 이름으로 두는 것도 가능하지만 이는 학습 목적으로는 하지 않습니다) 쿠키를 공유할 수 없습니다. 즉, 세션 ID를 얻을 수 없습니다. 그렇다면 전통적인 방식은 더 이상 가능하지 않은 것 같습니다.

PS: 프런트엔드 서버는 nginx를 사용하고 백엔드는 spring-boot를 사용합니다.

내 생각

아이디어 1

간단한 토큰을 생성하고 싶습니다. 토큰에는 사용자를 식별하는 데 사용되는 uuid만 포함되어 있습니다. 이 toekn의 uuid와 redis의 uuid를 비교하여 인증코드의 값이 맞는지 확인합니다. 그래서 다음과 같은 결과를 반환하겠습니다

으아악

우리가 base64 트랜스코딩된 이미지를 게시하는 이유는 주로 프런트엔드 img 태그가 base64를 지원하기 때문입니다. 이것을 직접 표시하는 것은 문제가 없습니다(고대 브라우저를 고려하지 않는 프로젝트는 아닙니다).

하지만 이렇게 하는 것은 그다지 합리적이지 않은 것 같습니다. 이렇게 하면 인증코드 주소에 접속하게 되면 인증코드 사진을 볼 수 없게 되기 때문입니다. 검증코드 스타일을 디버그하고 보는게 불편한데 사실 특별히 불편한건 아니고 그냥 img의 src를 설정하기 위해 js를 작성해야 한다는 것 자체가 상당히 바보같은 느낌입니다.

아이디어 2

응답 헤더에 토큰을 넣으세요. Node.js는 응답 헤더의 내용을 읽을 수 있습니다. 그러면 인증 코드 사진이 주소를 통해 직접 표시될 수도 있습니다. 하지만 젠장, 그것은 또한 어리석은 것처럼 느껴집니다. 인증코드 새로고침을 상상했던 방법으로 할 수 없기 때문이죠. 나중에 타임스탬프를 추가하고 수정하면 됩니다.

아이디어 3

인증코드는 상관없어요. 로그인할 때 프론트엔드 서버에서 인증코드를 확인하면 됩니다. 그러면 내 백엔드는 계정 비밀번호가 맞는지 확인만 하고 돌아옵니다. 토큰. 다른 API에 액세스할 때마다 토큰을 가져오세요.

---

정말 어떻게 해야할지 모르겠고, 관련 정보도 찾을 수가 없어서(제 검색 방법에 문제가 있을 수도 있겠네요) 도움을 요청합니다...

자세히 확인해 보니 이 문제는 Single Sign-On 문제여야겠죠?

Answer 1

당신이 해결해야 할 것은 도메인 간에 쿠키를 전달하는 문제입니다. 먼저 도메인 전반에 걸쳐 cors 기술을 사용하고 있는지 확인하십시오. cors는 HTTP 쿠키 및 HTTP 인증 정보를 기반으로 ID 자격 증명을 보낼 수 있습니다. 쿠키는 XMLHttpRequest의 withCredentials 플래그를 true로 설정하여 서버로 전송됩니다.

으아아아

프런트 엔드 요청에 withCredential을 추가하는 것 외에도 서버의 응답 헤더도 추가해야 합니다Access-Control-Allow-Credentials: true. 또한 응답 헤더에서는 Access-Control-Allow-Origin 값을 "*"로 설정할 수 없으며 특정 소스 http://foo.example로 설정해야 합니다.