Rest API로 카카오 로그인

Question

안녕하세요, 리액트와 expo로 프로젝트를 진행중인 프로그래밍 초보입니다.Rest API로 카카오 로그인을 구현하려 하는데, 로그인 창을 띄우는데 까진 성공했지만 그 이후 인가코드를 받아오는 과정에서 막혔습니다. chat GPT한테 물어도 보고, 구글링을 3일 정도 했지만 결국 답을 못 찾았네요. 지푸라기라도 잡는 심정으로 여기에 글을 써봅니다. //App.js import React from 'react'; import {NavigationContainer} from '@react-navigation/native'; import StackNavigator from './navigation/StackNavigator' export default function App() { console.disableYellowBox = true; return ( ); }여기서 StackNavigator를 호출하면, StackNavigator.js에서 Stack을 정의합니다.//StackNavigator.js import React from 'react'; import { createStackNavigator } from '@react-navigation/stack'; import { Route } from 'react-router-dom'; import WelcomeScreen from '../screens/WelcomeScreen'; import MainScreen from '../screens/MainScreen'; import LoginHandlerScreen from '../screens/LoginHandlerScreen'; const Stack = createStackNavigator(); const StackNavigator = () =>{ return ( ) } export default StackNavigator;첫 화면을 WelcomeScreen.js로 설정했습니다.import * as React from 'react'; import { useEffect } from 'react'; import { Route, StyleSheet, Image, Text, View, Linking, TouchableOpacity } from 'react-native'; import axios from 'axios'; import { useNavigation } from '@react-navigation/native'; import { useRoute } from '@react-navigation/native'; import LoginHandlerScreen from './LoginHandlerScreen'; const CLIENT_ID = process.env.REACT_APP_KAKAO_REST_API_KEY; const REDIRECT_URI = "http://localhost:3000/auth/kakao/callback"; const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`; const WelcomeScreen = ({ navigation }) => { const handleKakaoLogin = () => { Linking.openURL(KAKAO_AUTH_URL) .catch((error) => { console.error('링크를 열 수 없음', error); }); }; return ( ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignContent: "center" }, imageStyle: { width: 200, height: 200 } }); export default WelcomeScreen;WelcomeScreen에 있는 카카오 로그인 이미지를 클릭하면 로그인 창이 띄워지고, 필수 동의항목을 체크하고 동의함 버튼을 누르면 Redirect URI로 넘어가서 인가코드가 띄워지는데 그 코드와 함께 새로운 화면(이를테면 '로딩중')으로 Route시키고 싶습니다.여러군데 구글링 해본 결과 이런 식으로 적어 넣으면 된다는데, 어디에 이 코드를 붙여 넣어야 할지 감이 잘 안 잡힙니다. 한번만 도와주시면 감사하겠습니다ㅠ

띠로릴링 · Answer

카카오 개발자도구에서 redirect uri 을 설정하는게 필요해 보입니다https://developers.kakao.com/docs/latest/ko/kakaologin/prerequisite#kakao-login-redirect-uri

Rest API로 카카오 로그인

1개의 답변

#kakaologin 목록