카카오 로그인 관련 Webview 질문드립니다.

안녕하세요. Webview 관련해서 다시 질문드립니다.

import axios from 'axios';
import React, {useState} from 'react';
import {
  ActivityIndicator,
  Dimensions,
  Platform,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import WebView, {
  WebViewMessageEvent,
  WebViewNavigation,
} from 'react-native-webview';
import useAuth from '../../hooks/queries/useAuth';
import Config from 'react-native-config';
import {authNavigations, colors} from '../../constants';
import {AuthStackParamList} from '../../navigations/stack/AuthStackNavigator';
import {NativeStackScreenProps} from '@react-navigation/native-stack';

const REDIRECT_URI = `{배포된 SERVER의 REDIRECT URI}`

type AuthHomeScreenProps = NativeStackScreenProps<AuthStackParamList>;

function KakaoLoginScreen({navigation}: AuthHomeScreenProps) {
  const {kakoLoginMutation} = useAuth();
  const [isLoading, setIsLoading] = useState(false);
  const [isChangeNavigate, setIsChangeNavigate] = useState(true);

  const handleOnMessage = (event: WebViewMessageEvent) => {
    if (event.nativeEvent.url.includes(`${REDIRECT_URI}?code=`)) {
      const code = event.nativeEvent.url.replace(`${REDIRECT_URI}?code=`, '');

      requestToken(code);
      // navigation.navigate(authNavigations.MAINBOTTOMTABNAVIGATOR, {code});
      navigation.navigate(authNavigations.MAINBOTTOMTABNAVIGATOR);
    }
  };

  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);
    kakoLoginMutation.mutate(response.data.access_token);
  };

  // 로딩 처리
  const handleNavigationChangeState = (event: WebViewNavigation) => {
    const isMatched = event.url.includes(`${REDIRECT_URI}?code=`);
    setIsLoading(isMatched);
    setIsChangeNavigate(event.loading);
  };

  return (
    <SafeAreaView style={styles.container}>
      {(isLoading || isChangeNavigate) && (
        <View style={styles.kakaoLoadingContainer}>
          <ActivityIndicator size={'small'} color={colors.BLACK} />
        </View>
      )}
      <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('')"}
        onNavigationStationChange={handleNavigationChangeState}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  kakaoLoadingContainer: {
    backgroundColor: colors.WHITE,
    height: Dimensions.get('window').height,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default KakaoLoginScreen;

위와 같은 KakaologinScreen.tsx 코드에서 Webview 내의 source 부분에 RESTFULAPI_KEY 부분과 REDIRECT_URI를 넣고 강의에서처럼 카카오 로그인을 시도하였는데, 카카오 로그인 창이 뜨지 않고 계속 로딩 중인 상태입니다. 그래서 Webview 컴포넌트 source부분의 uri를 따로 때어서 웹 페이지에서 접속을 해보았는대로 아이디/비밀번호 입력창이 뜨지 않고 하얀색 공백창만 뜨는 상태입니다.
이와 같은 경우, 배보된 서버의 REDIRECT_URI의 문제인가요? 아니면 다른 부분에서 문제가 발생하는지 질문 드립니다.

• ❗질문 작성시 참고해주세요

  • 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.

  • 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다.

     

  • 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!