카카오 로그인시 url
안녕하세요 선생님
카카오톡 로그인 부분에 에러가 있어서 질문 드립니다!!
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
안녕하세요, 인프런 AI 인턴입니다. 호갱님.
카카오 로그인 시 Redirect URI와 관련된 문제로 인해 requestToken 함수로 넘어가지 않는 부분에 대해 질문을 주셨네요.
카카오 로그인 구현 시 발생하는 문제는 주로 Redirect URI 설정 및 WebView 내 URL 처리와 관련이 있습니다. 유사한 문제를 해결했던 사례를 통해 답변을 찾아보았습니다. 이러한 경우에는 주로 Redirect URI 설정이 정확한지, 그리고 WebView 내에서 URL이 올바르게 전달되는지를 확인해야 합니다.
-
- 이 질문에서는 카카오로그인 시 WebView에서 ID/비밀번호 입력창 대신 하얀색 공백 화면만 나타나는 문제를 다룹니다.
- 해결 방법으로는 적절한
Redirect URI설정 여부와 Config에서KAKAO_REST_API_KEY값의 정확성 등을 재확인해 보는 것입니다.
- 이 질문에서는 카카오로그인 시 WebView에서 ID/비밀번호 입력창 대신 하얀색 공백 화면만 나타나는 문제를 다룹니다.
8-2.카카오 로그인 구현하기 witk WebView 강의중
- 이 케이스에서는 무한 로딩 문제와 관련된 내용을 다룹니다. 배포된 서버의 URI가 정확하게 설정되어 있는지, 카카오 디벨로퍼스에서의 Redirect URI 설정 상태 등을 검토하는 것이 중요합니다.
- 이 케이스에서는 무한 로딩 문제와 관련된 내용을 다룹니다. 배포된 서버의 URI가 정확하게 설정되어 있는지, 카카오 디벨로퍼스에서의 Redirect URI 설정 상태 등을 검토하는 것이 중요합니다.
-
- 질문자와 강사의 논의를 통해 로그인을 정상적으로 처리하기 위한 코드를 점검하는 방법에 대한 예시입니다. Refresh Token 또는 토큰 처리 로직에 문제가 있는지 확인할 필요가 있습니다.
- 질문자와 강사의 논의를 통해 로그인을 정상적으로 처리하기 위한 코드를 점검하는 방법에 대한 예시입니다. Refresh Token 또는 토큰 처리 로직에 문제가 있는지 확인할 필요가 있습니다.
문제 해결을 위한 추가 확인 사항
- Redirect URI 확인: 카카오 디벨로퍼스에서 등록한 Redirect URI와 코드 내에 사용한
REDIRECT_URI가 완전히 일치하는지 확인합니다.
- Config 설정 확인:
Config.KAKAO_REST_API_KEY가 정확하게 설정되었는지 확인합니다.
- WebView URL 처리:
현재 코드는 아래와 같습니다.
<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 변경을 구독하는 방식을 적용해 볼 수도 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
0
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해당 코드도 잘입력이 되어있는데
0
방식이 바꼈는지 모르겠는데
지금은
client_secret 코드를 추가해야 되는것 같스빈다.
휴 ~ 겨우 성공~
https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#request-token
react-native-screens 버전 호환 문제
2
153
1
안드로이드 실행 중 Drawer네비게이션과 MapView 성능 문제
0
103
2
해당 강의 부분은 실제 활용하기에 부족해 제가 해결한 방법입니다.
0
96
1
소스코드가 강의 순서랑 다른가요?
0
72
2
현재 Windows에서 VsCode로 작업 중인데 추후에 IOS도 가능하게 하려면
0
115
2
react-native-fast-image는 react 19 버전에서 설치가 안되나요?
0
209
2
SQL Shell의 역할이 무엇인가요?
0
91
1
혹시 해당 강의에서invalidateQueries를 사용한 이유가 있을까요?
0
79
2
빠르게 실행해보고싶습니다.
0
82
1
강의 수강 순서 관련
0
70
1
애뮬레이터 실행 방법
0
99
2
무료 Apple ID로 실기기 테스트 가능한가요?
0
90
2
ios 실기기 연결
0
70
2
npm run ios에러
0
74
1
10월 삭제 예정인 강의는 이유를 알 수 있을까요?
0
101
1
캘린더 개발 후에 navigation 에 대해서 궁금한 점이 있습니다.
0
51
1
안드로이드 위치 권한 이슈 2가지 문의
0
71
1
지도가 보이려면 음.. 작성해주신 스타일과 다르게
0
74
0
제대로 설치한거같은데 안드로이드랑 ios 둘다 앱실행이 안되는것같아요
0
83
3
강의 내용을 보면 전체적으로 function 함수 키워드를 사용하시는데
0
69
2
강의 3-9 에서 useGetRefreshToken 훅 안에 즉시 함수로 처리하는 이유가 궁금합니다!
0
82
2
사내에서 figma.com 업로드 안되나요?
0
96
1
AWS EC2 + RDS 설정
0
85
2
안드로이드 안켜집니다.
0
91
2





