해결된 질문
24.10.02 22:17 작성
·
42
0
안녕하세요 선생님
카카오톡 로그인 부분에 에러가 있어서 질문 드립니다!!
import axios from 'axios';
import {SafeAreaView, StyleSheet, View} from 'react-native';
import Config from 'react-native-config';
import WebView, {WebViewMessageEvent} from 'react-native-webview';
// kakao api 에서 적었던 uri 를 적어준다.
const REDIRECT_URI = 'http://localhost:3030/auth/oauth/kakao';
function KakaoLoginScreen() {
const handleOnMessage = (event: WebViewMessageEvent) => {
console.log('event.nativeEvent.url :', event.nativeEvent.url);
if (event.nativeEvent.url.includes(`${REDIRECT_URI}?code=`)) {
const code = event.nativeEvent.url.replace(`${REDIRECT_URI}?code=`, '');
console.log('code :', code);
requestToken(code);
}
};
const requestToken = async (code: string) => {
const response = await axios({
method: 'post',
url: 'https://kauth.kakao.com/oauth/token',
params: {
grant_type: 'authorization_code',
client_id: Config.KAKAO_REST_API_KEY,
redirect_uri: REDIRECT_URI,
code,
},
});
console.log('response.data :', response.data);
};
return (
<SafeAreaView style={styles.container}>
<WebView
source={{
uri: `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${Config.KAKAO_REST_API_KEY}&redirect_uri=${REDIRECT_URI}`,
}}
onMessage={handleOnMessage}
injectedJavaScript={"window.ReactNativeWebView.postMessage('')"}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default KakaoLoginScreen;
카카오
redirect URI 에서도
http://localhost:3030/auth/oauth/kakao
입력을 했는데
console.log('event.nativeEvent.url :', event.nativeEvent.url);
이부분의 로그가 왜 저는
이렇게 나올까용?
그래서 if 문을 타지 ㅇ낳아 requertToken 으로 넘어가지 못하고 있습니다.
답변 2
0
0
안녕하세요, 인프런 AI 인턴입니다. 호갱님.
카카오 로그인 시 Redirect URI와 관련된 문제로 인해 requestToken
함수로 넘어가지 않는 부분에 대해 질문을 주셨네요.
카카오 로그인 구현 시 발생하는 문제는 주로 Redirect URI 설정 및 WebView 내 URL 처리와 관련이 있습니다. 유사한 문제를 해결했던 사례를 통해 답변을 찾아보았습니다. 이러한 경우에는 주로 Redirect URI 설정이 정확한지, 그리고 WebView 내에서 URL이 올바르게 전달되는지를 확인해야 합니다.
Redirect URI
설정 여부와 Config에서 KAKAO_REST_API_KEY
값의 정확성 등을 재확인해 보는 것입니다.8-2.카카오 로그인 구현하기 witk WebView 강의중
REDIRECT_URI
가 완전히 일치하는지 확인합니다.Config.KAKAO_REST_API_KEY
가 정확하게 설정되었는지 확인합니다.
<WebView
source={{
uri: `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${Config.KAKAO_REST_API_KEY}&redirect_uri=${REDIRECT_URI}`,
}}
onMessage={handleOnMessage}
injectedJavaScript={"window.ReactNativeWebView.postMessage('')"}
/>
injectedJavaScript
부분이 실제로 메시지를 보내게 설정되었는지 검토해보세요. 추가적으로 WebView의 onNavigationStateChange
속성을 활용해 URL 변경을 구독하는 방식을 적용해 볼 수도 있습니다.저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
2024. 10. 03. 11:25
error : [AxiosError: Request failed with status code 401]
const REDIRECT_URI = `${
Platform.OS === 'ios' ? 'http://localhost:3030/' : 'http://10.0.2.2:3030/'
}auth/oauth/kakao`;
이렇게 코드를 바꿔줬더니 401 에러가 계속뜨네요..원인을 못찾겠네요
KAKAO_REST_API_KEY
해당 코드도 잘입력이 되어있는데
2024. 10. 03. 13:51
방식이 바꼈는지 모르겠는데
지금은
client_secret 코드를 추가해야 되는것 같스빈다.
휴 ~ 겨우 성공~
https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#request-token
2024. 10. 03. 17:00
넵 해결했습니다. 선생님
kakao api 가 수정이 되었는지
client_secret 를 추가해야 로그인이 되더라구요