Open in app

Sign in

Write

Sign in

React Native Kakao #1 —로그인, 유저 정보 관리

react-native-kakao 패키지를 이용해 카카오 로그인 및 유저 정보를 관리하는 방법

MJ Studio
12 min readApr 28, 2024
https://github.com/mym0404/react-native-kakao

React Native Kakao는 React Native에서 모든 Kakao SDK를 한 번에 손쉽게 사용할 수 있게 해주는 라이브러리입니다.

자세한 내용은 아래의 Github와 Documentation를 확인해보실 수 있습니다.

GitHub - mym0404/react-native-kakao: 🟡 Kakao SDK All In One Solution

🟡 Kakao SDK All In One Solution. Contribute to mym0404/react-native-kakao development by creating an account on…

github.com

Kakao SDK All-In-One Solution in React Native | React Native Kakao

Kakao SDK All In One Solution

rnkakao.dev

카카오 로그인이란?

카카오 로그인은 사용자 인증을 단순화하고 통일된 사용자 경험을 제공하는 카카오의 OAuth 2.0 기반의 인증 서비스입니다.

개발자는 카카오 개발자 사이트를 통해 앱을 등록하고, 앱 키를 받아 인증 요청을 보내게 됩니다. 사용자가 카카오 로그인을 선택하면, 카카오 로그인 페이지 혹은 카카오톡 앱으로 리디렉션됩니다.

사용자가 로그인하고 필요한 권한을 승인하면, 다시 개발자의 앱으로 액세스 토큰을 포함한 응답이 리디렉션됩니다. 이 액세스 토큰을 서버에서 저장하고 이후 요청에서 사용합니다. 이 토큰은 사용자의 식별, 권한 확인 등에 사용됩니다.

패키지 설정하기

우선 @react-native-kakao/core 패키지와 @react-native-kakao/user 패키키지를 설치합니다.

기본적인 카카오 앱 프로젝트의 설정 방법은 안드로이드라면 문서, iOS라면 문서, Expo라면 문서를 참고하여 패키지를 설정합니다.

Kakao SDK 문서를 참고하여 설정에 관한 더 자세한 정보를 확인할 수 있습니다.

SDK 초기화하기

index.js나 App.tsx등 앱이 실행되고 Kakao SDK를 어떤 것도 쓰기 전에 initializeKakaoSDK 함수를 호출해줍니다.

import { initializeKakaoSDK } from '@react-native-kakao/core';

initializeKakaoSDK('{{ native app key }}');

Redirect URI 설정하기 (Android)

문서를 참고합니다.

카카오 로그인 기능을 구현하기 위해서는 리다이렉션(Redirection)을 통해 인가 코드를 받아야 합니다.

이를 위해 AndroidManifest.xml에 액티비티(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" />

        <!-- Redirect URI: "kakao${NATIVE_APP_KEY}://oauth" -->
        <data android:host="oauth"
                android:scheme="kakao${NATIVE_APP_KEY}" />
    </intent-filter>
</activity>

URL 핸들링 설정하기 (iOS)

공식 문서

카카오톡으로 로그인 기능을 구현하기 위한 필수 설정입니다.

설정을 참고하여 앱에서 카카오톡을 실행시키기 위해 앱 실행 허용 목록(Allowlist)에 카카오톡을 등록하고, 서비스 앱으로 돌아올 때 쓰일 커스텀 URL 스킴을 설정합니다.

카카오톡으로 로그인은 서비스 앱에서 카카오톡으로 이동한 후, 사용자가 [동의하고 계속하기] 버튼 또는 로그인 취소 버튼을 누르면 다시 카카오톡에서 서비스 앱으로 이동하는 과정을 거칩니다.

카카오톡에서 서비스 앱으로 돌아왔을 때 카카오 로그인 처리를 정상적으로 완료하기 위해 AppDelegate.mm 파일에 다음과 같은 과정을 추가합니다.

#import "AppDelegate.h"

#import <React/RCTLinkingManager.h>
#import <RNCKakaoUser/RNCKakaoUserUtil.h>

@implementation AppDelegate

...

// Linking API
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {

  // 카카오톡에서 전달된 URL scheme면 이 앱에서 핸들링하는 로직입니다.
  if([RNCKakaoUserUtil isKakaoTalkLoginUrl:url]) {
    return [RNCKakaoUserUtil handleOpenUrl:url];
  }

  return [super application:application openURL:url options:options] || [RCTLinkingManager application:application openURL:url options:options];
}

...

@end

Expo 설정하기

app.json에 다음과 같이 추가합니다.

[
  "@react-native-kakao/core",
  {
    "nativeAppKey": "{{native app key}}",
    "android": {
      "authCodeHandlerActivity": true
    },
    "ios": {
      "handleKakaoOpenUrl": true
    }
  }
],

카카오 로그인 동작시키기

카카오 로그인하기를 이용해 회원가입, 로그인, 추가 동의내역 받기, 약관 동의시키기 등을 수행할 수 있습니다.

login() 함수를 호출해주면 바로 실행됩니다.

import { login } from '@react-native-kakao/user';

...

login()

모든 인자는 optional입니다.

  • serviceTerms: 서비스 약관 선택해 동의 받기는 카카오 로그인 동의 화면에 포함할 서비스 약관을 지정하는 추가 기능입니다. 사용자의 서비스 가입 시나리오에 따라 앱에 등록된 서비스 약관 중 특정 서비스 약관을 지정해 동의받고자 할 때 사용합니다. 카카오 로그인 요청 시 serviceTerms 파라미터로 동의 화면에 포함할 서비스 약관 태그 목록을 지정합니다. 요청 시 [필수 동의]로 설정된 서비스 약관을 하나 이상 포함해야 동의 화면을 출력하고 사용자에게 동의받을 수 있습니다.
  • prompts: 로그인 과정을 플래그를 전달해 제어할 수 있습니다.

Login, Create, Cert, UnifyDaum, SelectAccount(Android only)을 string[]으로 전달할 수 있습니다.

각각이 의미하는 자세한 설명은 공식 문서를 참고해주세요.

  • scopes: 사용자에게 추가 동의를 받는 경우에 해당됩니다. 동의를 받아야 하는 항목들을 전달합니다.

자세한 내용은 공식 문서 를 참고해주세요.

me()의 함수의 xxxNeedsAgreement 속성들을 확인해 추가적으로 동의를 받아야 하는 항목을 얻을 수 있습니다.

scopes가 전달된다면 항상 카카오 계정으로 로그인하기가 실행됩니다.

  • useKakaoAccountLogin: 항상 카카오톡이 아닌 카카오 계정으로 로그인을 시도합니다.

카카오 로그인 로그아웃하기​

logout()으로 로그아웃 할 수 있습니다.

카카오 로그인 계정 연동 해제하기​

unlink()로 계정 연동을 해제할 수 있습니다.

카카오 로그인 현재 로그인 상태인지 확인하기​

isLogined()로 확인할 수 있습니다. 반환값은 Promise<boolean> 입니다.

카카오 로그인 카카오톡이 사용 가능한지 확인하기​

isKakaoTalkLoginAvailable()로 확인할 수 있습니다. 반환값은 Promise<boolean> 입니다.

카카오 로그인 동의 내역 받기​

공식 문서

scopes(scopes?: string[])를 이용해 사용자 동의 항목을 받아올 수 있습니다.

응답 결과는 Promise<KakaoScopeInfo[]> 입니다.

export type KakaoScopeInfo = {
  id: string;
  agreed: boolean;
  displayName: string;
  revocable?: boolean;
  using: boolean;
  delegated?: boolean;
  type: string;
};​
scopes()

카카오 로그인 동의 내역 철회시키기​

공식 문서

revokeScopes(scopes: string[])를 이용해 사용자 동의 항목을 철회할 수 있습니다.

사용자가 동의한 항목에 대해 동의를 철회합니다. 동의 내역 확인하기 API를 통해 조회한 동의항목 정보 중 동의 철회 가능 여부(revocable) 값이 true인 동의항목만 철회 가능합니다. 동의 철회가 불가능한 동의항목을 대상으로 요청한 경우 에러 응답을 받습니다.

철회할 동의항목의 ID는 scopes 값으로 지정하며, [내 애플리케이션] > [카카오 로그인] > [동의항목]의 ID를 참고합니다.​

revokeScopes(['terms-of-services'])

카카오 로그인 서비스 약관 동의 내역 얻어오기​

공식 문서

serviceTerms()로 서비스 약관 동의 내역을 얻어올 수 있습니다.

응답은 다음과 같습니다.

Promise<KakaoServiceTerms[]>​
serviceTerms()

카카오 로그인 유저 정보 불러오기

me()로 불러올 수 있습니다.

응답은 다음과 같습니다.

Promise<KakaoUser>

타입은 다음과 같습니다.

export type KakaoUser = {
  id: number;
  email: string;
  name: string;
  nickname: string;
  profileImageUrl: string;
  thumbnailImageUrl: string;
  phoneNumber: string;
  ageRange: string;
  birthday: string;
  birthdayType: string;
  birthyear: string;
  gender: string;
  isEmailValid: boolean;
  isEmailVerified: boolean;
  isKorean: boolean;
  ageRangeNeedsAgreement?: boolean;
  birthdayNeedsAgreement?: boolean;
  birthyearNeedsAgreement?: boolean;
  emailNeedsAgreement?: boolean;
  genderNeedsAgreement?: boolean;
  isKoreanNeedsAgreement?: boolean;
  phoneNumberNeedsAgreement?: boolean;
  profileNeedsAgreement?: boolean;
  ciNeedsAgreement?: boolean;
  nameNeedsAgreement?: boolean;
  profileImageNeedsAgreement?: boolean;
  profileNicknameNeedsAgreement?: boolean;
  legalBirthDateNeedsAgreement?: boolean;
};​
me()

카카오 로그인 배송지 불러오기​

공식 문서

shippingAddresses()를 이용해 사용자의 배송지 정보를 불러올 수 있습니다.

응답은 다음과 같습니다.

Promise<KakaoShippingAddressResult>

타입들은 다음과 같이 정의되어있습니다.

export type KakaoShippingAddressResult = {
  userId?: number;
  needsAgreement?: boolean;
  shippingAddresses: KakaoShippingAddress[];
};

export type KakaoShippingAddress = {
  id: number;
  name?: string;
  isDefault: boolean;
  updatedAt?: number;
  type?: string;
  baseAddress?: string;
  detailAddress?: string;
  receiverName?: string;
  receiverPhoneNumber1?: string;
  receiverPhoneNumber2?: string;
  zoneNumber?: string;
  zipCode?: string;
}​
shippingAddresses()
카카오로그인
React Native
Kakao
Kakaotalk
Kakao Login

--

--

MJ Studio
MJ Studio

Written by MJ Studio

203 Followers
41 Following

a Developer, Student, Learner.

No responses yet

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams