소셜로그인 구현시 JavscriptSDK사용시 올바른 redirect uri 위치

JavaScript
1

안녕하세요. 소셜로그인 구현 도중 궁금한게 있어서 질문 올립니다…

  1. JavaScript SDK를 사용하려고 합니다.

  2. 인가코드가 외부로 노출될 필요가 없다고 생각해서 redirect uri를 서버쪽으로 설정하였습니다. 그런데 이렇게 했더니 자바스크립트 SDK의 'Kakao.Auth.setAccessToken()'를 호출할수가 없는 상황이 되버렸습니다. 자바스크립트SDK는 redirect uri를 프론트쪽 페이지로 설정하는게 맞는걸까요?

  3. ‘자바스크립트 SDK와 저희 회사 서버에서 토큰을 받아서 반환해주는 방식은 호환이 안된다. 액세스토큰을 얻는 uri를 서버쪽으로 했다면, 액세스토큰을 쿠키에 넣어두고 써야 한다. 또한 액세스토큰을 이용하여 카카오톡 관련 여러 서비스를 호출해야할떄 rest api문서를 바탕으로 다 커스텀하게 만들어줘서 관리해야된다.’ 라고 이해 하면 될까요?

  4. 추후 카카오의 다른 서비스들을 연계해서 쓸려면 무조건 자바스크립트SDK를 쓰는게 더 좋다고 느끼는데 그럼에도 SDK를 안쓰는 회사들의 케이스들은 어떤게 있을까요? 경험이 적어서 쉽게 떠오르지 않는것 같습니다.

  5. 질문글을 적다보니 해결 방법이 떠오른것 같은데 맞는지 모르겠습니다. 다음과 같이 처리하는건 어떨까요? ‘로그인 성공후 session에 토큰을 넣어두고 메인페이지로 리다이렉트 하지말고 somethingPage 로 리다이렉트하여 그곳에서 세션에 있는 토큰을 꺼내와 setAccessToken() 을 호출해서 설정해주고 메인 페이지로 리다이렉트 하여 로그인 절차를 끝낸다’

  • passport-kakao 모듈과 관련된 질문은 안받으시는것 같아서 위에 적지는 않지만 상황에 대해 좀 더 참고가 될수 있을지도 몰라 이곳에 적겠습니다. 현재 passport-kakao를 사용하여 인증을 거치고 기존 가입유저라면 유저의 정보를 세션에 넣고, 아니라면 회원가입 페이지로 redirect를 해주고 있습니다. 로그인이 완료된후 자바스크립트SDK의 setAccessToken() 을 호출하여 액세스토큰을 설정해주고 싶지만 떠오르는 방법들은 모두 access token이 노출이 될만한 방법들 입니다. 그래서 passport-kakao와 카카오에서 제공하는 JavaScript SDK의 동시사용이 애초에 부적절한것 아닌가 하는 생각이 들었습니다.

감사합니다!

2

해결 된것 같습니다. 가장 마지막에 적었던것처럼 ‘세션에 토큰에 대한 정보를 담고 somethingPage로 리다이렉트 해서 그곳에서 SDK에 setAccessToken을 호출 한 후 메인 페이지로 리다이렉트’ 해서 잘 동작하는것 확인 했습니다. 다만 이게 일반적인 구현인가는 잘 모르겠습니다!

3

안녕하세요.

인가코드는 redirect_uri로 전달됨으로 사용자의 브라우저에 항상 노출 됩니다.
때문에, 로그인 방식을 변경할 때 인가코드 노출여부는 큰 영향을 주지 않을 것 같습니다.

접근토큰이 프론트와 백앤드 둘 다 필요하신 것 같은데요.
보통 양쪽에서 필요한 경우 설명 주신 것 처럼 처리 하기도 합니다.

개인적으로는 백앤드 만으로 구현 가능하다면 인가코드 보다 더 민감한 접근 토큰을 프론트에서 같이 사용하지 않으셔도 될것 같습니다.