문의 시, 사용하시는 개발환경과 디벨로퍼스 앱ID를 알려주세요.
ID 933237
개발환경 스프링 부트 IONIC CAPACITOR VUE환경입니다.
문제는 저의가 앱에서 인앱브라우져로 띄워서 HTML에서
location.href = “카카오계정”+key; 보낸후
콜백받을때가 문제인데… 동의를 받고 등록한 redirect_uri 으로 와서 저의쪽 HTML 화면이 열려요
토큰 이랑 프로필정보 받아온담에 인앱브라우져를 닫고싶은데 window.close()도안먹고
location.href = “kakaotalk://inappbrowser/close”; 이것을하니 앱전체가 닫히네요 setTiem아웃도해보고 다해봣는데도안됩니다 해결방안이있으까요?
카카오 로그인은 OAuth2 방식 로그인이므로 http(s) 리다이렉트로 파라메터 설정하신 페이지 이동이 일어납니다.
문제는 저의가 앱에서 인앱브라우져로 띄워서 HTML에서
location.href = “카카오계정”+key; 보낸후
앱내 인앱브라우저로 인가요청하시고
동의를 받고 등록한 redirect_uri 으로 와서 저의쪽 HTML 화면이 열려요
정상적으로 되돌아간 것으로 보이는데요.
location.href = “kakaotalk://inappbrowser/close”; 이것을하니 앱전체가 닫히네요
개발하신 앱내 인앱브라우저를 닫는데 왜 톡 커스텀 스킴을 호출하신걸까요?
앱전체가 닫힌건 크래시 발생하서 종료된것 아닐까요?
설정하신 리다이렉트 URI 에서 전달받은 인가 코드로 액세스 토큰 발급과 사용자 정보조회 API 호출하시면될 듯한데…
리다이렉트 URI 도착 이후 처리에 대해 어떻게 하시려는 것인지 이해하지 못했어요.
조금더 구체적으로 설명해주시겠어요?
답변 감사합니다.
capacitor 5버전에서는 인앱브라우져를 프론트쪽에서 닫을수가없어서…
callback받는html페이지에서 토큰 발급과 사용자 정보조회 한후에 저의쪽 서버 세션에 저장한담에 다시 프론트쪽에서 호출에서 사용하려고합니다.
그러나 콜백받는 html 에서 인앱브라우져가 안닫히는걸 닫히게 하고싶은거에요;
location.href = “kakaotalk://inappbrowser/close”; 말고 어떻게 해야할까요?
우선 사용하신 방법은 개발하신 앱내 인앱브라우저를 닫는 것과는 무관할 것같습니다. (카카오톡앱내 인앱브라우저 닫는 스킴같네요?)
그리고 개발하신 환경내 인앱브라우저 닫는 것은 카카오와 무관하여 관련 개발환경 제공회사에 문의해보시면 좋을 것같아요.
front에서 닫을 방법이 없다면, 인앱브라우저에서 처리할 것 모두 하시고 특정페이지 리다이렉트 시키고
앱에서는 그 특정페이지 도착 시, 닫으면 될듯하나
제가 해당 개발환경을 몰라서 구체적으로 안내드리기는 어려울것같습니다.
카카오로그인시 인앱에서 요청하는 html소스는
<html lang="ko">
<head>
<script type="text/javascript">
var host = "[[ ${@environment.getProperty('server.api.host')}]]";
var client_id = "[[ ${@environment.getProperty('kakao_id_login.client_id')}]]";
var redirect_uri = host + "/api/member/kakaoCallback";
var key ="[[${param.key}]]";
location.href = "https://kauth.kakao.com/oauth/authorize?client_id="+client_id+"&redirect_uri="+redirect_uri+"&response_type=code&state="+key;
</script>
</head>
<body>
</body>
</html>
이거구요
콜백받는 html은
<html lang="ko">
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var code = "[[ ${param.code } ]]";
var key = "[[ ${param.state } ]]";
var host = "[[ ${@environment.getProperty('server.api.host')}]]";
var redirect_uri = host + "/templates/oauth/kakao/callback";
var obj = {
resultCode : -1,
data : new Object()
};
if(code){
var access_token = "";
$.ajax({
url : "/api/member/getKaKaoToken",
contentType: 'application/json',
type : "POST",
data : JSON.stringify({
redirect_uri : redirect_uri,
code : code
}),
dataType : "json",
cache : false,
async: false
}).done(function(data) {
console.log(data)
access_token = data.data.access_token;
});
$.ajax({
url : "/api/member/getKaKaoProfile",
contentType: 'application/json',
type : "POST",
data : JSON.stringify({
access_token : access_token
}),
dataType : "json",
cache : false,
async: false
}).done(function(data) {
console.log(data)
var res = data.data;
var sns_data = {
type : 'kakao',
access_token : access_token,
email : '',
name : res.properties.nickname,
nickname : res.properties.nickname,
gender : '',
birthday : '',
uniq_id : String(res.id),
age : ''
};
if(res.properties.nickname){
sns_data.name = res.properties.nickname;
sns_data.nickname = res.properties.nickname;
}
if(res.kakao_account.email)
sns_data.email = res.kakao_account.email;
if(res.kakao_account.birthday)
sns_data.birthday = res.kakao_account.birthday;
if(res.kakao_account.gender)
sns_data.gender = res.kakao_account.gender;
if(res.kakao_account.age_range)
sns_data.age = res.kakao_account.age_range;
obj.resultCode = 1;
obj.data = sns_data;
window.close();
});
window.open('', '_self').close();
}
</script>
</head>
<body>
</body>
</html>
```이거인데 콜백받는 화면에서 window.close가 언먹는단말입니다이거인데 콜백받는 화면에서 window.close가 언먹는단말입니다
개발하신 앱에서 띄운 인앱브라우저가 페이지내 window.close 스크립트 작동하지 않는 것에 대해
말씀하신 것 맞나요?
카카오톡 인앱브라우저가 아니라 개발하신 앱내 인앱브라우저 작동을 말씀하신게 맞는지 확인 부탁드립니다.
개발하신 앱에서 띄운 인앱브라우저가 페이지내 window.close 스크립트 작동하지 않는 것에 대해
말씀하신 것 맞나요? 네 맞아요! 동의만하고 콜백으로와서만 안닫혀요 인앱열고 연화면에서는 window.close
잘닫히거든요
페이지내 리다이렉트가 인앱브라우저 Close에 영향을 준다고 판단하셔서 문의주신거군요.
인앱브라우저 닫는 것은 앱에서 구현하셔야하고,
리다이렉트와 인앱브라우저 Close는 무관할것 같네요.
개발하신 사이트 URL 알려주시면 저도 샘플 앱 만들어서 어떤 상황인지 확인해보겠습니다.
로컬에서 개발중이라 url을드릴수없구요 캐패시터5버전 안드로이드는 인앱 브라우저에서 닫는게 안댄다고 인터페이스 문서에 정의대있어요 그래서 제가 닫는방법은 window.close로닫아야해요 ㅠ
위에서 말씀드린 것처럼 해당 문의사항은 카카오와 무관한내용입니다.
리다이렉트해서 인앱브라우저가 안닫히는게 아니라 앱내 인앱브라우저 생성 패턴에 따라 window.close작동안되는 것으로 추정됩니다.
해당 개발환경 종속적인 문제는 안내 어려운 부분 양해 부탁드립니다.
말씀하긴게 말이안대는게 인앱브라우져로
첫번째 html 에서 이거 요청하기전에 window.close 하면닫혀요
아래 소스실행대면
location.href = “카카오계정”+key;
저의앱에 브라우져떠있는것 맞으나 카카오쪽인앱 브라우져에서 동의버튼을 누르는거같아요 그리고 콜백왔을대도 카카오인앱으로 오기때문에 안닫히는걸로 생각됩니다.
1개의 좋아요
네, 제가 재현할 수 없으니 로그인 과정 영상 첨부 부탁드려요.
(첨부가 잘 안되시면 압축하셔서 파일로 첨부해주세요.)
그 아이콘은 카카오톡 파비콘이 아닙니다. 도메인 파비콘이 없을때 인앱브라우저에서 도메인 첫글자 따서 표시하는걸로 보이네요. 파비콘이 없을때 도메인 첫글자를 표시하고, 캡쳐해주신 화면의 노란 k는 kauth.kakao.com의 파비콘입니다. 웹페이지의 파비콘을 표시한 것일 뿐 카카오톡 인앱브라우저가 아닙니다.
카카오톡 인앱브라우저는 이렇게 생겼습니다.
넵! 알겠습니다 다시 다른방법으로 구현해볼께요
Scripts may close only the windows that were opened by them. 결론이네요
크롬에서는 자기가 연창이아니면 닫을수가없다네요 ㅜㅜ
콜백은 받은페이지가 제가 연창이아니어어서 안닫히는거같네요
1개의 좋아요
그렇군요. 리다이렉트 한 경우도 본인이 오픈한 창이 아니라고 보는군요.
보통 앱내 웹뷰에서 카카오 로그인 시 웹뷰로 서비스를 계속하는 경우가 많은데,
로그인만 웹뷰로 하고 네이티브앱으로 다시 돌아가는 경우라 개발하시는 flow가 일반적인 상황 같지는 않아요.
네이티브앱은 보통 카카오 네이티브 SDK를 사용해서 웹뷰를 따로 사용자가 띄우지 않는데 개발하시는 CAPACITOR환경용 SDK는 따로 없어서 더 도움드리기가 어렵네요.
front에서 닫을 방법이 없다면, 인앱브라우저에서 처리할 것 모두 하시고 특정페이지 리다이렉트 시키고
앱에서는 그 특정페이지 도착 시, 닫으면 될듯하나
위에서 설명드린 것처럼…
CAPACITOR환경에서 웹뷰 페이지 URL 변경을 감지할 수 있는 함수는 제공하지 않나요?
예를들어 안드로이드의 shouldOverrideUrlLoading같은 함수가 있다면
window.close로 스크립트에서 닫지말고 리다이렉트 URI에서 처리 다하시고 특정 종료 페이지 URL로 리다이렉트 처리하고
CAPACITOR환경에서 종료페이지 URL 감지되면 웹뷰를 닫는 형태로 해도 좋을 것 같아요.
Capacitor 5버전은 ios랄 web만인앱브라우져닫는게 대고 안드로이드는 안댄다고 적혀있어요. 감사합니다