안녕하세요.
카카오 로그인을 이용하여 웹앱을 서비스하고 있습니다. ( https://kaloidea.com/profile )
아래와 같이 사용하고 있습니다.
Auth.authorize(
{
redirectUri: `${window.location.origin}/login/kakaoCode`,
scope: 'profile_nickname,account_email',
}
)
카카오톡 채팅 링크를 통해 접속한 인앱에서 카카오 로그인이 작동하지 않습니다.
Auth.authorize()는 정상 호출이 되어 redirectUri 페이지 이동되고 uri를 보면 code값도 잘 전달 받고 있습니다.
https://kauth.kakao.com/oauth/token 에서 하단 이미지처럼 멈추는 것 같습니다.
혹시 카카오인앱에서 client origin 정보를 변경하는 것이 있을까요??
안녕하세요.
확인을 위해 앱 ID 부탁드립니다.
앱ID
https://developers.kakao.com/ 의 내 애플리케이션>앱 설정>요약 정보 : 기본정보에 있는 앱 ID
숫자로된 ID 입니다
ex) 123456
앱ID는 729115 입니다
감사합니다
(1) https://kaloidea.com/profile 사이트에서 사용하는 디벨로퍼스앱은 729115가 아니라 747433 입니다.
(2) 리다이렉트 URI에서 액세스 토큰 발급 요청 시, KOE320에러가 다수 보입니다. 동일한 인가코드로 액세스 토큰을 재발급 요청할때 발생하는 에러입니다.
(3) 카카오 API는 응답 Body에 상세한 에러 내용을 전달합니다. 이후 문제 발생 시, 개발하신 서버측 로그 확인 부탁드립니다.
감사합니다.
안내주신 바와 다르게 인가 코드 자체를 받지 못하고 있습니다.
아래 Auth.authorize() 함수가 에러를 발생시키고 있으며 에러 객체는 {} 빈 객체가 나오고 있습니다.
if (!window.Kakao.isInitialized()) {
window.Kakao.init(process.env.KAKAO_JS_KEY)
}
window.Kakao.Auth.authorize(
{
redirectUri: `${window.location.origin}/login/kakaoCode`,
scope: 'profile_nickname,account_email',
// prompts: 'none'
}
)
참고로 ios 카카오 인앱에서만 발생하고 있습니다.
안녕하세요. 톡내 인앱브라우저에서 벗어나도록 처리하셔서 톡에서는 확인을 못하였고.
iOS에서 테스트용 웹뷰앱 만들어 기재하신 주소 로딩하고 카카오 로그인 해봤는데요.
로그인 동선 자체에는 문제가 없으나 카카오톡앱으로 인증 여부에 따라 비정상 작동이 확인되네요.
(1) 카카오톡이 설치안된 경우 카카오 계정로그인으로 잘 로그인되는게 확인되었구요.
(2) 톡으로 인증 후, 앱으로 되돌아가면 사이트내 “로그인을 진행중입니다” 화면만 있고 리다이렉트 URI진행이 안되네요. 처음 문의주신 증상과 동일한 증상 같은데요. 카카오측 로그상 인가요청 및 리다이렉트 URI로 이동처리는 정상입니다.
말씀하신 Auth.authorize() 함수가 에러를 발생시키는 증상이 확인안되는데요. 에러객체가 비었다면 에러가 없는 것 아닐까요?
혹시, authorize 에러라 판단하신 다른 기준 있으실까요?
카카오톡 인앱브라우저와 무관하게 인앱브라우저일때
리다이렉트 URI에서 인가코드 처리를 못하는 다른 이유가 있을듯합니다. (혹시나 싶어 페이스북 인앱으로 해보니 동일하네요)
iOS정책 상, 앱to앱으로 이동(카카오톡 앱으로 인증)후 사용자 액션 없이 페이지내 리다이렉트 하는 경우 종종 스크립트 제약사항 있는 것을 본적이 있는데요. 다른 인앱브라우저에서도 동일한 것을 보니 리다이렉트URI내 리다이렉트가 원인으로 의심되기는합니다.
답변주셔서 감사합니다.
해당 상황처럼 설치가 안된 경우는 카카오 이메일로 로그인이 되도록 팝업이 열리는 것으로 알고 있습니다. 혹시 맞을까요?
try - catch문으로 에러를 잡아 에러를 출력했을 때 빈 객체 "{}가 출력됩니다.
따라서 에러라고 판단했습니다.
네. 몇번 인앱에서도 동일한 현상이 발생했습니다. (인스타그램 포함)
그렇다면 현재로써는 ios 인앱브라우저에서 카카오톡 로그인이 확실히 작동한다는 보장은 어려운 것일까요?
해당 상황처럼 설치가 안된 경우는 카카오 이메일로 로그인이 되도록 팝업이 열리는 것으로 알고 있습니다. 혹시 맞을까요?
카카오 계정으로 로그인할 수 있도록 카카오 계정 로그인 페이지로 리다이렉트 되며
별도 팝업처리를 하지 않으셨다면 Kakao.Auth.authorize 함수는 팝업이 아닌 페이지 리다이렉트로 로그인 페이지를 표시합니다.
try - catch문으로 에러를 잡아 에러를 출력했을 때 빈 객체 "{}가 출력됩니다. 따라서 에러라고 판단했습니다.
참고로, Kakao.Auth.authorize 함수는 카카오톡 앱이 설치된 경우 ID/PW입력하지 않고 안전하게 카카오톡 앱으로 인증 하고
Kakao.Auth.authorize 함수 호출한 페이지에서는 /apiweb/code.json으로 주기적 폴링하며 인증 성공 상태를 체크합니다.
따로 에러 처리는 하지 않으니 에러 발생했다면 다른 문제일 듯합니다.
(iOS정책 상 리다이렉트 불가 케이스에 에러 발생하는지는 잘모르겠네요. )
네. 몇번 인앱에서도 동일한 현상이 발생했습니다. (인스타그램 포함)
그렇다면 현재로써는 ios 인앱브라우저에서 카카오톡 로그인이 확실히 작동한다는 보장은 어려운 것일까요?
매우 많은 사이트와 앱에서 카카오 로그인을 이상없이 사용하므로
위에서 설명드린 iOS정책 상 처리 불가케이스인지 점검해보시면 좋을 것같습니다.
리다이렉트 URI에서 전달받은 인가코드를 출력만 하도록 테스트 해보시면 확실할 것같습니다.
참고로, Kakao.Auth.authorize 함수를 사용하는 아래 테스트 사이트나
http://test-tam.pe.kr/kakao.php
(이 사이트는 개인정보를 저장하지 않습니다. 테스트 후, 연결끊기만 해주시면됩니다.)
카카오 디벨로퍼스 데모사이트가 아이폰 카카오톡 인앱브라우저에서 정상 작동하는 것을볼때 개발하신 사이트 종속적 문제로 판단됩니다.
안녕하세요. ios 웹뷰만 발생하는 문제를 제보 드립니다. (카카오로그인은 ios 사파리 브라우저, pc, 안드로이드 등등에서는 잘 작동합니다.)
SSR기반 ios 웹뷰 (flutter + nuxt.js) 환경에서 카카오로그인, 애플 로그인을 기능을 개발했습니다.
애플로그인을 한 후에만 카카오로그인이 작동되는 현상을 제보합니다.
카카오로그인을 하면 SSR의 서버단까지는 code 값은 잘 전달이됩니다. 그 후에 SSR의 client가 작동 자체를 안 하고 있습니다.
대신 애플로그인한 후에 다시 카카오 로그인을 하면 SSR의 client까지 잘 작동합니다.
이 현상이 왜 발생하는지 파악이 어려운데요.
쿠키와 관련이 있을까요? 애플로그인 후에만 카카오로그인이 잘 작동하는 이유를 알 수 있을까요?
안녕하세요.
제작하신 웹뷰에 종속적인 문제일 듯한데요.
어떤 상황인지 판단을 위해
(1) 제작하신 웹뷰에 디벨로퍼스 도구의 데모페이지를 띄워 동일한지 확인해주세요.
(2) 제가 테스트용 웹뷰를 만들어 확인할 수 있도록 웹뷰에서 띄우는 사이트 url을 알려주세요.
답변주셔서 감사합니다
애플로그인 후에는 되는 이유가 왜 그럴까요…
어떤 종속적인 문제인지 파악이 너무 어려워서요
req header도 특별히 다르지 않아서요
인앱 SSR 환경에서 테스트할 수 있는 데모페이지가 혹시 있을까요?
아래 페이지를 띄워서 토큰 발급 해보시겠어요? JS SDK authorize방식 카카오 로그인 진행됩니다.
https://developers.kakao.com/tool/demo/login/login
또는
http://test-tam.pe.kr/kakao.php
알려주신 url iOS 웹뷰 프로젝트 만들어 테스트 해보니 정상작동하지 않네요.
위에 데모는들은 정상 작동하는 것을볼때 구현하신 리다이렉트 URI가 iOS환경에서 정상작동하지 않는 것으로 추정됩니다.
카카오측 로그를 보면 카카오톡으로 정상 인가코드 받았지만 리다이렉트 URI에서 토큰 발급 이력이 없습니다.
혹시, 로그인 과정에 팝업 처리나 리다이렉트 처리 같은것이 있나요?
리다이렉트 URI에서 에러 발생했는지 로그 확인 해보시겠어요?
카카오측 로그를 보면 카카오톡으로 정상 인가코드 받았지만 리다이렉트 URI에서 토큰 발급 이력이 없습니다.
네. code 값이 ssr의 서버까지는 잘 전달이됩니다. 그후에 토큰을 호출하는 로직은 ssr의 클라이언트 부분입니다.
애플로그인을 한 후에는 ssr의 클라언트까지 작동해서 토큰을 정상적으로 호출합니다.
그런데 카카오로그인만 하면 ssr의 서버까지만 이어지고 있습니다.
https://kaloidea.com/login 에서 https://kaloidea.com/login/kakaoCode 로 아래와 같이 authorize()를 이용해서 리다이렉트하고 있습니다.
if (!window.Kakao.isInitialized()) {
window.Kakao.init(process.env.KAKAO_JS_KEY)
}
window.Kakao.Auth.authorize({
redirectUri: `${window.location.origin}/login/kakaoCode`,
scope: 'profile_nickname,account_email'
})
토큰을 호출하는 로직은 ssr의 클라이언트 부분입니다.
이부분 잘 이해가지 않는데요.
액세스토큰은 보안상 서버에서 발급 받도록 안내드리고 있습니다.
보안 권장 사항 Kakao Developers
이와 별개로 토큰 발급을 못하는 부분은 개발하신 클라이언트측 문제라 더이상 문제 파악이 어려운데요.
ssr의 클라이언트 부분에서 왜 토큰 발급 요청 자체를 못하는지 먼저 확인해주셔야할 것같아요.