vue프로젝트로 카카오 로그인 구현중인데,
현재 앱스토어에 올라가있는 앱이라면 클라이언트단에서 redirect uri는 어떤 형태로 지정되어야 하나요?
예를 들어 app/page/main 이란 path를 가진 경로가 있을때
http://localhost:8080/app/page/main 과 같이 지정해줘야 하나요?
혹은 앱스킴 추가후에 유니버셜 링크를 호출할 수 있게끔
어플명:// 과 같은 형식으로 지정되어야 하는지요!
ex)
var params = {
redirect_uri: http://localhost:8080/app/page/main
}
window.Kakao.Auth.authorize(params)
안녕하세요.
redirect_uri는 인가코드를 받아 처리하는 서비스측 URI가 설정되어야 합니다.
네 안녕하세요! 서비스 uri라면 앱스토어에 등록된 iPhone 마켓 URL로 지정하면 되는걸까요?
서비스측 URI은 백앤드 서버를 말하는데요
인가코드로 접근토큰을 발급받고 사용자 정보를 조회하기 위해 개발하신 URI를 말합니다.
설명주신 부분이 헷갈려서 추가로 문의드립니다…ㅠㅠ
인가코드를 받아 접근토큰을 발급하는 과정도 앱단에서 처리하고 있는데요…
redirect 되는 uri가 앱이 되어야 할것 같은데
해당 상황에선 어떤식으로 redirect uri 를 지정하면 될까요?
vue로 작성하셨다면, 사용자가 보고 있는 페이지에서 javascript 로 구현하셨다는 건가요?
팝업 로그인을 사용하신건가요?
팝업이 아닌 리다이렉션 방식으로 진행중입니다!
리다이렉션 방식으로 진행 중이시라면 reddirec_uri에 이미 서버측 주소가 있을 텐데요
그냥 그대로 사용하시면 됩니다.
리다이렉션 방식으로 구현 및 Kakao.Auth.authorize 를 사용하셨다면
JavaScript SDK가 카카오톡으로 로그인 요청을 하고 로그인이 끝나면 앱으로 전환시켜 줍니다.
말씀주신 Kakao.Auth.authorize 를 사용했고
JavaScript SDK가 카카오톡으로 로그인 요청을 하고 로그인이 끝난뒤 앱으로 전환시켜 주지 못하고
직접 이동해야만 합니다…
카카오 로그인 시, 사용자가 카카오측 화면에서 로그인 과정이 끝나면 최종적으로 카카오가 인가코드를 서비스 측으로 전달할 주소가 필요합니다.
이 주소는 로그인 시 설정하게되는 redirect_uri이고 로그인 과정이 끝나면 이 주소로 인가코드를 포함하여 리더렉션 시킵니다.
서비스 측에서는 전달 받은 인가코드로 접근토큰의 발급과 사용자 정보조회를 하게 됩니다.
이 처리는 반드시 백앤드 서버에서 처리하셔야 합니다.
클라이언트 화면에서 Javascript를 통해 처리하실 수 없습니다.
제가 이전 답글을 이상하게 달았었네요…!
질문의 요지는 JavaScript SDK가 카카오톡으로 로그인 요청을 하고 로그인이 끝난뒤 앱으로 전환시켜 주지 못하고
직접 이동해야만 한다는 것이었습니다
확인을 위해 앱 ID 부탁드립니다.
앱ID
https://developers.kakao.com/ 의 내 애플리케이션>앱 설정>요약 정보 : 기본정보에 있는 앱 ID
숫자로된 ID 입니다
ex) 123456
풀다 (742356) 입니다.
긴시간 번거롭게 해드려 죄송합니다.
확인 후 답변주세요!
redirect_uri 에 넣을 주소에 대해 오해가 있으신것 같습니다.
여기에는 앱 전환을 위한 유니버셜링크나 앱스킴이 들어가지 않습니다.
redirect_uri에는 풀다에서 만든 웹서비스 주소가 들어가야 합니다.
그리고 그 주소는 해당 주소로 전달되는 인가코드를 받아 접근토큰 발급 및 회원정보조회, 회원 가입 등의 처리를 할 수 있어야 합니다.
구현 하셔야 하는건 인가코드를 받아 처리 할 수 있는 웹서비스 입니다
vue와 같은 사용자 브라우저에서 동작하는 스크립트로는 이 것을 구현하실 수 없습니다.
로그인 과정에 대한 좀 더 자세한 내용은 아래 문서에서 확인하실 수 있습니다.