간편로그인시 오류 발생

REST API
1

try {
const tokenUrl = ‘https://kauth.kakao.com/oauth/token’;
const params = new URLSearchParams();
params.append(‘grant_type’, ‘authorization_code’);
params.append(‘client_id’, client_id);
params.append(‘redirect_uri’, redirect_uri);
params.append(‘code’, code);

		const kakaoHeader = {
			'Content-type':'application/x-www-form-urlencoded;'
		};

		const response = await axios.post(tokenUrl, params, {
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded'
			}
		});
		console.log('결과응답:', response.data);
		const accessToken = response.data.access_token;
		console.log('액세스 토큰:', accessToken);
		// 사용자 정보 요청
		//getUserInfo(accessToken);
	} catch (error) {
		console.error('액세스 토큰 요청 오류:', error.response ? error.response.data : error.message);
	}

{error: ‘invalid_grant’, error_description: ‘Redirect URI mismatch.’, error_code: ‘KOE303’}

{error: ‘invalid_grant’, error_description: ‘Redirect URI mismatch.’, error_code: ‘KOE303’}{error: ‘invalid_grant’, error_description: ‘Redirect URI mismatch.’, error_code: ‘KOE303’}

등록된 Redirect URI 는 확인 하였습니다.
http://116.33.116.110:28080/portal/gc/ml/redirectKakao.do
http://116.33.116.110:28080/portal/gc/ml/kakaoUserInfo.do

2

안녕하세요.

확인을 위해 앱 ID 부탁드립니다.

앱ID
https://developers.kakao.com/ 의 내 애플리케이션>앱 설정>요약 정보 : 기본정보에 있는 앱 ID
숫자로된 ID 입니다
ex) 123456

3

1102193 입니다.

4

인가코드요청과 액세스 토큰 발급요청 시, 동일한 Rediect URI를 사용하셔야합니다.
아래와같이 다르게 시도하셨습니다.

인가코드: http://116.33.116.110:28080/portal/gc/ml/redirectKakao.do
접근토큰: /kakao/user
인가코드: http://116.33.116.110:28080/portal/gc/ml/redirectKakao.do
접근토큰: /portal/gc/ml/kakaoCallback.do
인가코드: http://116.33.116.110:28080/portal/gc/ml/redirectKakao.do
접근토큰: http://116.33.116.110:28080/kakao/user
인가코드: http://116.33.116.110:28080/portal/gc/ml/redirectKakao.do
접근토큰: http://116.33.116.110:28080/portal/gc/ml/kakaoCallback.do
인가코드: http://116.33.116.110:28080/portal/gc/ml/redirectKakao.do
접근토큰: http://116.33.116.110:28080/portal/gc/ml/kakaoUserInfo.do
인가코드: http://116.33.116.110:28080/portal/gc/ml/redirectKakao.do
접근토큰: http://116.33.116.110:28080/kakao/user
인가코드: http://116.33.116.110:28080/portal/gc/ml/redirectKakao.do
접근토큰: http://116.33.116.110:28080/portal/gc/ml/kakaoCallback.do
인가코드: http://116.33.116.110:28080/portal/gc/ml/redirectKakao.do
접근토큰: http://116.33.116.110:28080/portal/gc/ml/kakaoUserInfo.do
5

지금은 그렇게 호출 하지 않습니다.

최근 호출된 이력은
const redirect_uri = ‘http://116.33.116.110:28080/portal/gc/ml/kakaoUserInfo.do’;

이고

여러개의 URI를 줄바꿈으로 10개까지 넣으라고 되어있던데

최초 code 받는 콜백과
엑세스 코드받는 콜백 URI 두개를 등록했습니다.

6

가장 마지막 오류는 이렇게 요청하셨네요. 다르게 요청하셨습니다. 코드 확인해주세요.

{“error”:“invalid_grant”,“error_description”:“Redirect URI mismatch.”,“error_code”:“KOE303”}

/oauth/token

redirect_uri
http://116.33.116.110:28080/portal/gc/ml/kakaoUserInfo.do

/oauth/authorize
redirect_uri
http://116.33.116.110:28080/portal/gc/ml/redirectKakao.do

7
카카오톡으로 계속하기

로그인 처리 Code 발급
function loginWithKakao(){
Kakao.Auth.authorize({
redirectUri: ‘http://116.33.116.110:28080/portal/gc/ml/redirectKakao.do’,
});
}

//코드로 엑세스 코드 요청
async function getAccessToken(code) {
const client_id = ‘2027c06db4306af086bdfac931eaba7c’;
const redirect_uri = ‘http://116.33.116.110:28080/portal/gc/ml/kakaoUserInfo.do’;
try {
const tokenUrl = ‘https://kauth.kakao.com/oauth/token’;
const params = new URLSearchParams();
params.append(‘grant_type’, ‘authorization_code’);
params.append(‘client_id’, client_id);
params.append(‘redirect_uri’, redirect_uri);
params.append(‘code’, code);

		const kakaoHeader = {
			'Content-type':'application/x-www-form-urlencoded;'
		};

		const response = await axios.post(tokenUrl, params, {
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded'
			}
		});
		console.log('결과응답:', response.data);
		const accessToken = response.data.access_token;
		console.log('액세스 토큰:', accessToken);
		// 사용자 정보 요청
		//getUserInfo(accessToken);
	} catch (error) {
		console.error('액세스 토큰 요청 오류:', error.response ? error.response.data : error.message);
	}
}

//코드발급 결과 수신
@RequestMapping(value = “/portal/gc/ml/redirectKakao.do”)
public ModelAndView redirectKakao(@RequestParam String code) throws Exception {
ModelAndView mav = new ModelAndView(“portal/gc/ml/mberLoginForm”);
mav.addObject(“code”, code);

    return mav;
}

//엑세스코드 수신
@RequestMapping(“/portal/gc/ml/kakaoUserInfo.do”)
public Map<String, Object> getUserInfo(@RequestParam String accessToken) {
System.out.println(“[accessToken]”+accessToken);
HttpHeaders headers = new HttpHeaders();
headers.set(“Authorization”, "Bearer " + accessToken);

    HttpEntity<String> entity = new HttpEntity<>(headers);

    RestTemplate restTemplate = new RestTemplate();
    ResponseEntity<Map> response = restTemplate.exchange("portal/gc/ml/mberLoginForm", HttpMethod.GET, entity, Map.class);

    return response.getBody();
}

카카오 디벨로퍼 Redirect URI 등록 현황
http://116.33.116.110:28080/portal/gc/ml/redirectKakao.do
http://116.33.116.110:28080/portal/gc/ml/kakaoUserInfo.do

카카오 로그인에서 사용할 OAuth Redirect URI를 설정합니다.
여러개의 URI를 줄바꿈으로 추가해주세요. (최대 10개)
REST API로 개발하는 경우 필수로 설정해야 합니다.

줄바꿈으로 Redirect 하고 있는 두개의 URI를 등록해서 사용하고있습니다.

혹시 등록순서가 따로 있을까요?

8

등록은 여러개 가능하고 모두 Redirect URI 로 사용 가능하지만

한번의 카카오 로그인에서 인가코드요청과 액세스 토큰 발급 중 Redirect URI 를 다르게 설정할 수 없습니다.
KOE303에러는 인가코드요청과 액세스 토큰 발급요청 시, 다른 Rediect URI를 사용할때 발생합니다.

(없는 Rediect URI를 사용할때 발생하는 에러는 KOE006)

확인 부탁드려요.

9

설명 감사드립니다.
해당 부분은 해결되었습니다.

그런데 사용자 정보조회 후
userInfo.kakao_account.phone_number가 조회되지 않습니다

console.log(‘User info:’, userInfo);
if (userInfo.kakao_account && userInfo.kakao_account.phone_number) {
console.log(‘User phone number:’, userInfo.kakao_account.phone_number);
} else {
console.log(‘Phone number is not available.’);
}

10

1102193 디벨로퍼스앱은 전화번호 동의 설정 권한이 없습니다.

아래내용 확인 부탁드려요.

동의 항목별 "필수 동의" 설정 방법 / How to set scopes to ‘Required consent’