Webview에서 rest api로 카카오 로그인을 구현하는데 로그인 하려고 하면 카카오 아이디 /패스워드 입력 화면이 나오네요

REST API
#1

hybrid app을 서비스 하기 위해 rest api로 카카오 로그인을 구현했습니다.
webview를 통해 카카오 로그인을 하려고 하면 카카오의 아이디와 비밀번호를 입력하라는 화면이 뜹니다.
그런데 같은 핸드폰에서 브라우져로 띄워서 같은 URL을 실행해보면 카카오의 아이디/비밀번호를 입력하라는 화면이 뜨지 않고 현재 로그인되어 있는 카카오 유저 정보를 잘 가져 옵니다.
카카오 로그인을 webview에서 실행시키기 위해 뭔가 더 해줘야 할 것이 있나요?

#2

안녕하세요.

웹뷰에서 쿠키 저장을 하고 있으실까요?

#3

쿠키라고 하시면 어떤 것을 말씀하시나요?
access_token을 말씀하시나요?

#4

웹뷰 브라우저 쿠키 입니다.

#5

예 웹뷰에서 쿠키를 사용하고 있습니다. 웹뷰에서 브라우저 쿠키를 사용하면 안되는지요?
웹뷰도 기본적으로 웹 서비스라 쿠키를 사용하지 않을 수 없습니다.
그런데… 물어보시는 것이 어쩐지 제가 번짓수를 잘 못 찾고 답하고 있는 것 아닌지 모르겠네요^^
카카오 로그인시 브라우져 쿠키를 사용하면 안되는가요?

#6

죄송합니다.
제가 이해를 잘못하고 답변 드린것 같습니다.

ID / PW 를 계속 입력하라고 하는 화면은 로그인 버튼을 누를 때 마다 발생하시나요?
아니면, 앱을 껏다 켰을 때 발생하시나요?

그리고 로그인 버튼은 어떻게 구현하셨을까요?
JavaScript SDK를 사용하실까요? 아니면 자체적으로 /oauth/authorize로 보내실까요?

#7

아래와 같이 rest api로 구현하고 있습니다.
주위에 다른 사람도 하이브리드 앱에서 접속하면 계속 아이디/패스워드 입력 창이 뜹니다. 그 사람도 카카오 내에서 링크를 클릭해서 해당 URL을 열면
거기서는 아이디/패스워드 창이 안 뜨고 잘 들어갑니다.

var btnKakaoLogin = document.getElementById(“btnKakaoLogin”);
btnKakaoLogin.addEventListener(‘click’, async function () {
kakaoLogin()
});

const kakao_rest_api_key = ‘82a51b5b24dcba2241a168f83c0f91bc’

function kakaoLogin() {

url = "https://kauth.kakao.com/oauth/authorize?client_id=" + kakao_rest_api_key
url += "&" + "redirect_uri=" + mydirect_url
url += "&response_type=code"

window.location.href = url

}

어느 시점에 아이디/패스워드 창을 띄우는 건지요?
사실 카카오 로그인을 사용하려고 했던 것이 사용자들이 좀 더 쉽게 회원가입을 하라고 한 건데 이런식이면 더욱더 번거로울 것 같네요 ㅠㅠ

혹시 간편가입을 사용해야 하나요? 간편가입은 off 로 셋팅 되어 있습니다.

#8

우선, 격고 있는 증상은 간편가입과는 관련 없습니다.
그리고, 제공해 주신 코드는 별다른 문제는 없어보이십니다.

브라우저에 카카오 계정으로 로그인한 흔적(쿠키인증)이 없기 때문에 계속, ID/PW 입력하는 화면으로 이동하고 계시는데요.

웹뷰 환경에서는 일반 브라우저와 같이 쿠키가 계속 유지되거나 하지 않습니다.
보통 CookieManager를 통해 웹뷰의 쿠키를 계속 유지시키곤 하는데요

앞선 쿠키 저장여부의 문의는 CookieManager를 사용하여 웹뷰의 쿠키를 유지하고 계신지 문의 드린 것인데요 확인 부탁드립니당

#9

답변 감사합니다.

이건과 관련해서 구글링을 해보았습니다.
아래와 같은 URL을 봤는데요. 제가 겪고 있는 증상과 같은 것 같습니다.

image

혹시 하이브리드앱에서는 ‘카카오 로그인폼(아이디/패스워드 입력하는)’ 이 뜨는 것이 스펙은 아닌지요?

#10

하이브리드 앱으로 로그인을 구현하실 때, 방법은 두가지 정도가 있을 것 같습니다.

하나는 카카오에서 제공하는 JavaScript SDK를 사용하지 않고 위에 구현하신 바와 같이 서버측 스크립트와 랜더링으로만 구현하는 방식입니다.
(위에 소스코들 보고 이런 형식으로 개발 하시고 있는 것으로 추정하였습니다.)

다른 하나는 JavaSciprt SDK를 이용하는 방식입니다.
SDK의 Kakao.Auth.authorize()를 사용하면 사용자 기기에 카카오톡이 설치되어 있으면 카카오톡으로 로그인을 시도하고 아니면 웹페이지로 진행하게 됩니다.
이 경우는 다음 문서를 참고하여 웹뷰에 추가적인 코딩이 필요 합니다.

JavaScript | Kakao Developers 문서 - 하이브리드 앱에 적용하기

댓글의 블로그는 두번째 방식에 대한 이야기 이며 문서를 참고하시면 구현하실 수 있습니다.