[React Native] webview + rest api 카카오 소셜 로그인

• 카카오 개발 공식 문서에는 웹, 안드로이드, IOS 플랫폼 지원을 함
  안드로이드 Kotlin, IOS Swift 지원하지만, React Native는 지원하지 않음

• React Native로 카카오 로그인 구현 시

1. webview로 카카오 로그인 창 띄워 라이브러리 사용하여 프론트에서 바로 로그인 처리

2. webview로 카카오 로그인 창 띄워 rest api로 인가 코드를 받아 백과 통신하여 사용자 정보 받아오기

   1은 Access Token 바로 발급
   2는 Authorization Code로 Access Token을 발급하는 차이가 있다.

• Redirect URI를 통한 Authorization Code 발급 과정이 생략된다면,
  Authorization Server가 Access Token을 Client에 전달하기 위해 Redirect URI를 통해야 한다.
  Redirect URI를 통해 데이터를 전달할 방법은 URL 자체에 데이터를 실어 전달해야함...
  그러면 브라우저를 통해 데이터가 민감한 데이터인 Access Token이 곧바로 노출됨

• 2개 방안 중에
  Access Token이 항상 우리 어플리케이션과 OAuth 서비스의 백채널을 통해서만 전송되기 때문에
  공격자가 Access Token을 가로챌 수 없게 보안을 고려하여
  webview + rest api 사용 방식 채택

---

1. webview + 라이브러리 사용 방식

react-native-kakao-login 라이브러리 설치

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

2번 방식을 쓸 것이기 때문에 자세한 설명은 패쓰

---

2. webview + rest api 사용 방식

Authorization Code Grant 권한 부여 승인 코드 방식

1. webview 사용하여 rest api 방식으로 카카오 로그인 창 띄움
2. 사용자가 카카오 계정 정보 입력 후 url 형태로 인가 코드 받음
3. 인가 코드 백으로 전달
4. 백에서 인가 코드로 access token 발급
5. access token으로 사용자 정보 받아 프론트로 전달
6. 받은 사용자 정보 asyncstorage 저장 후 최초 로그인 여부 asyncstorage에 user_id 존재 여부 통해 판단 -> react query 사용

---

2-1. 카카오 어플리케이션 설정

2-1-1. kakao developers > 내 어플리케이션 > 애플리케이션 추가하기

카카오 개발 공식문서 로그인

2-1-2. 내 어플리케이션 > 제품 설정 > 카카오 로그인 > 활성화 설정 ON, Redirect URI 설정

2-1-3. 내 어플리케이션 > 앱 설정 > 플랫폼 > Android

• 키 해시
  cd android/app 디렉토리로 이동 후 아래 코드 입력하면 키 해시 나옴
  Ws2sdG34Ekfwef1WO= 이런 값을 키 해시 등록

keytool -exportcert -alias androiddebugkey -keystore deorepass android -keypass android | openssl sha1 -binary |

• 패키지명

  • android/app/src/main/AndroidManifest.xml에
    com.앱이름 package 속성으로 등록

  • android:allowBackup의 값을 true로 변경

    <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.dontspend"> // package
    
      <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>
      </application>
    </manifest>
    

  • 패키지 속성값은 android/app/build.gradle에서 확인

    android {
        ndkVersion rootProject.ext.ndkVersion
    
        compileSdkVersion rootProject.ext.compileSdkVersion
    
        namespace "com.appname"
        defaultConfig {
            applicationId "com.appname"
            minSdkVersion rootProject.ext.minSdkVersion
            targetSdkVersion rootProject.ext.targetSdkVersion
            versionCode 1
            versionName "1.0"
        }

---

2-2. 환경 변수 설정을 위한 파일 및 타입 정의 설정

• 루트 디렉토리에 .env 파일을 통해 환경 변수들을 정의

  KAKAO_LOGIN_REST_API_KEY=4cd45261b839373b375e0766220b3428
  
  KAKAO_LOGIN_REDIRECT_URI= http://localhost:8081/oauth/kakao/callback

• /types 폴더에 .env.d.tsx 파일을 통해 TypeScript에서 이 환경 변수들의 타입을 정의

  declare module "@env" {
    export const KAKAO_LOGIN_REST_API_KEY: string;
    export const KAKAO_LOGIN_REDIRECT_URI: string;
  }

---

2-3. 웹뷰 라이브러리 설치

npm 웹뷰 설치

npm i react-native-webview

---

2-4. 로그인 요청

---

2-5. 로그인 페이지 제공, ID / password 제공

---

2-6. Redirect URI로 리다이렉트, Authorization Code 발급

---

2-7. Authorization Code 백엔드로 전송, 사용자 정보 요청

---

2-8. 로그인 성공