문의 시, 사용하시는 개발환경과 디벨로퍼스 앱ID를 알려주세요.
window/react native/expo
카톡 rest api 를 사용해서 로그인을 구현하고 있는데,
client_id 와 redirect_URI 를 정상적으로 작성했음에도 불구하고, 다음과 같은 에러가 나오는데 도통 감이 안 잡혀서 여쭤봅니다. 저의 팀원은 정상적으로 로그인이 된다고 합니다.
[에러]
LOG Received Code: 4rbXCEkiKFLn3pknNMMHsztXNRUvpMVn-UgsE4cnhtsZ8Ousyn9_ke2SMAQKPXVaAAABi1gJNhbDukuslKNZWg
ERROR Failed to send authorization code to the server.
WARN Encountered an error loading page {"canGoBack": false, "canGoForward": false, "code": -1004, "description": "Could not connect to the server.", "didFailProvisionalNavigation": true, "domain": "NSURLErrorDomain", "loading": false, "target": 189, "title": "카카오계정으로 로그인", "url": "https://kauth.kakao.com/oauth/authorize?client_id=695757edacbf01e55c4d269a9ff165ba&redirect_uri=https://localhost:3000/auth/kakao/callback&response_type=code"}
아래는 웹뷰를 구성하는 코드입니다.
import React, { useState, useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';
import { useNavigation } from '@react-navigation/native';
const CLIENT_ID = '정상값'
const REDIRECT_URI = '정상값'
const SERVER_ENDPOINT = 'http://xxx.xx.xx:4000/auth';
const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
const KakaoWebView = () => {
const navigation = useNavigation();
const [code, setCode] = useState(null);
const [codeSent, setCodeSent] = useState(false);
useEffect(() => {
if (code && !codeSent) {
sendCodeToServer(code);
setCodeSent(true);
navigation.navigate('LoginHandler', { code }); // 로그인 처리 후 이동
}
}, [code, codeSent]);
const handleNavigationStateChange = (newNavState) => {
if (newNavState.url.includes(`${REDIRECT_URI}?code=`)) {
const extractedCode = extractCodeFromURL(newNavState.url);
setCode(extractedCode);
}
};
const extractCodeFromURL = (url) => {
return url.split('=')[1];
};
const sendCodeToServer = async (code) => {
try {
const response = await fetch(SERVER_ENDPOINT, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ code }),
});
handleServerResponse(response);
} catch (error) {
console.error('Error sending authorization code to the server:', error);
}
};
const handleServerResponse = (response) => {
if (response.ok) {
console.log('Authorization code sent to the server successfully.');
setCodeSent(true);
navigation.navigate('LoginHandler', { code });
} else {
console.error('Failed to send authorization code to the server.');
}
};
return (
<View style={styles.container}>
<WebView
source={{ uri: KAKAO_AUTH_URL }}
onNavigationStateChange={handleNavigationStateChange}
/>
</View>
);
};