앱 아이디는 980389 입니다.
react native로 카카오 로그인을 구현했는데 웹뷰 형태로 구현했습니다. 로컬 환경에서 애뮬레이터로 실행했을때는 로그인이 잘 되는데 구글 플레이스토어에 등록해서 실제 앱에서는 로그인이 안되고 있습니다. 카카오톡이 웹뷰형태로 열리고 아이디랑 비밀번호를 입력하고 확인버튼까지는 눌립니다.!
이 과정도 다했는데 왜 안되는걸까요…ㅠㅠ
리다이렉트 URI가 http://localhost:8080이니 해당 주소에 접근하지못하는 환경에서는 로그인이 안되는 것 같습니다.
원래는
import React, {useState, useEffect} from 'react';
import {View, ActivityIndicator} from 'react-native';
import WebView from 'react-native-webview';
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Loading from '@/components/common/Loading';
import {postFcmToken} from '@/apis/LoginApi';
interface KakaoLoginProps {
navigation: any;
}
const KakaoLogin = ({navigation}: KakaoLoginProps) => {
const [isLoading, setIsLoading] = useState(false);
const [isCodeSent, setIsCodeSent] = useState(false);
const sendLoginRequest = async (token: string) => {
try {
const response = await axios.get(
'http://k9b208.p.ssafy.io/api/oauth/login',
{
params: {
access: token,
},
withCredentials: true,
headers: {
'Content-Type': 'application/json',
},
},
);
const data = response.data;
await AsyncStorage.setItem('userId', String(data.uesrId));
await AsyncStorage.setItem('accessToken', data.accessToken);
await postFcmToken();
} catch (error) {
console.error('Error during login request:', error);
throw error; // 또는 적절한 에러 처리
}
};
const parseAuthCode = async (url: string) => {
if (isCodeSent) return;
const exp = 'code=';
const startIndex = url.indexOf(exp);
if (startIndex !== -1) {
setIsCodeSent(true);
const authCode = url.substring(startIndex + exp.length);
setIsLoading(true);
await axios
.get('http://k9b208.p.ssafy.io/api/oauth2/code/kakao', {
params: {
code: authCode,
},
})
.then(async res => {
const accessToken = res.data.accessToken;
await sendLoginRequest(accessToken);
})
.catch(error => {
console.error('Axios Error: ', error);
})
.finally(() => {
setIsLoading(false);
});
navigation.navigate('BottomTab', {
screen: 'Main',
});
}
};
return (
<View style={{flex: 1}}>
{isLoading ? (
<Loading />
) : (
<WebView
originWhitelist={['*']}
scalesPageToFit={false}
style={{marginTop: 30}}
source={{
uri: 'https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=e9cb9f18c757bb2e**************&redirect_uri=http://localhost:8080/login/oauth2/code/kakao',
// uri: 'https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=e9cb9f18c757bb2e**************&redirect_uri=http://localhost:8080/login/oauth2/code/kakao',
// uri: 'https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=e9cb9f18c757bb2e**************&redirect_uri=http://localhost:8081/login/oauth2/code/kakao',
// uri: 'https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=e9cb9f18c757bb2e**************&redirect_uri=http://k9b208.p.ssafy.io/login/oauth2/code/kakao',
headers: {
'Accept-Language': 'ko-KR,ko',
},
}}
javaScriptEnabled={true}
saveFormData={false}
onNavigationStateChange={navState => {
parseAuthCode(navState.url);
}}
/>
)}
</View>
);
};
export default KakaoLogin;
여기서 카카오 로그인 버튼을 누르면 code= 뒤에 authcode만 가져와서 백엔드에 보내는 방식으로 했었는데 프론트로 code를 가져오려면 어떻게 해야하나요?.. redirecturi를 어떤걸로 설정해야 할지 모르겠습니다…!
authcode만 가져와서 백엔드에 보내는 방식이 아니라
code를 받을 백엔드 주소를 redirecturi로 사용하시면 좋을 것같습니다.
하지만, 처음 문의하신에러는 이 내용이 아니라
리다이렉트 uri를 localhost로 설정하셔서 해당 백엔드에 접속 할 수 없는 기기에서 리다이렉트 uri 로 접근하지 못해 발생한 문제로 보입니다.
예를들어
(1) 리다이렉트 URI를 http://localhost:8080/login/oauth2/code/kakao로 설정했는데
(2) 플레이스토어에서 앱을 받아 설치한 기기에서
(3) 카카오 로그인 후, http://localhost:8080/login/oauth2/code/kakao 여기에 접속할 수 없어서 이후 진행안됨.
자꾸 문의드려서 죄송합니다… 저도 처음에 code를 받을 백엔드 주소로 redirect시키려고 했는데 잘 안됐어서 처음에 프론트에서 code를 받고 그 코드를 갖고 백엔드로 authCode를 보내서 백엔드에서 카카오로 요청을 한뒤 정보를 가져오는 방식으로 진행했었습니다…
로컬에서는 저렇게 했을때는 code=(‘여기 주소’) 값이 나와서 로그인 과정을 잘 처리할 수 있었는데 그러면 어떻게 주소를 설정해야 할까요…
예를들어
플레이스토어에서 앱을 다운로드 받아 설치할 수 있는 불특정 이용자가 접근할 수 있는 URL을 사용하시면됩니다.
즉, localhost가 아닌 아래 주소를 상용하시면 됩니다.