Portfolio

질문 리스트

프로젝트 관련 질문

[기술] 카카오 OAuth 에 관한 질문

현재 백엔드가 구현하려는 방 유저가 카카오 로그인 버튼을 누르면, 우리서버/oauth 창으로 가게 만들고, 우리 서버에서 카카오서버와 인가 로직,인증 로직 전부 처리 우리 DB에 회원 등록 혹은 회원 확인 과정 거친 후 클라이언트 /홈으로 리다이렉트 시켜서 response 보내는 방식 입니다.

Access token 은 응답헤더로, 유저정보는 응답바디에 json 형태로, refresh token 은 Cookie로 보내겠다. 고 하셨습니다.

fetch 나 axios를 쓰지 않고, window.location.href 로 창만 이동 시킨 건데 클라이언트에서는 응답을 어떻게 가져와야하는가? 가 고민입니다. 페이지가 리다이렉트 됐을 때 리스폰스를 어디서 어떻게 받아오는 코드를 작성해야 할지 잘 감이 오지 않습니다.

> 서비스 관점에서 생각할 것. “서비스 적으로 옳은건 뭘까? “ 생각해 보세요 (보안적인 측면에서 지금 방식이 더 옳을 것.) > 서버에서 홈으로 보내면,

> Access Token 값만 알면 유저 정보를 알 수 있다. 백엔드는 url을 강제로 리다이렉트(⇒ url) 시켜준다고 했다. → url 파라미터에 Access Token을 담아준다.

- [힌트] 관찰..?자? → useEffect 로 하던지 []에 값을 넣어주기

→ 어떡하면 가져올수잇을지 생각해보자. key-value 토큰=토큰내용 있는지 지속적으로 관찰하는 관찰자를 만들어 보자.

: 결국 응답 값은 프론트가 못받아요 URL 로 받는 수밖에없슈…ㅠㅠ

로그인 아닌, 다른 페이지에서 로그인을했을 때 ? 서버가 로그인 하기 이전 페이지로 리다이렉트를 시켜야하나? 클라이언트가 리다이렉트를 시켜야하나 ?? → [힌트] 통역사…?를 통해 소통한다…?

클라이언트만의 미들웨어(통역사)를 만들어 서버와 통신한다.
로그인 라우터 를 만들어 볼까
우리가 필요로하는 역할을 만들고, 배치하는 작업을 한다. (어디에 위치시킬지)

홈페이지에서 로그인한다. 홈에서 리다이렉트를 하는게 맞을까? 홈이 이거까지 알아야 해?! 미들웨어가 있다면 좋지 않을까?

어떤 페이지가 통역사 역할을 맡으면 좋을까?

리액트 라우터를 사용해 로그인 이전 페이지로 보낸다. 위험하지 않을까? 이전 페이지를 기억할까?

토큰을 url에 담아 전달할 경우 보안 상 위험하지 않을까?

리스크를 없앨 수는 없다. 만료 기간을 짧게 잡고 Refresh Token을 사용하자.
OAuth에서 전달하는 토큰은 이미 암호화되어 있기에 url에 노출되어도 위험도가 낮다.

[기술] 유저 프로필 설정 페이지에서 유저의 프로필 선택에 따라 서버에게 PATCH 요청으로 전달하기

res.body로 넘어온 유저info 안에 카카오 프로필 src url 이 있을 것이라고 가정하고 해당 페이지를 구현중에 있습니다.

유저가 직접 프로필 사진 이미지를 업로드하는 기능을 하는 profile setter 라는 컴포넌트를 하나 만들고 그안에 이미지 태그와, <input type=file>태그를 넣어놓고 유저가 사진을 올리면 미리보기가 가능하게 만들었습니다. FileReader를 사용하여 base64 url로 생성까지는 할 수 있도록 했습니다.

다만 이제 유저가 어떤 선택(카카오프로필 사용 / 직접 올린 이미지 사용) 을 했냐에 따라서 밑에 회원가입 버튼에 제출되어야할 양식 데이터를 서버로 어떻게 제공해야할지 잘 모르겠습니다. useState를 써서 업로드된 이미지가 따로 없다면, 그냥 form 데이터 profile field 안에 kakao 프로필 url 을 넣고, 만약 있다면, 해당 이미지 base64 URL 을 넣어야 하는지 잘 감이 오지 않습니다.