9. 소셜로그인 기능 - 카카오 로그인 구현하기

https://devbksheen.tistory.com/entry/React-Native-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

React Native 카카오 로그인 설정 및 구현

 

* 카카오 로그인을 사용할 플랫폼 등록하기 - 안드로이드 패키지명 설정하기

defaultConfig {
        applicationId "com.learnreactnative"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }

android > app > build.gradle 의 applicationId 값이 패키지명이다. 프로젝트명 앞에 com 이라는 접두사가 붙는다.

* 카카오 로그인을 사용할 플랫폼 등록하기 - 안드로이드 키 해쉬(디버그 키) 생성하기

https://developers.kakao.com/docs/latest/ko/android/getting-started

Kakao Developers

https://growth-coder.tistory.com/171

keytool 명령어를 찾지 못 할 때 해결 방안 (keytool은 내부 또는 외부 명령, 실행할 수 있는 프로그램

https://developers.kakao.com/docs/latest/ko/android/getting-started

Kakao Developers

https://lucky516.tistory.com/302

React Native 카카오 로그인 + Firebase 연동

keytool -exportcert -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64

keytool 명령어를 찾지 못하는 경우 openssl 을 설치하고 환경변수 설정을 진행한후 위 명령어를 실행한다. 

openssl 패키지 경로 확인하기

환경변수에 openssl 경로 등록하기

keytool 패키지가 위치한 경로 확인하기

환경변수에 keytool 패키지가 위치한 경로 등록하기

터미널창에서 keytool 명령어 확인하기

openssl 설치후 터미널 창을 껐다 켜야 인식한다.

카카오 소셜로그인을 위한 안드로이드 키 해쉬 생성하기

내 애플리케이션 > 앱 설정 > 플랫폼 안드로이드 플랫폼 등록에서 키 해쉬 등록하기

 

* 카카오 로그인 라이브러리 설치하기

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

 

 

repositories {
        google()
        mavenCentral()
        maven { url 'https://devrepo.kakao.com/nexus/content/groups/public/'}
    }

build.gradle 에 맨 아래 maven 부분을 추가한다.

<application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="true"
      android:theme="@style/AppTheme">

android > app > src > main > AndroidManifest.xml 파일에서 allowBackup 을 true 로 변경한다. 

<uses-permission android:name="android.permission.INTERNET" />

카카오 API를 통해 카카오 서버와 통신하기 위해 앱에 인터넷 사용 권한을 설정해야 한다. AndroidManifest.xml에 다음과 같이 인터넷 사용 권한을 설정한다. 이 설정은 카카오 API를 통한 HTTP 요청이 올바르게 완료되도록 해 준다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="true"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>

      <!-- 추가 코드 -->
    <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" />
        <data android:host="oauth" android:scheme="kakao{네이티브 앱 키}" />
      </intent-filter>
    </activity>
    </application>
</manifest>

android > app > src > main > AndroidManifest.xml 파일에 주석으로 표시한 코드를 추가한다. 

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="true"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>

      <!-- 추가 코드 -->
    <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" />
        <data android:host="oauth" android:scheme="kakao386209dc3d1eac35d68bbbf053a95c80" />
      </intent-filter>
    </activity>
    </application>
</manifest>

실제로는 위와 같이 자신의 카카오 디벨로퍼 페이지에 있는 네이티브앱 키를 추가해준다.

<resources>
    <string name="app_name">learnreactnative</string>
    <string name="kakao_app_key">386209dc3d1eac35d68bbbf053a95c80</string>
</resources>

android > app > src > main > res > values > strings.xml 파일에도 네이티브앱 키를 추가해준다. 

앱이 안보이는 경우

앱이 보이지 않아서 마우스 휠로 내린 경우

앱이 보이지 않으면 마우스 스크롤 휠을 내리면 보인다.