칠성몰 안드로이드 크롬에서 카카오 연동 시 다음과 같은 결과가 리턴됩니다.
요청 URL :
https://kauth.kakao.com/apiweb/code.json?auth_tran_id=jnso5gzuhfh5lo4mh6a5j&client_id=39fff1b4195fbd72bc1870674391ad9c&ka=sdk/1.43.0+os/javascript+sdk_type/javascript+lang/ko-KR+device/Linux_aarch64+origin/https%3A%2F%2Fmsecure-tst.lottechilsung.co.kr
결과 :
접근해서 테스트 할 수 없어서 정확한 안내는 어렵지만…
로그를보니 JS SDK 팝업 방식 카카오 로그인을 사용하시는 것 같네요.
(1) 테스트 영상 zip파일로 압축해서 첨부 부탁드려요.
(2) 테스트하신 기기에 카카오톡앱이 설치되어있고 로그인까지 되어있는 상태인지 확인해주세요.
→ 카카오톡이 설치만되어 있고 로그인 안되어있는지 확인 필요
(3) 테스트하신 기기, 테스트하신 브라우저에서 아래 주소 접근하셔서
"JavaScript SDK 로그인(PopUp) " 탭 선택 후, 카카오 로그인 정상 작동하는지 확인 부탁드려요.
(4) 카카오 로그인 관련 구현하신 코드블럭 기재 부탁드려요.
API 테스트 시 첨부파일과 같이 나옵니다.
"JavaScript SDK 로그인(PopUp) " 탭 선택을 안하신것 같아요. 확인 부탁드리고.
나머지 항목들도 확인해주시면 어떤 상황인지 검토해보겠습니다.
감사합니다.
(1) 테스트 영상 zip파일로 압축해서 첨부 부탁드려요.
(2) 테스트하신 기기에 카카오톡앱이 설치되어있고 로그인까지 되어있는 상태인지 확인해주세요.
→ 카카오톡이 설치만되어 있고 로그인 안되어있는지 확인 필요
(4) 카카오 로그인 관련 구현하신 코드블럭 기재 부탁드려요.
이렇게 나옵니다.
function loginWithKakao(){
// #19346 [개발]칠성몰 카카오로그인 불가 내용 수정 요청
//window.location.href = '<lecs:urlPrefix sub="secure-mobile"/>member/kakao/callback.lecs?returnurl='+encodeURIComponent(makeUrl($('#returnurl').val()));
var f = document.frmLoginMem;
Kakao.init('<%=kakaoKeyId%>');
Kakao.Auth.login({
success: function(authObj){
/*
alert('call 1 : '+JSON.stringify(authObj));
console.log('call authObj 1 : '+JSON.stringify(authObj));
console.log('call authObj 2 : '+JSON.stringify(authObj.access_token));
console.log('call authObj 3 : '+JSON.stringify(authObj.refresh_token));
*/
var accessToken = authObj.access_token;
<%-- 통합회원제 일반로그인 API 호출 --%>
sso.callLogin({
akUrl: '/exBiz/login/sociLogin_01_001',
akDta: {
copAccDc: '07', // 제휴계정구분코드 01: 페이스북 , 02 : 네이버 , 07 : 카카오
copTkn: accessToken // 제휴토큰
},
aftPcMd: '0', // 후처리모드
rturUrl: window.location.href,
rturUrlCaloMethd: 'POST',
callback : function(rspDta) {
var f = document.frmLoginMem;
/*
alert('rspDta 1 : '+JSON.stringify(rspDta));
console.log('rspDta 1 : '+JSON.stringify(rspDta));
*/
if ('00' == rspDta.rspC) {
$('#sso_rnw_tkn').val(rspDta.rnwTkn);
$('#sso_aces_tkn').val(rspDta.acesTkn);
$('#sso_tkn').val(rspDta.ssoTkn); <%-- SSO토큰 - [#7197] [개발] LECS 스토어 > 롯데온 연동 (2.0) --%>
f.returnurl.value = makeUrl($('#returnurl').val());
f.action = '<lecs:urlPrefix sub="secure-mobile"/>mobile/member/SSOLoginOK.lecs';
f.submit();
}else{
f.action = '<lecs:urlPrefix sub="secure-mobile"/>mobile/member/SSOLoginfail.lecs';
f.submit();
}
}
});
},
fail: function(err){
if(typeof(err.error) == 'string' && err.error.toLowerCase() == 'access_denied'){
}else if(typeof(err.error) == 'string' && err.error.toLowerCase() == 'window_closed'){
alert("취소하셨습니다."+ err.error.toLowerCase());
} else {
alert("현재 시스템 문제로 인해 서비스가 제한되고 있습니다. 빠른 정상화를 위해 노력 하겠습니다. 서비스 이용에 불편을 드려 죄송합니다." + err.error.toLowerCase());
}
},
always: function() {
}
});
}카카오톡이 설치되어 있고 로그인 되어있는 상태입니다.
영상은 AOS 모델이라 직접 캡쳐 가능한 앱이 없어 어렵네여.
네, 확인 감사합니다.
(1) 테스트 영상 zip파일로 압축해서 첨부 부탁드려요.
→ 안드로이드 상단 기본 메뉴에 “화면녹화” 기능이 있는데 확인해보시겠어요?
(2) 테스트하신 기기에 카카오톡앱이 설치되어있고 로그인까지 되어있는 상태인지 확인해주세요.
→ 네, 카카오톡 설치만 되어 있고 로그인 안한경우 폴링 성공응답을 받지 못하고 계속 폴링하는 현상이 있는데요. 이케이스는 아닌 것 같네요.
(3) 테스트하신 기기, 테스트하신 브라우저에서 아래 주소 접근하셔서
"JavaScript SDK 로그인(PopUp) " 탭 선택 후, 카카오 로그인 정상 작동하는지 확인 부탁드려요.
→ 캡쳐해주신 화면은 팝업 방식 카카오 로그인이 정상 작동한 것으로 해당 기기는 문제가 없는 상태입니다.
즉, 개발하신 시스템 종속적문제라 판단됩니다.
(4) 카카오 로그인 관련 구현하신 코드블럭 기재 부탁드려요.
아래 init는 함수 안에서 처리하지않고, 페이지 최상단 카카오 JS SDK import구문 근처에서 한번만 init처리해주세요.
이미 init했는데 또 init하면 두번째부터는 에러 발생합니다.
Kakao.init('<%=kakaoKeyId%>');
기재하신 코드에서 init위치 변경하고 아래와 같이 카카오 로그인만 가지고 테스트해보니 정상작동합니다.
Kakao.Auth.login의 success 구문 내 , <%-- 통합회원제 일반로그인 API 호출 --%> 이하 로직 제거하시고 accessToken값만 alert로 정상 처리되는지 확인해보시면 좋을 것같습니다.
function loginWithKakao548606(){
var f = document.frmLoginMem;
Kakao.Auth.login({
success: function(authObj){
var accessToken = authObj.access_token;
alert(accessToken);
},
fail: function(err){
if(typeof(err.error) == 'string' && err.error.toLowerCase() == 'access_denied'){
}else if(typeof(err.error) == 'string' && err.error.toLowerCase() == 'window_closed'){
alert("취소하셨습니다."+ err.error.toLowerCase());
} else {
alert("현재 시스템 문제로 인해 서비스가 제한되고 있습니다. 빠른 정상화를 위해 노력 하겠습니다. 서비스 이용에 불편을 드려 죄송합니다." + err.error.toLowerCase());
}
},
always: function() {
}
});
}
의심되는 상황은
카카오 JS SDK가 로그인 시점 동적으로 생성한 html내 특정 Dom구조가 있는데
이는 카카오 계정 페이지와 교신하는 역할을 합니다.
개발하신 시스템에서 이 html내 객체를 훼손한것으로 추정되나 실제로 작동 테스트를 하지 않는한 정확한 판단은 어려워보이네요.
또 init하면 두번째부터는 에러 발생한다고 하셨는데 어떻게 발생하나여?
아이폰에서는 전혀 문제가 없고 AOS 모델에서만 이슈가 있습니다.
이 부분을 아래처럼 수정 부탁드립니다.
if(!Kakao.isInitialized()) {
Kakao.init("your code");
}
초기화는 페이지에서 단한번만 수행되어야 합니다.
재 수행시 Kakao.init: Already initialized 오류가 발생합니다.
때문에, 버튼 이벤트와 연결된 함수에서 초기화가 이루어 진다면 여러번 클릭하는 경우 오류가 발생할수 있기에 위와 같은 코드가 필요합니다.
페이지 최상단이 아니라 function loginWithKakao548606() 에서
if(!Kakao.isInitialized()) {
Kakao.init(“your code”);
}
해도 된다는 거 아닌가여?
영상 첨부합니다.
Screen_Recording_20221114_190946.zip (7.3 MB)
또 init하면 두번째부터는 에러 발생한다고 하셨는데 어떻게 발생하나여?
만약 중복 init에러가 발생한다면, 아래와 같은 메시지가 출력됩니다.
{
"name": "KakaoError",
"message": "Kakao.init: Already initialized"
}
아이폰에서는 전혀 문제가 없고 AOS 모델에서만 이슈가 있습니다.
네. 코드상에 예상되는 문제점만 확인해드렸구요.
재현테스트를 해볼 수 없어서. 정확한 안내가 어려운점 양해부탁드립니다.
위에 안내드린 것처럼. 칠성몰 내부 로직에서 JS SDK 팝업방식 로그인에서 생성한 객체를 훼손하는게 아닌가 의심되는데요.
팝업 방식 로그인이 아니라
JS SDK authorize방식을 사용해보시는 것도 좋을 것같습니다.
안드로이드 크롬에서 문제상황이라 하시지 않으셨나요? ;;
영상첨부해주신 흰화면은 앱내 인앱브라우저 팝업처리가 제대로안된 현상으로 보입니다.
앱 내부에 구현이 필요하다는 얘기 아닌가여?
네 맞습니다.
인앱브라우저에서 카카오 로그인 팝업 호출 시, 새로운 팝업 인앱브라우저를띄우고
카카오 로그인 및 동의창 동의 후, 팝업을 닫고 부모창으로 돌아가는데요.
팝업 닫고 돌아갈 브라우저가 없어서 생기는 현상입니다.
아래내용 참고하셔서 구현해주시거나
변경이 어려우신경우, JS SDK authorize방식으로 웹페이지를 변경해주시면 됩니다.
모바일 크롬에서는 잘되는데 상관없나여?
위에 답변주신내용은 버튼 이벤트와 팝업이벤트를 동기화해야 팝업차단이 일어나지 않는다는 안내로
백화현상과 무관합니다.
백화현상은 앱에 팝업 처리 구현문제입니다.
참고부탁드려요.
네, 브라우저에서는 팝업처리를 알아서해주니 오류 발생하지 않습니다.
앱내 인앱브라우저에서 팝업구현문제입니다.