common/functions.ts
kakao.auth.authroize를 통해 리다이렉트 url의 query parameter로 들어온 코드로 토큰을 조회하려 합니다.
이와 같은 에러가 발생합니다ㅠㅠ
kakao.auth.login은 새로고침 전까지는 이전에 success에 넘겼던 콜백함수가 실행되어 사용하기 곤란합니다.
예를 들어 페이지 A에서 Kakao.Auth.login({
success: () => { console.log (‘a’)}
})
페이지 B에서 Kakao.Auth.login({
success: () => { console.log (‘b’)}
})
위와 같이 실행시키면 페이지 B에서도 A의 코드가 실행됩니다.
해결방법이 있다면 좋겠네요ㅠㅠ 답변 기다리겠습니다.
해당 프로젝트는 vue 프로젝트로 a > b 페이지 이동해도 내부 돔만 바뀌는 SPA 프로젝트입니다
a > b 페이지 이동 후 새로고침하면 kakao.init이 다시 호출되면서 정상작동합니다만 가능하다면 이러한 해결책은 사용하고싶지 않습니다…ㅠㅠ
답변 기다리겠습니다!
안녕하세요.
확인을 위해 앱 ID 부탁드립니다.
앱ID
https://developers.kakao.com/ 의 내 애플리케이션>앱 설정>요약 정보 : 기본정보에 있는 앱 ID
숫자로된 ID 입니다
ex) 123456
확인 감사합니다. 앱 ID는 696731 입니다.
(1) CORS에러는 다른 도메인 호출 시, 브라우저에서 차단하는 개념입니다.
(2) 하지만, kauth의 토큰 발급 요청은 cors가 열려있어서 front에서 호출 가능합니다.
캡쳐해주신 CORS에러는 개발하신 환경에 종속적인 상황으로 추측됩니다.
(3) Kakao.Auth.login 팝업방식로그인으로 로그인하면 토큰발급까지 진행되어 토큰 요청을 할필요없습니다.
(4) 페이지 B에서도 A의 코드가 실행되는 것은 컴포넌트 종속적이지 않고 전역에 스크립트가 있기때문인것으로 추측됩니다.
카카오톡 공유하기 예제지만, index에 스크립트 선언과 init가 있고 Kakao.Auth.login는 로그인이 필요한 페이지에 있으면 될 것 같습니다.
어떤 상황인지 정확히 추측하기 어려운데요. 접근할수 있는 URL알려주시겠어요?
접근 가능한 url은 외부접근이 막혀있진 않지만 아직 오픈전인 프로젝트라 내부 컨펌 후에 드릴 수 있을 것 같습니다.
상황을 설명해보자면 카카오 로그인을 사용하는 페이지는
토큰 받아 백엔드 세션에 저장, 회원정보 조회하는 api 호출
토큰을 받아 백엔드에 전달, 저장된 토큰의 회원정보와의 일치여부를 조회하는 api를 호출
위와 같습니다.
(* 헤드리스 프로젝트라 백엔드, 프론트엔드는 api로만 통신합니다.)
Kakao.init 후에 처음 호출된 페이지의 Kakao.auth.login의 파라미터가 계속 유지되는데, 예시 케이스는 아래와 같습니다.
CASE1
홈페이지 접근
카카오 소셜로그인 (토큰 받은 후 회원정보조회 API 호출됨. 정상작동)
마이페이지 접근
마이페이지 회원정보관리페이지 접근 (로그인재확인 페이지로 리다이렉트)
카카오 소셜로그인 (토큰 받은 후 회원정보 비교 API 호출되어야하나 회원 정보조회 API 호출됨. 아래의 소스엔 console.log도 찍히지 않음)
CASE2
위에 말씀해주신대로 index (현 프로젝트에서는 App.vue)에 스크립트선언과 init이 있고, Kakao.Auth.login은 로그인이 필요한 두 페이지에 있습니다.
혹시 Kakao.init을 통해 초기화를 마친 Kakao 객체를 새로고침 없이 수동으로 다시 init 가능하도록 만들 방법이 있을까요?
현재는 App.vue에서 처음 Kakao.init을 한 뒤,
Kakao.auth.login이 사용되는 페이지에서
// Kakao.init이 안된경우
if (!Kakao.isInitialized()) {
Kakao.init(env('MM_API_KAKAO_JAVASCRIPT_KEY'));
}
Kakao.Auth.login({ success: 해당 페이지에 필요한 callback})
이런 방식으로 사용하지만
// kakao.init이 되어있는 경우
if (Kakao.isInitialized()) {
(다시 Kakao.init이 가능하도록 하는 코드)
}
Kakao.init(env('MM_API_KAKAO_JAVASCRIPT_KEY'));
Kakao.Auth.login({ success: 해당 페이지에 필요한 callback})
이렇게 해결할 수 있는 방법이 혹시 있을까요?
음… 백엔드가 있으시군요.
front에서 액세스토큰을 받아 백엔드로 넘기는 것은 좋은 방법 같지 않습니다.
아래 node.js 예제 참고하셔서
프론트에서 백엔드로는 정보 요청만하고 백엔드에서 세션 및 토큰관리 카카오와 인터랙션까지 모두 일임하는 방식으로 사용해보시는것은 어떨까요?
확인결과 접근 url은 아무래도 현재 내부 개발중인 프로젝트라 공개가 어려울 것 같습니다.
그리고 예제로 보여주신 방법은 프론트로직과 백엔드로직이 한 프로젝트 내에 있지 않아 적용하는 데에 어려움이 있을 듯 합니다.
현재 프론트와 백엔드가 독립적으로 나눠져 있는 상태(별개의 도메인입니다) 라 말씀드린대로 http 통신(API 통신)으로만 데이터를 주고받을 수 있습니다.
kakao.auth.authorize를 사용한다면 리다이렉트 되는곳은 https://프론트도메인.com/redirect 가 될 것이고,
kakao.auth.login을 사용한다면 https://프론트도메인.com/login에서 토큰을 받아 https://백엔드도메인.com/로그인처리 (POST) 에 요청을 할 것입니다.
지금상황으로는
이렇게 두가지 방법으로 해결이 가능할 듯 합니다.
혹시 다른방법이 있으시거나 위의 방법으로 해결할 수 있는 방법이 있으신지요…!
답변 기다리겠습니다. 감사합니다.
안녕하세요.
예제로 보여주신 방법은 프론트로직과 백엔드로직이 한 프로젝트 내에 있지 않아 적용하는 데에 어려움이 있을 듯 합니다.
해당 예제는 front와 backend분리 환경(별개도메인) 예제인데요. 아래 관점으로 제공한 것입니다. 참고 부탁드립니다.
(1) 앱키 및 액세스토큰 보안을 위한 backend관리
(2) 인가요청 리다이렉트를 backend에서 처리하여 간결한 front개발
(3) front에서 backend호출 시, CORS 설정
- 새로고침 없이 Kakao.auth.login의 파라미터를 새로 넘길 수 있는 방법을 찾아 해결
- 로직이 좀 변경되지만 Kakao.auth.authorize를 사용하여 해결. 이경우 kauth.kakao.com/oauth/token의 cors 해결필요
액세스토큰을 백엔드에 파라메터로 넘기는것은 보안상 추천하지 않기때문에
Kakao.auth.login보다는 Kakao.auth.authorize를 사용하시고 리다이렉트URI를 프론트 URL이 아닌 백엔드URL로 설정하셔서
토큰 발급을 백엔드에서 진행하시면 CORS문제 회피 하실 수 있을 것 같습니다.
(참고로, 프론트에서 토큰 발급도 가능하지만 CORS발생하는 것은 개발하신 코드문제로 보입니다.)