[RN] 리액트네이티브 카카오 소셜 로그인

OAuth 로그인 처리

소셜로그인을 통해서 로그인 기능을 구현할려고 하는데 어떤식으로 구현해야할지 고민이였습니다.

첫번째로 생각했던 방식은

1. 앱에서 카카오 로그인 버튼 클릭
2. 앱에서 kakao REST API문서에 있는 로그인 인가정보를 가져오는 https://kauth.kakao.com/oauth/authorize 를 사용해서 백엔드로 리다이렉트 uri를 설정해주고 백엔드에서 토큰 인증 처리를 진행한다.
3. 백엔드에서 인증정보를 가지고 앱으로 리다이렉트해준다.
   
   

위의 방식대로 진행하면 보안적으로 쿼리스트링으로 값이 유출되거나 프론트와 백엔드간의 역할 구분이 모호해진다고 느껴졋습니다.

그래서 인터넷들을 참조해가며 살펴본 결과, 

1. 앱에서 카카오 로그인 버튼 클릭
2. 카카오로부터 앱으로 인증 정보를 받기. (SDK 이용)
3. 인증 정보를 서버로 전달.
4. 서버에서 인증 정보를 처리하고 헤더나 결과로 반환.
   위의 방식대로 많이 사용된다고 한다.

서버에서 앱으로 리다이렉트를 받을려면 Scheme처리가 필요할거같지만 카카오 같은 서비스에서 redirect을 설정하는 부분에 scheme처리를 할수 없는걸로 알고있다. 그래서 아래 방식을 통해 카카오 SDK를 이용해서 처리하는방식으로 채택하엿습니다.
SDK를 적용하는 라이브러리가 이미 존재해서 이 라이브러리를 사용해서 구현할려고합니다.

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

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

 

위의 라이브러리 링크를 들어가서 설정을 해주면 쉽게 카카오 로그인을 구현할 수 있습니다. 

 

카카오 로그인 라이브러리 설치 및 설정

yarn add @react-native-seoul/kakao-login

 

IOS 설정하기

cd ios && pod install

리액트 네이티브 버전이 0.6이상이면 오토링킹이 되서 위의 명령어만 실행하면 된다고 합니다.

일단 카카오 디벨로퍼 사이트에서 앱 생성을 하고 네이티브 앱 키를 가져옵니다.

 

그 다음 https://developers.kakao.com/docs/latest/ko/ios/getting-started 을 참고해서 ios 설정을 해줍니다.

 

Custom iOS Target Properties에서 LSApplicationQueriesSchemes를 생성해주면 이름이 자동으로 Queried URL Schemes로 변환될것입니다.
그리고 하위에 kakaokompassauth, kakaolink, kakaoplus를 생성해줍니다.

그다음 커스텀 Scheme을 설정합니다.

아래에 URL Types를 클릭하고 새로 생성해줍니다.
그리고 URL Schemes 에 네이티브 앱 키(Native App Key)를 kakao${NATIVE_APP_KEY} 형식으로 등록합니다.

그리고 Info.plist에 아래와 같이 추가합니다.

 ...
 <key>CFBundleVersion</key>
 <string>1</string> 
 <key>KAKAO_APP_KEY</key>
 <string>{카카오 네이티브앱 아이디를 적어주세요}</string>
 ...

그다음 Swift Bridge Header도 추가해줍시다.
xcode에서 File -> new -> File 에서 swift 파일 하나를 생성하고 제목을 SwiftBridge로 설정하면 추가시에 SwiftBridgeHeader관련 팝업이 뜨는데 만들어줍니다.

그러면 ios 설정은 완료된겁니다.

* 만약 invalid android_key_hash or ios_bundle_id or web_site_url 관련 에러가 나오게 된다면 카카오 개발자 페이지에서 플랫폼 설정 ios bundle id를 설정했는지 확인해야합니다.

Android

안드로이드에서는 일단 카카오 개발자 페이지에서 안드로이드 플랫폼 설정을 아래와 같이 해줍니다.
기본 디버그 키스토어의 key hash 는 Xo8WBi6jzSxKDVR4drqm84yr9iU= 를 사용하시면 됩니다.

 

그리고 Android 폴더안에서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>

그리고 string.xml파일도 아래와 같이 수정해줍니다. (/android/app/src/main/res/values/strings.xml)

...
<string name="kakao_app_key">your_app_key</string>
...

이제 안드로이드도 완료되었습니다.


아래와 같은 리액트 코드로 안드로이드와 IOS에서 카카오 로그인 정보를 가져올 수 있습니다.

const signInWithKakao = useCallback(async (): Promise<void> => {
    const token: KakaoOAuthToken = await login();

    //TODO: 서버에 토큰 전달
    console.log(token.accessToken);
  }, []);

위의 함수를 로그인 버튼 이벤트에 붙여줘서 처리해주면 완료입니다.