Skip to content

crossplatformkorea/react-native-kakao-login

Repository files navigation

@react-native-seoul/kakao-login

VERSION DOWNLOAD LICENSE CI publish-package

React Native ์นด์นด์˜ค ๋กœ๊ทธ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ž…๋‹ˆ๋‹ค. @react-native-seoul/kakao-login < 3.0 ์ดํ•˜ ๋ฒ„์ „์„ ์“ฐ์‹œ๋Š” ๋ถ„๋“ค์€ DEPRECATED README๋ฅผ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”.

์„ธ๋ถ€ ์˜ˆ์ œ๋Š” KakaoLoginExample ํด๋” ์•ˆ์˜ ์˜ˆ์ œ ํ”„๋กœ์ ํŠธ๋ฅผ ํ™•์ธํ•ด์ฃผ์„ธ์š”. ํ•ด๋‹น ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” flow์™€ typescript๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

Changelogs

Changelogs ๋งํฌ

Demo

์นด์นด์˜ค ๋กœ๊ทธ์ธ Example Project ๋ฐ๋ชจ ํ™”๋ฉด

์œ„ ํ”„๋กœ์ ํŠธ๋Š” KakaoLoginExample ํด๋”์—์„œ ํ™•์ธ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

Tutorial

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋”์šฑ ํŽธ๋ฆฌํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ Youtube ์˜์ƒ์„ ์ œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.

Getting started

ํ•ด๋‹น ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” 3.0.0 ์ดํ›„ ๋ถ€ํ„ฐ๋Š” react-native 0.61์ด์ƒ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ์นด์นด์˜ค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ง€์›์ด ์•„๋ž˜ ๋ฒ„์ „๋ถ€ํ„ฐ๋Š” ์ง€์›์ด ๋Š๊ธธ ์˜ˆ์ •์ด๋ฏ€๋กœ ์ฐธ๊ณ ํ•ด์ฃผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค. ๊ณผ๊ฑฐ์—๋Š” ์นด์นด์˜ค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ ˆ๊ฑฐ์‹œ iOS์™€ ์นด์นด์˜ค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ ˆ๊ฑฐ์‹œ Android ๋ฒ„์ „์„ ์“ฐ๊ณ  ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

Installation

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

React Native 0.60.X์ด์ƒ๋ถ€ํ„ฐ๋Š” Auto linking์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์„ค์น˜๋Š” ๋งค์šฐ ๊ฐ„ํŽธํ•ฉ๋‹ˆ๋‹ค.

iOS์˜ ๊ฒฝ์šฐ yarn add @react-native-seoul/kakao-login ์ดํ›„ npx pod-install ๋ช…๋ น์–ด๋กœ pod ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋งŒ ์ถ”๊ฐ€๋กœ ์„ค์น˜ํ•ด์ฃผ์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

Post Installation

์„ค์น˜๊ฐ€ ์ œ๋Œ€๋กœ ๋˜์ง€ ์•Š๋Š”๋‹ค๋ฉด example project์˜ ์„ค์ •์„ ์ฐธ๊ณ ํ•˜์„ธ์š” ๐Ÿ‘

iOS

  1. Pod์—์„œ iOS deployment target์ด 11.0 ์ด์ƒ์ด์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  2. ios ์นด์นด์˜ค sdk ์„ค์น˜ ํ›„์˜ ์„ค์ •๊ณผ ๊ด€๋ จํ•ด์„œ๋Š” ๊ณต์‹๋ฌธ์„œ - ์นด์นด์˜ค ๋กœ๊ทธ์ธ > ์„ค์ •ํ•˜๊ธฐ๋ฅผ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”. ํ•ด๋‹น ๊ฐ€์ด๋“œ๋ฅผ ํ†ตํ•ด ์นด์นด์˜ค ๊ฐœ๋ฐœ์ž ํŽ˜์ด์ง€์—์„œ ๋ณธ์ธ์˜ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ƒ์„ฑํ•ด์ฃผ์„ธ์š”.

  3. ๊ณต์‹๋ฌธ์„œ - ๊ฐœ๋ฐœ ํ”„๋กœ์ ํŠธ ์„ค์ • ์„ ์ฐธ๊ณ ํ•˜์—ฌ info.plist, URL Types ๋ฐ ์ปค์Šคํ…€ ์Šคํ‚ด ์ถ”๊ฐ€ ๋“ฑ ๊ธฐํƒ€ ํ•„์š”ํ•œ ์„ธํŒ…๋“ค์„ ํ”„๋กœ์ ํŠธ์— ์ถ”๊ฐ€ํ•ด์ค๋‹ˆ๋‹ค. ์•„๋ž˜์นด์นด์˜ค ๋„ค์ดํ‹ฐ๋ธŒ์•ฑ ์•„์ด๋””๋ฅผ ์ ์–ด์ฃผ์„ธ์š” ๋ฌธ๊ตฌ๋ฅผ ์ž˜ ํ™•์ธํ•˜์‹œ์—ฌ ๋ณธ์ธ์˜ Kakao App Key๋กœ ๋ณ€๊ฒฝํ•ด์ฃผ์„ธ์š”.

     <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>
  4. 3.0.0 ๋ฒ„์ „๋ถ€ํ„ฐ๋Š” swift ๋ฒ„์ „์˜ kakao sdk๋ฅผ ํ™œ์šฉํ•˜๋ฏ€๋กœ Swift Bridging Header๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 1

  5. AppDelegate.m ํŒŒ์ผ์— ํ•ด๋‹น ๋ถ€๋ถ„์„ ์ถ”๊ฐ€ํ•ด์ฃผ์„ธ์š”. ์ด๋Š” ์นด์นด์˜คํ†ก ์•ฑ์ด ๊น”๋ ค ์žˆ์„์‹œ ์˜ฌ๋ฐ”๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค๊ธฐ ์œ„ํ•จ์ž…๋‹ˆ๋‹ค #193.

  6. Project => Targets ์•„๋ž˜ ์•ฑ ์„ ํƒ => General ํƒญ์œผ๋กœ ์ด๋™ํ•ด์„œ Bundle Identifier๊ฐ€ ๋ณธ์ธ์˜ ์นด์นด์˜ค ์•ฑ๊ณผ ๋™์ผํ•œ์ง€ ํ™•์ธํ•ด์ฃผ์„ธ์š”.

  7. ์—ฌ๋Ÿฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ๋™์ผํ•œ ๋ฒ„์ „์˜ SDK๋ฅผ ์จ์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ Podfile์— ์•„๋ž˜์™€ ๊ฐ™์ด ์ถ”๊ฐ€ํ•˜์—ฌ SDK ๋ฒ„์ „์„ ๊ฐ•์ œ๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    # ์—†๋Š” ๊ฒฝ์šฐ์—๋Š” package.json์˜ sdkVersions.ios.kakao๋ฅผ ๋”ฐ๋ฆ…๋‹ˆ๋‹ค.
    $KakaoSDKVersion=YOUR_KAKAO_SDK_VERSION

Android

  1. ํ‚ค ํ•ด์‹œ ๋“ฑ๋ก์„ ์ง„ํ–‰ํ•ด์ฃผ์„ธ์š”. ์ž๋ฐ” ์ฝ”๋“œ๋กœ ๊ตฌํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์ œ์ผ ํ™•์‹คํ•ฉ๋‹ˆ๋‹ค.

    AUTHORIZATION_FAILED: invalid android_key_hash or ios_bundle_id or web_site_url
    

    React Native 0.60.x ๋ถ€ํ„ฐ ํ…œํ”Œ๋ฆฟ์— ๊ธฐ๋ณธ์ ์œผ๋กœ ๋””๋ฒ„๊ทธ ํ‚ค์Šคํ† ์–ด๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. (project/android/app์— ๋””๋ฒ„๊ทธ ํ‚ค์Šคํ† ์–ด๊ฐ€ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.)
    ๊ธฐ๋ณธ ๋””๋ฒ„๊ทธ ํ‚ค์Šคํ† ์–ด์˜ key hash ๋Š” Xo8WBi6jzSxKDVR4drqm84yr9iU= ๋ฅผ ์‚ฌ์šฉํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

    ํ…œํ”Œ๋ฆฟ์—์„œ ๊ธฐ๋ณธ ์ œ๊ณต๋˜๋Š”๊ฒƒ ์ด์™ธ์˜ ํ‚ค์Šคํ† ์–ด์—์„œ key hash ๋ฅผ ์ถ”์ถœํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์•„๋ž˜์˜ ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”

    ๊ธ€๋กœ๋ฒŒ debug keystore ์—์„œ key hash ์ถ”์ถœ

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64

ํŠน์ • ๊ฒฝ๋กœ์˜ keystore ์—์„œ key hash ์ถ”์ถœ

keytool -exportcert -alias {my-app-key-alias} -keystore {your-key-path}/{my-app-key}.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64
  1. Redirect URI ์„ค์ •

    • ์นด์นด์˜ค ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋ฆฌ๋‹ค์ด๋ ‰์…˜(Redirection)์„ ํ†ตํ•ด Request Code๋ฅผ ๋ฐ›์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๊ธฐ ์œ„ํ•ด์„œ๋Š” ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ AndroidManifest.xml์— ์ถ”๊ฐ€ํ•ด์ฃผ์„ธ์š”. ๊ทธ๋ฆฌ๊ณ  ์นด์นด์˜ค ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ key๋ฅผ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š” ํ…์ŠคํŠธ๋ฅผ ๋ณธ์ธ์˜ ์นด์นด์˜ค ๋„ค์ดํ‹ฐ๋ธŒ ํ‚ค๋กœ ๋ณ€๊ฒฝํ•ด์ฃผ์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. (Android 12(API 31) ์ด์ƒ์„ ํƒ€๊นƒ์œผ๋กœ ํ•˜๋Š” ์•ฑ์ธ ๊ฒฝ์šฐ, exported ์š”์†Œ๋ฅผ ๋ฐ˜๋“œ์‹œ "true"๋กœ ์„ ์–ธํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.)

      <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>
  2. app/src/main/res/values/strings.xml ์„ ์—ด์–ด ๋‹ค์Œ์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค

    <resources>
        <string name="app_name">KakaoLoginExample</string>
    +   <string name="kakao_app_key">your_app_key</string>
    </resources>
  3. ๊ณต์‹๋ฌธ์„œ-ํ† ํฐ๊ด€๋ฆฌ ์—์„œ ์ฐธ๊ณ ํ•  ์ˆ˜ ์žˆ๋“ฏ์ด Android ์นด์นด์˜ค SDK๋Š” ์•ก์„ธ์Šค ํ† ํฐ์„ ์ž๋™ ๊ฐฑ์‹ ํ•ด์ค๋‹ˆ๋‹ค.

  4. ์ปดํŒŒ์ผ ์—๋Ÿฌ๊ฐ€ ๋‚˜๋ฉด build.gradle์—์„œ android sdk compile version ๋“ฑ ๋นŒ๋“œ sdk ๋ฒ„์ „์„ ๋งž์ถฐ์ฃผ์„ธ์š”.

  5. (Optional) ์•ฑ ๋ฐฐํฌ ์‹œ, ์ฝ”๋“œ ์ถ•์†Œ, ๋‚œ๋…ํ™”, ์ตœ์ ํ™”๋ฅผ ํ•˜๋Š” ๊ฒฝ์šฐ, ์นด์นด์˜ค SDK๋ฅผ ์ œ์™ธํ•ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ProGuard ๊ทœ์น™ ํŒŒ์ผ์— ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ์„ธ์š”.

    -keep class com.kakao.sdk.**.model.* { <fields>; }
    -keep class * extends com.google.gson.TypeAdapter
    
  6. Gradle ๋ฐ ์นด์นด์˜ค SDK์˜ ๋ฒ„์ „์„ ๋ณ€๊ฒฝํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ, android/gradle.properties ์— ์žˆ๋Š” ํ•ญ๋ชฉ๋“ค์„ ํ™•์ธํ•˜๊ณ , Android gradle์˜ root project์˜ ext์— RNKakaoLogins_ ๋ฅผ ์ œ์™ธํ•œ ๋ฒ„์ „์„ ๋ช…์‹œํ•ด์ฃผ์„ธ์š”.

EXPO (EAS Build only, SDK 41 ์ด์ƒ)

  1. app.json ํŒŒ์ผ์„ ์•„๋ž˜์™€ ๊ฐ™์ด ์ˆ˜์ •ํ•ฉ๋‹ˆ๋‹ค.
{
  "expo": {
    ...
    "plugins": [
      ...,
      [
        "@react-native-seoul/kakao-login",
        {
          "kakaoAppKey": "", // ํ•„์ˆ˜
          "overrideKakaoSDKVersion": "2.9.0", // Optional, 
          "kotlinVersion": "1.5.10" // Android Only, Optional, Expo ๋‚ด๋ถ€ ํŒจํ‚ค์ง€๋“ค๊ณผ์˜ ์ถฉ๋Œ์ด ์žˆ์–ด ํ…Œ์ŠคํŠธ ๊ฒฐ๊ณผ 1.5.10์€ ๋ฌธ์ œ๊ฐ€ ์—†์—ˆ์Šต๋‹ˆ๋‹ค. ์ง€์ • ์•ˆํ•˜๋ฉด 1.5.10์œผ๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค.
        }
      ]
    ],
    ...
  }
} 

SDK49 ๋ฒ„์ „์€ ์•ˆ๋“œ๋กœ์ด๋“œ ๋นŒ๋“œ ๋ฌธ์ œ๋กœ "kotlinVersion"์„ 1.9.0์œผ๋กœ ์„ค์ •ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

  1. EAS Build ์ดํ›„ expo start --dev-client๋ฅผ ์ด์šฉํ•ฉ๋‹ˆ๋‹ค.

  2. (Optional) Android์—์„œ proguard rules ๋“ฑ์„ ์ ์šฉํ•˜์‹ค ๊ฒฝ์šฐ, Expo BuildProperties ๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”

Methods

Func Param Return Description
login Promise{KakaoOAuthToken} ๋กœ๊ทธ์ธ (์นด์นด์˜คํ†ก์— ์ ‘๊ทผํ•  ์ˆ˜ ์—†๋‹ค๋ฉด loginWithKakaoAccount ํ˜ธ์ถœ)
loginWithKakaoAccount Promise{KakaoOAuthToken} ์นด์นด์˜ค๊ณ„์ •์œผ๋กœ ๋กœ๊ทธ์ธ (๊ธฐ๋ณธ ์›น ๋ธŒ๋ผ์šฐ์ €(CustomTabs)์— ์žˆ๋Š” ์นด์นด์˜ค๊ณ„์ • cookie ๋กœ ์‚ฌ์šฉ์ž๋ฅผ ์ธ์ฆํ•˜๊ณ  OAuthToken ๋ฐœ๊ธ‰)
getProfile Promise{KakaoProfile} ํ”„๋กœํ•„ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
logout Promise{string} ๋กœ๊ทธ์•„์›ƒ
unlink Promise{string} ์—ฐ๊ฒฐ๋Š๊ธฐ
getAccessToken Promise{KakaoAccessTokenInfo} ์•ก์„ธ์Šค ํ† ํฐ ์กฐํšŒ

ํ”„๋กœํ•„ ๊ฐ€์ ธ์˜ค๊ธฐ - getProfile => KakaoProfile

iOS Android type Description
accessToken โœ“ โœ“ string ํ† ํฐ
refreshToken? โœ“ โœ“ string ๋ฆฌํ”„๋ ˆ์‰ฌ ํ† ํฐ
idToken? โœ“ โœ“ string OpenID Connect ํ™•์žฅ ๊ธฐ๋Šฅ์„ ํ†ตํ•ด ๋ฐœ๊ธ‰๋˜๋Š” ID ํ† ํฐ
accessTokenExpiresAt? โœ“ โœ“ Date ํ† ํฐ ๋งŒ๋ฃŒ ์‹œ๊ฐ„
refreshTokenExpiresAt? โœ“ โœ“ Date ๋ฆฌํ”„๋ ˆ์‰ฌ ํ† ํฐ ๋งŒ๋ฃŒ ์‹œ๊ฐ„, ๊ตฌ๋ฒ„์ „ SDK๋กœ ์ด๋ฏธ ๋กœ๊ทธ์ธ์ด ๋˜์–ด์žˆ์—ˆ๋‹ค๋ฉด null์ด ๋ฐ˜ํ™˜๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
scopes โœ“ โœ“ string[] ์‚ฌ์šฉ์ž๋กœ ๋ถ€ํ„ฐ ๋ฐ›์€ ๊ถŒํ•œ

๋ฐฐ์†ก์ง€ ๊ฐ€์ ธ์˜ค๊ธฐ - shippingAddresses => KakaoShippingAddresses

iOS Android type Description
userId โœ“ โœ“ string ์‚ฌ์šฉ์ž Id
needsAgreement โœ“ โœ“ boolean ๋ฐฐ์†ก์ง€ ์ œ๊ณต์— ๋Œ€ํ•œ ์‚ฌ์šฉ์ž์˜ ๋™์˜ ํ•„์š” ์—ฌ๋ถ€
shippingAddresses โœ“ โœ“ Array ์‚ฌ์šฉ์ž๊ฐ€ ์†Œ์œ ํ•œ ๋ฐฐ์†ก์ง€ ๋ชฉ๋ก
๋ฐฐ์†ก์ง€ ์ •๋ณด (KakaoShippingAddress)
iOS Android type Description
id โœ“ โœ“ string ๋ฐฐ์†ก์ง€ ์•„์ด๋””
name โœ“ โœ“ string ๋ฐฐ์†ก์ง€๋ช…
isDefault โœ“ โœ“ boolean ๊ธฐ๋ณธ ๋ฐฐ์†ก์ง€ ์—ฌ๋ถ€
updatedAt โœ“ โœ“ Date ๋งˆ์ง€๋ง‰ ๋ฐฐ์†ก์ง€์ •๋ณด ์ˆ˜์ •์‹œ๊ฐ
type โœ“ โœ“ string ๋ฐฐ์†ก์ง€ ํƒ€์ž…(Old, New)
baseAddress โœ“ โœ“ string ์ฃผ์†Œ ๊ฒ€์ƒ‰์„ ํ†ตํ•ด ์ž๋™์œผ๋กœ ์ž…๋ ฅ๋˜๋Š” ๊ธฐ๋ณธ ์ฃผ์†Œ
detailAddress โœ“ โœ“ string ๊ธฐ๋ณธ ์ฃผ์†Œ์— ์ถ”๊ฐ€ํ•˜๋Š” ์ƒ์„ธ ์ฃผ์†Œ
receiverName โœ“ โœ“ string ์ˆ˜๋ น์ธ ์ด๋ฆ„
receiverPhoneNumber1 โœ“ โœ“ string ์ˆ˜๋ น์ธ ์—ฐ๋ฝ์ฒ˜
receiverPhoneNumber2 โœ“ โœ“ string ์ˆ˜๋ น์ธ ์ถ”๊ฐ€ ์—ฐ๋ฝ์ฒ˜
zoneNumber โœ“ โœ“ string ๋„๋กœ๋ช… ์ฃผ์†Œ ์šฐํŽธ๋ฒˆํ˜ธ. ๋ฐฐ์†ก์ง€ ํƒ€์ž…์ด NEW(๋„๋กœ๋ช… ์ฃผ์†Œ)์ธ ๊ฒฝ์šฐ ๋ฐ˜๋“œ์‹œ ์กด์žฌํ•จ
zipCode โœ“ โœ“ string ์ง€๋ฒˆ ์ฃผ์†Œ ์šฐํŽธ๋ฒˆํ˜ธ. ๋ฐฐ์†ก์ง€ ํƒ€์ž…์ด OLD(์ง€๋ฒˆ ์ฃผ์†Œ)์—ฌ๋„ ๊ฐ’์ด ์—†์„ ์ˆ˜ ์žˆ์Œ

React-native-web

1.RestApiKey๋ž‘ redirectUrl์„ ํฌํ•จํ•œ ์•„๋ž˜ ๋งํฌ๋กœ href ๋งํฌ๋ฅผ ์—ด์–ด์„œ code๋ฅผ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค const kakaoUrl = https://kauth.kakao.com/oauth/authorize?client_id=${restApiKey}&redirect_uri=${redirectUrl}&response_type=code;

redirectUrl์ด http://localhost:3000 ์ผ๋•Œ ์•„๋ž˜์™€๊ฐ™์ด redirectUrl์— codeํŒŒ๋ผ๋ฏธํ„ฐ๊ฐ€ ๋ถ™์€ url์ด ๋“ค์–ด์™€์ง‘๋‹ˆ๋‹ค

http://localhost:3000/?code=Ss32OM1_yUybn5dtEQ-XT8EZfV24BKC_GIeIvFPz7_wHorYXtij9JFQcMuGtGdzxQc3Vlwopb1UAAAGCizvuCw code= ๋’ค์ชฝ๋ถ€๋ถ„์„ splitํ•ด์„œ ํ† ํฐ ๋ฐœ๊ธ‰์‹œ ํ•„์š”ํ•œ code๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค react-native-web์—์„œ๋Š” app๊ณผ ๋‹ค๋ฅด๊ฒŒ restApikey, redirecturl์„ code์™€ ๊ฐ™์ด ์ง์ ‘ ๋„ฃ์–ด์ค˜์•ผ ํ•ฉ๋‹ˆ๋‹ค

Methods (Web)

Func Param Return Description
login restApiKeyWeb, redirectUrlWeb, codeWeb Promise{KakaoOAuthWebToken} ๋กœ๊ทธ์ธ
loginWithKakaoAccount ์›น ์ง€์› x
getProfile tokenWeb Promise{KakaoProfile} ํ”„๋กœํ•„ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
shippingAddresses tokenWeb Promise{KakaoShippingAddresses} ๋ฐฐ์†ก์ง€ ์ •๋ณด ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
logout tokenWeb Promise{string} ๋กœ๊ทธ์•„์›ƒ
unlink tokenWeb Promise{string} ์—ฐ๊ฒฐ๋Š๊ธฐ
getAccessToken ์›น ์ง€์› x

Usage

Sample Code

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

  setResult(JSON.stringify(token));
};

const signOutWithKakao = async (): Promise<void> => {
  const message = await logout();

  setResult(message);
};

const getKakaoProfile = async (): Promise<void> => {
  const profile: KakaoProfile = await getProfile();

  setResult(JSON.stringify(profile));
};

const getKakaoShippingAddresses = async (): Promise<void> => {
  const addresses: KakaoShippingAddresses = await shippingAddresses();

  setResult(JSON.stringify(addresses));
};

const unlinkKakao = async (): Promise<void> => {
  const message = await unlink();

  setResult(message);
};

How to run example project

  1. clone ๋ฐ›์€ ๋ ˆํฌ์—์„œ KakaoLoginExample ํด๋”๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค

    cd KakaoLoginExample
  2. ํ•„์š”ํ•œ ๋ชจ๋“ˆ์„ ์„ค์น˜ ํ•ฉ๋‹ˆ๋‹ค(preinstall์ด ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค)

    yarn
  3. ํ”„๋กœ์ ํŠธ ์‹คํ–‰

  • KAKAO_APP_KEY๋“ฑ ํ•„์š”ํ•œ SDK ์—ฐ๋™ ์„ค์ •์€ ๊ธฐ๋ณธ์œผ๋กœ ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
    • ๋ณธ์ธ ์•ฑ์˜ ํ‚ค๋กœ ๋ณ€๊ฒฝํ•˜๊ณ  ํ…Œ์ŠคํŠธ ํ•˜์…”๋„ ๋ฌด๋ฐฉํ•ฉ๋‹ˆ๋‹ค. ๋‹จ PR์„ ๋‚ ๋ฆฌ์‹ค ๋•Œ๋Š” ์‚ญ์ œํ•˜๊ณ  ๋‚ ๋ ค์ฃผ์„ธ์š”.
  • yarn start
  • yarn ios or yarn android๋กœ ์•ฑ ์‹คํ–‰
    • iOS ์•ฑ์ด ์‹คํ–‰๋˜์ง€ ์•Š์„ ๋•Œ๋Š” XCode๋ฅผ ์—ด๊ณ  ํ…Œ์ŠคํŠธ ํ•ด์ฃผ์„ธ์š”. ์ด๋Š” RN 0.64.0์—์„œ ๋ฐœ์ƒ๋˜๊ณ  ์žˆ๋Š” ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค.
  • ios์˜ ๊ฒฝ์šฐ iosํด๋”์—์„œ pod install์„ ๋จผ์ € ์‹คํ–‰ํ•ด ์ฃผ์„ธ์š”. ํ”„๋กœ์ ํŠธ ํด๋”์—์„œ npx pod-install๋กœ ์ด์šฉํ•˜์…”๋„ ๋ฌด๋ฐฉํ•ฉ๋‹ˆ๋‹ค.