[React Native Expo] 카카오로그인 prebuild하기

https://github.com/crossplatformkorea/react-native-kakao-login

GitHub - crossplatformkorea/react-native-kakao-login: react-native native module for Kakao sign in.

 

일단 사용한 라이브러리는 위 링크의 써드파티라이브러리를 사용했다 카카오로그인 라이브러리중에 젤 유명하다고 보면된다

물론 제작자님께서 prebuild없이 eas build로 적용가능한 expo버전을 업데이트해주셨다

하지만 난 ios는 잘 적용됐는데 android가 죽어도안됐다(버전문제인지뭔지) ㅡㅡ

그래서 그냥 prebuild로 적용하기로함 그게....훨씬.....쉽다....^^.....

npm i @react-native-seoul/kakao-login

일단 설치부터 해준다

그러고 npx expo prebuild를 터미널에 써서 prebuild를 해준다

그러면 ios와 android 폴더가 각각 생길것이다

보통 prebuild할때  pot-install이 같이 진행되기는 하는데 그래도 혹시모르니 ios폴더로 이동해서 npx pod-install로 설치해준다.

 

그러고 npx  expo run:ios나 npx expo run:android로 프리빌드 실행해보면

android 실행할때 sdk 뭐시기하면서 오류뜰때가 있다

그러면 android 폴더가서 local.properties 파일 만들어주고

sdk.dir = /Users/내user이름/library/Android/sdk

이거 넣으면된다. 여기서 내 user이름은 그 왜 컴퓨터 키면 뜨는 내 컴퓨터명 그거다.

물론 기본베이스로 이거 진행할때 xcode랑 android studio, JAVA, brew, sdk, watchman 이런거 다 깔려있어야한다

// ios/앱이름/info.plist
 <key>CFBundleURLTypes</key>
 <array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>kakao{카카오 네이티브앱 아이디를 적어주세요}</string>
    </array>
  </dict>
 </array>
 <key>CFBundleVersion</key>
 <string>1</string>
 <key>KAKAO_APP_KEY</key>
 <string>{카카오 네이티브앱 아이디를 적어주세요}</string>
 <key>KAKAO_APP_SCHEME</key> // 선택 사항 멀티 플랫폼 앱 구현 시에만 추가하면 됩니다
 <string>{카카오 앱 스킴을 적어주세요}</string> // 선택 사항
 <key>LSApplicationQueriesSchemes</key>
 <array>
   <string>kakaokompassauth</string>
   <string>storykompassauth</string>
   <string>kakaolink</string>
 </array>

// android/build.gradle
맨아래
maven { url 'https://devrepo.kakao.com/nexus/content/groups/public/'}

// android/app/src/main/AndroidManifest.xml
<activity
   android:name="com.kakao.sdk.auth.AuthCodeHandlerActivity"
   android:exported="true">
  <intent-filter>
      <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />

      <!-- Redirect URI: "kakao{NATIVE_APP_KEY}://oauth“ -->
      <data android:host="oauth"
          android:scheme="kakao{카카오 네이티브 앱 key를 입력해주세요}" />
  </intent-filter>
</activity>

// android/app/src/main/res/values/strings.xml
<resources>
   <string name="kakao_app_key">your_app_key</string>
</resources>

그러고 위 코드대로 각 파일에 윗 내용 추가해주면 된다

카카오네이티브 앱 키는

카카오개발자 페이지 들어가서

앱키 - 네이티브 앱 키에서 확인 가능하다

그러고 플랫폼 들어가서 android, ios 등록해줘야하는데 

ios는 그냥 번들 ID에 패키지만 등록해주면되고

android는 패키지명 등록해주고 마켓 url은 그냥 일단 테스트용이니까 암거나 등록해준다

그리고 이제 키해시가 문제인데

보통 에뮬레이터해서 확인해볼거면 기본 디버그 키해시는 이거로 되어있다.

Xo8WBi6jzSxKDVR4drqm84yr9iU=

 

디바이스에서 확인해보고싶으면 이제 eas build를 진행해서 react native expo 사이트 들어가서 내 계정으로 로그인해보면

여기서 빌드된 안드앱 들어가면 

SHA-1라고 써있는게 있다 그거 본인꺼 복사해서

https://tomeko.net/online_tools/hex_to_base64.php

Hex to base64 converter

여기 변환사이트 들어가서 변환돌려주면 나오는값이 있다 그거 카카오개발자쪽 키해시에 등록해주면

이제 빌드해서 디바이스에서도 카카오로그인을 테스트해볼수있다.

 

자 이제 겨우 환경셋팅을 맞췄다..^^...

참고로 카카오로그인은 prebuild용이기때문에 npx expo run:ios or android로 실행해야 작동된다

expo go로 실행하면 오류뜬다 그래서 나중에 prebuild용 라이브러리 적용 분리하는것도...해야한다

  import { login, getProfile } from "@react-native-seoul/kakao-login";
  import styled from "styled-components";
    import { useState } from "react";
    
  //카카오
  const loginWithKakao = async (): Promise<void> => {
    try {
      const data = await login();
      setResult("성공 :" + JSON.stringify(data));
    } catch (err) {
      setResult("실패 :" + JSON.stringify(err));
    }
  };
  const kakaoProfile = async (): Promise<void> => {
    try {
      const data = await getProfile();
      setResult("성공 :" + JSON.stringify(data));
    } catch (err) {
      setResult("실패 :" + JSON.stringify(err));
    }
  };
  
  return(
    <Boxes>
        <KakaoBtn onPress={loginWithKakao}>
          <KakaoBtnText>카카오 로그인</KakaoBtnText>
        </KakaoBtn>
        <KakaoBtn onPress={kakaoProfile}>
          <KakaoBtnText>카카오 프로필</KakaoBtnText>
        </KakaoBtn>
  	</Boxes>
  )
  
  const Boxes = styled(View)`
  flex-direction: row;
  justify-content: space-between;
  margin: 10px 5%;
`;
const KakaoBtn = styled(Pressable)`
  background-color: #ffe812;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  width: 49%;
`;
const KakaoBtnText = styled(Text)`
  font-size: 20px;
  font-weight: bold;
  color: #000;
`;

구현한 카카오 로그인 버튼을 눌러보자

에뮬레이터는 카톡이 설치 안되있어서 웹버전 카카오로그인화면으로 넘어간다(디바이스에선 카카오로 바로 연동된다)

 

다음에는 네이버로그인...

 

 

근데 참... 웹할땐 안그랬는데 RN하고나서 자꾸 기도를 하게된다...

빌드되라...빌드되라...오류안뜨게해주세요..