모바일 웹에서 로그인시 앱 열리지 않게 문의드립니다

JavaScript
#1

현재 사이트 로그인에 카카오 로그인이 추가되어있습니다.
PC에서는 브라우저에서 새창이 열리면서 카카오 로그인 이후 완료처리 되는데,
모바일에서는 앱이 열려서 인증 하고 난 후에 응답을 받지못해 진행이 되지 않습니다.

브라우저에서 앱으로 넘어가면서 생기는 문제인것 같은데, 웹 새창으로만 작업이 가능한가요?
아니면 앱에서 인증 후 응답을 받는 순서가 더 있는건가요?

안내에 있는 throughTalk: false 처리 해도 똑같이 앱이 열렸습니다.

#2

기재해주신 내용으로 어떤상황인지 확인 하기 어려운데요.
개발하신 시스템 문제일 듯한데… 아래 데모에서도 동일하게 안되는지 확인 부탁드려요.

Kakao Developers

#3

해당 데모는 잘 됩니다.

현재 사이트 상황은 따로 카카오 로그인 버튼이 있고
해당 버튼을 누르면 새 팝업이 열리면서 팝업 페이지 load 후 code 확인해서
없으면 window.Kakao.init, window.Kakao.Auth.authorize 함수를 호출하고
있으면 kauth.kakao.com/oauth/token으로 post 요청을 보내서 토큰을 받는 방식으로 되어있습니다.

혹시 방법을 알 수 있을까 싶어서 스크립트 첨부합니다.

/* https://사이트주소/oauth/kakao.html */
<script>
	function getAuthorizationCode() {
		const query = location.search
		const params = new URLSearchParams(query)
		return params.get('code')
	}

	const code = getAuthorizationCode()

	if (!code) {
		window.Kakao.init('스크립트 키')
		window.Kakao.Auth.authorize({
			redirectUri: 'https://사이트주소/oauth/kakao.html',
			scope: 'openid',
		})
	} else {
		const res = axios.post(
			'https://kauth.kakao.com/oauth/token',
			null,
			{
				headers: {
					'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
				},
				params: {
					grant_type: 'authorization_code',
					client_id: '클라이언트id',
					redirect_uri: 'https://사이트주소/oauth/kakao.html',
					code: code,
					client_secret: '시크릿키',
				},
			}
		)
			.then((res) => {
				window.opener.handleKakaoCredentialResponse(res.data)
				window.close()
			})
	}
</script>
#4

앱ID와 재현 가능한 사이트 URL 알려주시겠어요?

#5

832035

https://meta.ktcc.or.kr
입니다.

#6

확인해보니 Android, Chrome에서 팝업을 띄우고 명시적인 사용자 액션없이 스크립트를 실행하여 다이나믹링크 호출 시,
앱 실행과 함께 팝업이 닫히는 현상이 있습니다.

throughTalk: false 처리 해도 똑같이 앱이 열렸습니다.

이부분은 잘못 테스트 하신 것으로 보입니다. 재현되지 않았습니다.
아래 방법으로 해결하시는 것을 추천드립니다.

(1) throughTalk: false 로 사용하시거나
(2) REST-API방식으로 카카오 로그인 하시거나
(3) 팝업에서 사용자 액션에 의해 authorize호출하시거나
(4) 팝업이 아닌 페이지내 리다이렉트

카카오 로그인과 무관하게
페이스북이나 인스타그램과 같은 앱의 인앱브라우저에서는 팝업이 정상 처리되지 않는 증상이 있어 다양한 사용자의 접근을 위해
팝업처리를 하지 않는 것을 권장드립니다.

이와 별개로 iphone에서는 개발하신 사이트가 정상작동하지 않는 것을 확인하였습니다. 참고 부탁드려요.

#7

상황상 로직을 수정할수는 없어서 throughTalk: false 방식으로 다시 테스트해서 확인했습니다.
답변 감사드립니다.

1개의 좋아요