카카오톡 인앱 브라우저에서

InAppBrowser(카톡/카스 인앱브라우져)
1

안녕하세요.

카카오 로그인을 이용해서 인증 기능을 구현하고 있습니다.
그런데 크롬, 삼성 브라우저, 사파리 등에서는 정상적으로 아래 방법으로 카카오 로그인이 동작하는데
카카오톡의 인앱 브라우저에서는 동작이 안되는거 같습니다.
이게 원래 지원이 안되는것인가요? 아니면 제가 설정을 잘못해서 안되는것일까요?

주 사용 시나리오가
카톡으로 웹사이트 링크를 전송해서 사용자가 링크 터치 후 카카오톡 인앱 브라우저에서 해당 웹사이트에서 카카오 로그인을 시도합니다.

11번가 이런곳에서 카카오 로그인할때는 정상적으로 되는것을 보니 다른 방법이 있거나 설정을 잘못한게 아닐까싶은데 무엇이 문제일까요?

아래의 Kakao.Auth.authorize에서 더이상 진행이 안됩니다.

스크립트 링크 https://developers.kakao.com/sdk/js/kakao.js

Kakao.Auth.authorize({
    redirectUri: ''
});
2

안녕하세요.

확인을 위해 앱 ID 부탁드립니다.

앱ID
https://developers.kakao.com/ 의 내 애플리케이션>앱 설정>대시보드 우측 상단에 있는 앱 ID
숫자로된 ID 입니다
ex) 123456

3

772915 입니다.

4

로그를 보니 redirectUri에 주소를 컴마로 구분해서 같은 주소 두개 붙여 요청 하는 경우가 일단 있네요.

redirectUri를 변수처리하시나요?

관련 로직 확인해보시겠어요?

5

의도적으로 두개를 붙여서 보낸건 아닙니다.

현재 테스트 하는 환경에서는

http://192.168.0.203:8060/login/kakao 로 redirectUri가 지정되서 Kakao.Auth.authorize함수를 호출합니다.
여기선 두개가 붙진않습니다.
내부 아이피라서 혹시나 그런걸까요?

6

넵, 내부 아이피도 괜찮지만,

해당 모바일 기기에서 접근 가능한 주소를 설정해주셔야합니다.

7

내부 아이피긴 한데 접근 안되는건 아닙니다.

테스트용 로컬 서버와 같은 와이파이로 사용하고있습니다.

실제 운영서버에서는 고유의 도메인으로 접근하고있고, 카카오톡 인앱 브라우저에서만 안되지 크롬 브라우저나 다른 브라우저에서는 저 내부 아이피를 이용해서 카카오 로그인이 잘 동작하고 있습니다.(Kakao.Auth.authorize 사용)

8

앞서 말씀하신 것과 같이 다른 서비스들은 정상작동하므로
인앱브라우저와 무관한 문제입니다.

설정하신 리다이렉트 URI에 정상적으로 접근가능한 주소를 설정했는지 관점으로 확인하면 좋을 것 같은데요.

지금 테스트 하시고 호출한 시간 알려주시면 어떻게 요청하셨는지 확인해보겠습니다.

9

09:39 분경에 카카오톡 인앱 브라우저를 통해서 로그인 시도 했습니다.
확인 가능하실까요? 두번 시도했습니다.
실제 운영서버에서 한거라 고유 도메인으로 들어갔을겁니다.

10

로그를 보니

(1) 카카오 로그인 인가코드요청 호출되고
(2) 카카오 계정 로그인 페이지로 리다이렉트 되었습니다.

https://accounts.kakao.com/login?continue={되돌아갈 인가코드요청주소}

혹시, 내부적으로 아이프레임을 사용하시나요?

11

네 아이프레임 사용하고 있습니다.

12

카카오 계정은 보안 상 아이프레임에서 작동되지 않습니다.

아이프레임 사용하지 않는 형태로 적용가능한지 검토 부탁드려요.

13

아이프레임을 사용하지 않는다면…카카오톡 인앱 브라우저에서는 카카오 로그인시…
아이프레임을 걷어내고 현재 페이지가 카카오 로그인처리 하는곳 갔다가 저희 페이지가 새로고침되는 식으로 사용하는 방식 말씀하시는거죠?

14

네, 맞습니다.

(정확히는 새로고침은 아니고) 카카오측에서 리다이렉트 방식으로 되돌아가도록 사용하시면됩니다.

15

네 확인했습니다. 답변감사합니다.

1개의 좋아요