인프런 커뮤니티 질문&답변

안녕하세요 선생님

카카오톡 로그인 부분에 에러가 있어서 질문 드립니다!!

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);

이부분의 로그가 왜 저는

https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=해당코드&redirect_uri=http://localhost:3030/auth/oauth/kakao

이렇게 나올까용?

그래서 if 문을 타지 ㅇ낳아 requertToken 으로 넘어가지 못하고 있습니다.