PC에서는 같은 스크립를 사용해 문제 없는데… 이상하게… 모바일에서 카카오 로그인시 Redirect URI mismatch.가 나오고 로그인이 안되요.
안녕하세요.
Redirect URI mismatch 에러는 인가요청과 토큰요청에 파라메터로 사용한 리다이렉트 URI가 서로 다를때 발생합니다.
확인 부탁드려요.
흠… 문제점은 저도 알거 같은데…
죄송하지만 해결방법이 궁금합니다. 어떻게 해야 할까요?
토큰 요청 시, 정상 처리된 이력들이 보이는데요.
에러 발생한 토큰요청의 리다이렉트 URI는 다음과 같습니다.
https://m.openyourworld.co.kr/Api/Member/Oauth2ClientCallback/kakao/
연관된 인가 요청의 리다이렉트 URI는 다음과 같습니다.
https://openyourworld.co.kr/Api/Member/Oauth2ClientCallback/kakao/
https://m.openyourworld.co.kr/ 주소에서 로그인 버튼 클릭했을때
m.openyourworld가 아니라 openyourworld로 리다이렉트URI 설정하셔서 그렇습니다.
PC 버전 로그인 페이지에 있는 버튼을 복사하셔서 다른 페이지에 설정하신 걸까요?
카페24에서 토큰 요청 시, 현재 접속한 도메인을 기준으로 리다이렉트 URI설정하므로
https://m.openyourworld.co.kr/ 주소에서 로그인 버튼 클릭하면 리다이렉트 URI주소는 https://m.openyourworld.co.kr/ 으로 시작하고
https://openyourworld.co.kr/ 주소에서 로그인 버튼 클릭하면 리다이렉트 URI주소는 https://openyourworld.co.kr/ 으로 시작해야합니다.
확인 부탁드려요.
리다이렉트 URI는 첨부한 그림처럼 그렇게 되어 있는데… 문제가 없는거 아닌가요?
PC사이트는 잘 되고 모바일만 안되는 거든요…
그럼 어떻게 고쳐야 할까요?
디벨로퍼스 설정과 무관한 쇼핑몰 코드상(로그인버튼)의 문제입니다.
상품 페이지에 카카오 로그인 버튼 추가하신 것 같은데요.
로그인버튼에 사용되는 인가 요청 주소에
리다이렉트 URI파라메터를 아래와 같은 패턴으로 처리하셔야합니다. 이는 카페 24의 토큰 조회주소처리와 동일하게 해야하기 때문입니다.
https://m.openyourworld.co.kr/ 주소에서 로그인 버튼 클릭하면 리다이렉트 URI주소는 https://m.openyourworld.co.kr/ 으로 시작하고
https://openyourworld.co.kr/ 주소에서 로그인 버튼 클릭하면 리다이렉트 URI주소는 https://openyourworld.co.kr/ 으로 시작해야합니다.
그럼 카카오 로그인 버튼이 상품 페이지에 있다면 URI 설정에 그곳(상품페이지 URL)을 작성하면 된다는 건가요?
즉 Rediredt URI 부분에 상품 페이지를 넣으면 된다는 건가요?
근데 PC버전은 잘 되는데… 모바일만 안되는데… 그게 상관 있을까요?
Q. 근데 PC버전은 잘 되는데… 모바일만 안되는데… 그게 상관 있을까요?
넵. 브라우저 주소창을 보시면
PC일때는
모바일 일때는
각각 다르게 주소가 시작한다는 걸 확인하실 수 있습니다.
“로그인 버튼” 위치에 상관없이 로그인 버튼에 사용되는 아래 링크에서
리다이렉트URI 도메인 시작 부분이 PC일때용으로 설정되어 PC일때만 잘 작동하는 것입니다.
모바일 일때는 m.으로 시작하는 주소를 리다이렉트URI에 설정하셔야한다는 의미입니다.
https://kauth.kakao.com/oauth/authorize?client_id=앱키&redirect_uri=리다이렉트URI&response_type=code
(1) PC일때와 모바일 일때 각각 리다이렉트 URI 주소를 다르게 설정하시거나
(2) 리다이렉트 URI 도메인부분을 변수 처리 하셔야합니다.
php코드를 사용하신다면 도메인 부분을 아래와 같이 변수 처리 하시거나
<?= $_SERVER['HTTP_HOST'] ?>
javascript를 사용하신다면 도메인 주소 부분을 아래와 같이 처리 하셔야합니다.
window.location.host
확인 부탁드려요.
이렇게 Redirect URI에 카카오 로그인이 있는 상품페이지 URL을 추가하고 상품페이지에 카카오로그인 버튼 추가하고 해봤는데… 같은 에라 메시지가 나오는데요… ㅠㅠ
감사합니다. 해결하였습니다.
PC에 있는 버튼 URL을 그대로 사용해서 생기는 문제 였더군요…
모바일에는 버튼 URL에 있는 redirect_uri=m.openyourworld.co.kr로 해야 했네요…
PC : redirect_uri=https://openyourworld.co.kr
PC와 mobile이 주소가 틀릴때에는
mobile : redirect_uri=https://m.openyourworld.co.kr
1개의 좋아요