inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)

카카오 로그인시 url

해결된 질문

250

호갱

작성한 질문수 20

0

안녕하세요 선생님

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

 

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 으로 넘어가지 못하고 있습니다.

react-native typescript nestjs react-query zustand

답변 2

0

Kyo

해결하신건가요? 👍

0

호갱

넵 해결했습니다. 선생님

kakao api 가 수정이 되었는지

client_secret 를 추가해야 로그인이 되더라구요

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 호갱님.

카카오 로그인 시 Redirect URI와 관련된 문제로 인해 requestToken 함수로 넘어가지 않는 부분에 대해 질문을 주셨네요.

카카오 로그인 구현 시 발생하는 문제는 주로 Redirect URI 설정 및 WebView 내 URL 처리와 관련이 있습니다. 유사한 문제를 해결했던 사례를 통해 답변을 찾아보았습니다. 이러한 경우에는 주로 Redirect URI 설정이 정확한지, 그리고 WebView 내에서 URL이 올바르게 전달되는지를 확인해야 합니다.

  1. 카카오 로그인 관련 Webview 질문

    • 이 질문에서는 카카오로그인 시 WebView에서 ID/비밀번호 입력창 대신 하얀색 공백 화면만 나타나는 문제를 다룹니다.
    • 해결 방법으로는 적절한 Redirect URI 설정 여부와 Config에서 KAKAO_REST_API_KEY 값의 정확성 등을 재확인해 보는 것입니다.
  2. 8-2.카카오 로그인 구현하기 witk WebView 강의중

    • 이 케이스에서는 무한 로딩 문제와 관련된 내용을 다룹니다. 배포된 서버의 URI가 정확하게 설정되어 있는지, 카카오 디벨로퍼스에서의 Redirect URI 설정 상태 등을 검토하는 것이 중요합니다.
  3. 로그인/회원가입 오류 질문

    • 질문자와 강사의 논의를 통해 로그인을 정상적으로 처리하기 위한 코드를 점검하는 방법에 대한 예시입니다. 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