[Dap JI ] react-native-seoul/kakao-login사용해서 카카오 로그인

이번 시간은 expo와 네이티브 라이브러리인 react-native-seoul/kakao-login를 사용해 카카오 소셜로그인 구현 ㄱㄱ

 

1. npm 설치

 

https://www.npmjs.com/package/@react-native-seoul/kakao-login

@react-native-seoul/kakao-login

React Native 카카오 로그인 라이브러리로 웹이 아닌 네이티브 형식으로 구현할 때 사용, 

 

명령어는

npx expo install @react-native-seoul/kakao-login

 

라이브러리 보면 expo 환겨일 때 설정이 생각보다 잘 나와있음, 

app.json 파일 플러그인에 react-native-seoul/kakao-login 적용해주는것, 

 

추가로 밑에 expo-build-properties도 설치해야한다! 이건 

" Android의 Kakao SDK Maven Repository를 선언하기 위해 필요한 의존성을 추가 "

라고 나와있음! 같이 설치해주자 

npx expo install expo-build-properties

 

밑에 해당 라이브러리에서 사용하는 메서드도 볼 수 있음!

 

이제 내 코드에 적용해보자!!

2. 적용기

  ios: {
    bundleIdentifier: "com.app.app",
  },
plugins: [
    "expo-router",
    "expo-font",
    "expo-apple-authentication",
    [
      "@react-native-seoul/kakao-login",
      {
        kakaoAppKey: process.env.EXPO_PUBLIC_KAKAO_NATIVE_APP_KEY, // 환경변수 사용
        kotlinVersion: "1.9.0",
      },
    ],
    [
      "expo-build-properties",
      {
        android: {
          extraMavenRepos: [
            "https://devrepo.kakao.com/nexus/content/groups/public/",
          ],
        },
      },
    ],
  ],

app. json에 예제처럼 설정해주기,  

 

bundleIdentifier 여기엔 카카오 디벨로퍼스에 ios 번들 id설정한 것 적어주기, 

 

저기서 kakaoAppKey는 카카오 디벨로퍼스에서 설정한 네이티브 키 가져오면 됨.  

 

kakaoAppKey는 중요한 키니까 환경변수로 가려줘야 하는데, app,jsno은 정적파일이라 환경변수 적용이 안됨 !

그래서 app.config.ts를 만들어서 환경변수 적용해줌, => app.json에 있는 내용을 옮기면 된다, 

 

expo에서는 공식문서에 이 두 파일중 하나로 프로젝트를 로드한다고 나와있음. 

일단 이정도 설정해주고 프론트 코드로 돌아가서 로그인 세팅 준비ㄱㄱ

 

import { login, getProfile } from "@react-native-seoul/kakao-login";

const OauthBtnForm = () => {

  const kakao = async () => {
    try {
      const result = await login();
      console.log("로그인 성공:", result);
      const profile = await getProfile();
      console.log("사용자 프로필:", profile);
    } catch (error) {
      console.error("카카오 로그인 에러:", error);
    }
  };
  return (
    <View style={styles.container}>
      <OauthBtnStyle
        onPress={kakao}
        backColor="#F7E600"
        text="카카오로 로그인"
        textColor="black"
        icon={
          <Image
            source={require("@/assets/images/kakao.png")}
            style={{ width: 25, height: 25 }}
          />
        }
      />
    </View>
  );
};

 

react-native-seoul/kakao-login에서 login과 getProfile을 import해주고 로그인 누르면 

에러 나옴!

이 말은 react-native-seoul/kakao-login 패키지에서 login 함수가 제대로 초기화 되지 않은것, 

 

분명 나는 플러그인 설정 해줬고, 네이티브 코드를 다루는 거니까 expo develop build환경에서 사용중인데 안되니 빠르게 지피티한테 물어봄

 

그중 ios 설정에 관한 걸 적용해봄

 infoPlist: {
      CFBundleURLTypes: [
        {
          CFBundleURLSchemes: [
            `kakao${process.env.EXPO_PUBLIC_KAKAO_NATIVE_APP_KEY}`,
          ], // 환경변수 사용
        },
      ],
      LSApplicationQueriesSchemes: ["kakaokompassauth", "kakaolink"],
    },

 

• CFBundleURLTypes
  • 앱에서 URL 스킴(URL Scheme)을 등록하여 특정 URL을 열거나 처리할 수 있도록 설정
  • Kakao 로그인 SDK는 로그인 이후 앱으로 돌아오기 위해 URL 스킴을 사용
  • kakao<YOUR_KAKAO_NATIVE_APP_KEY> 형식의 스킴이 앱에 등록되어 있어야 카카오톡에서 로그인 후 결과를 앱으로 전달할 수 있음!
• LSApplicationQueriesSchemes
  • 앱이 외부 앱(예: 카카오톡)을 열거나, 특정 URL로 요청을 보낼 수 있도록 허용
  • iOS에서는 앱이 다른 앱을 호출할 때 보안상의 이유로 호출 가능한 스킴을 미리 등록해야 한다..
  • Kakao SDK는 로그인 과정을 위해 kakaokompassauth와 kakaolink 스킴을 사용하므로 이를 등록해야 합니다.

라고 한다. 좀 필수적인 것 같으니 꼭 등록을 해주자. 

 

이후 다시 로그인 시도, 위에서 나왔던 똑같은  카카오 로그인 에러 발생,, 

 

그래서 혹시 모르니 해당 변경사항을 커밋 후에 다시 빌드

eas build --platform ios --profile development

 

빌드 성공!!

 

다시 로그인 시도해 보니 너무 너무 로그인이 잘 되었음, 

 

---

이미 빌드된 파일로 앱 테스트를 하고 있다고 해도 새로운 네이티브 코드를 사용해야하는 경우면 빌드파일을 다시 만들어줘야했던 것, 

 

어쩌면 expo의 불편함일 수도 있겠다 생각했음, 

 

---

1. 카카오 디벨로퍼스에서 ios 번들 id 설정과 네이티브 키 확인 

 

2.@react-native-seoul/kakao-login 설치

 

2. app,config.ts 파일에 플러그인 및 infoPlist 설정

 

3. eas에 eas secret:create --name KAKAO_NATIVE_APP_KEY --value 11111111111 => (111111111에 네이티브키 적용)  사용해서 환경변수 등록해주면 더 안전하게 관리 가능! 

 

4. 로그인 컴포넌트에서 import { login, getProfile } from "@react-native-seoul/kakao-login"; 임포트 해주고 로그인 관련 코드 작성

 

5. eas build --platform ios --profile development로 다시 빌드

https://ddicreator.com/82

[Dap JI ] expo go가 아닌 실제 배포 환경에서 적용해보기,

 

 

6. 빌드된 파일 설치해서 로그인 하면 성공할 수 있음. 

---

일단 이정도까지만... 리다이렉트는 연결해보고 다시,.