์‹œ์ž‘ํ•˜๋ฉฐ

๊ทผ์œก๋งจ ์ด๋ผ๋Š” ๋ชจ๋ฐ”์ผ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉฐ ๊ฐœ๋ฐœ ์–ธ์–ด๋กœ React Native ๋ฅผ ์ฑ„ํƒํ–ˆ๊ณ , ์†Œ์…œ ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

[์‚ฌ์ „ ์ค€๋น„]

RN >= 0.60 (RN <= 0.59์˜ ๊ฒฝ์šฐ ํŒจํ‚ค์ง€ ์„ค์น˜๋ฒ•์ด ์ƒ์ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์นด์นด์˜ค

์• ํ”Œ๋ฆฌ์ผ€์ด์…˜(ํ”„๋กœ์ ํŠธ) ์ถ”๊ฐ€

  1. ๋จผ์ € Kakao Developers ์‚ฌ์ดํŠธ์— ์ ‘์†ํ•ด ๋‚ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฉ”๋‰ด์—์„œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ถ”๊ฐ€๋ฅผ ํ•ด์ค๋‹ˆ๋‹ค.

1-1. ์•ฑ ์ด๋ฆ„, ์‚ฌ์—…์ž๋ช… ์ž…๋ ฅ ์‹œ ๊ฐ„๋‹จํžˆ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 2. ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ์นด์นด์˜ค ๋กœ๊ทธ์ธ์ด ๋น„ํ™œ์„ฑํ™” ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ > ์นด์นด์˜ค ๋กœ๊ทธ์ธ ๋ฉ”๋‰ด์—์„œ ํ™œ์„ฑํ™” ์‹œ์ผœ์ค๋‹ˆ๋‹ค. img.png 3. ์นด์นด์˜ค ๋กœ๊ทธ์ธ ํ™œ์„ฑํ™” ๋ถ€๋ถ„ ํ•˜๋‹จ์— ์žˆ๋Š” Redirect URI๋ฅผ ์„ค์ •ํ•ด์ค๋‹ˆ๋‹ค. ๊ณต์‹ ๋ฌธ์„œ์—์„œ๋Š” ์•„๋ž˜ ๋‘๊ฐ€์ง€์˜ ๊ทœ์น™์„ ์ง€์ผœ Redirect URI๋ฅผ ์„ค์ •ํ•ด์•ผ ํ•œ๋‹ค๊ณ  ๊ฐ€์ด๋“œํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

  • Redirect URI๋Š” HTTP/HTTPS ํ”„๋กœํ† ์ฝœ ๋ฐ 80, 443 ํฌํŠธ๋ฅผ ํ—ˆ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • Redirect URI๋Š” HTTP/HTTPS ํ”„๋กœํ† ์ฝœ์„ ๊ตฌ๋ถ„ํ•˜๋ฏ€๋กœ ๊ฐ๊ฐ ๋“ฑ๋กํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

img_1.png 4. ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ > ์นด์นด์˜ค ๋กœ๊ทธ์ธ > ๋™์˜ํ•ญ๋ชฉ ๋ฉ”๋‰ด์— ์ ‘์†ํ•˜์—ฌ ์นด์นด์˜ค ๋กœ๊ทธ์ธ ์‹œ ์ œ๊ณต ๋ฐ›์„ ๋ฐ์ดํ„ฐ๋“ค์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜ ๊ฐœ์ธ์ •๋ณด ํ…Œ์ด๋ธ”์—์„œ ์ œ๊ณต๋ฐ›์„ ํ•ญ๋ชฉ์„ ์„ค์ •ํ•˜๊ณ  ์šฐ์ธก ์ƒ๋‹จ์˜ ๋™์˜ ํ™”๋ฉด ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋ฒ„ํŠผ์„ ํ†ตํ•ด ์นด์นด์˜ค ๋กœ๊ทธ์ธ ์‹œ ๋…ธ์ถœ๋˜๋Š” ๋ชจ๋‹ฌ์„ ํ™•์ธํ•ด๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. img_2.png

ํŒจํ‚ค์ง€ ์„ค์น˜

์ €๋Š” React Native ์นด์นด์˜ค ๋กœ๊ทธ์ธ ํŒจํ‚ค์ง€ ๋ฅผ ์‚ฌ์šฉํ•ด ์—ฐ๋™์„ ์ง„ํ–‰ํ•ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

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

iOS์˜ ๊ฒฝ์šฐ ์•„๋ž˜ ๋ช…๋ น์–ด๋กœ pod ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜๊ฐ€ ๋ณ„๋„๋กœ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

npx pod-install

iOS ์„ธํŒ…

์„ค์ • ํŒŒ์ผ ๋ณ€๊ฒฝ

๋จผ์ € ios ๋””๋ ‰ํ† ๋ฆฌ ํ•˜์œ„์˜ info.plist ์„ค์ •ํŒŒ์ผ์„ ์ˆ˜์ •ํ•ด์ค๋‹ˆ๋‹ค.

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>kakao{์•ฑ ์•„์ด๋””}</string>
        </array>
    </dict>
</array>

<key>KAKAO_APP_KEY</key>
<string>{์•ฑ ์•„์ด๋””}</string>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>kakaokompassauth</string>
    <string>storykompassauth</string>
    <string>kakaolink</string>
</array>

Swift Bridging Header ์ถ”๊ฐ€

ํŒจํ‚ค์ง€ ๊ณต์‹๋ฌธ์„œ README.MD์— ์†Œ๊ฐœ๋œ ๊ฒƒ์ฒ˜๋Ÿผ ์œ„ ๋งํฌ๋ฅผ ํ†ตํ•ด Swift Bridging Header๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ๋จผ์ € Xcode์—์„œ ํ”„๋กœ์ ํŠธ ๋””๋ ‰ํ† ๋ฆฌ/ios ๊ฒฝ๋กœ๋ฅผ ์—ด์–ด์ค๋‹ˆ๋‹ค. (๋กœ๋”ฉํ•˜๋Š”๋ฐ ํ•œ ์„ธ์›” ๊ฑธ๋ฆผ..)

Bridging Header ์„น์…˜์ด ์—†์„ ๊ฒฝ์šฐ, ํ”„๋กœ์ ํŠธ ๊ฒฝ๋กœ ์•„๋ž˜ Swift ํŒŒ์ผ ํ•˜๋‚˜ ์ƒ์„ฑํ•ด์ฃผ๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ๋ชจ๋‹ฌ์ด ๋œจ๋ฉด์„œ Bridging Header์„ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค. img_5.png

AppDelegate.m

๋‹ค์Œ์œผ๋ก  ์นด์นด์˜คํ†ก ์•ฑ์ด ๊น”๋ ค์žˆ์„ ๊ฒฝ์šฐ ์˜ฌ๋ฐ”๋ฅธ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค๊ธฐ ์œ„ํ•ด AppDelegate.m ํŒŒ์ผ์— ์•„๋ž˜ ๋‚ด์šฉ์„ ์ถ”๊ฐ€ํ•ด์ค๋‹ˆ๋‹ค.

// import
#import <RNKakaoLogins.h>

// openURL ํ•จ์ˆ˜ ์ถ”๊ฐ€
- (BOOL)application:(UIApplication *)app
     openURL:(NSURL *)url
     options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
 if([RNKakaoLogins isKakaoTalkLoginUrl:url]) {
    return [RNKakaoLogins handleOpenUrl: url];
 }

 return NO;
}

// optional
dispatch_async(dispatch_get_global_queue( DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^(void){
      dispatch_async(dispatch_get_main_queue(), ^(void){
        if ([RNKakaoLogins isKakaoTalkLoginUrl:url]) {
          [RNKakaoLogins handleOpenUrl: url];
        }
      });
  });

Bundle Identifier ํ™•์ธ

Xcode์—์„œ Project => Targets ์•„๋ž˜ ์„ ํƒ ํ›„ General ํƒญ์œผ๋กœ ์ด๋™ํ•˜์—ฌ Bundle Identifier๊ฐ€ ๋ณธ์ธ์˜ ์นด์นด์˜ค ์•ฑ์˜ ๋ฒˆ๋“คID์™€ ๋™์ผํ•œ์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค. img_4.png img_5.png img_6.png

Android

ํ‚ค ํ•ด์‹œ(Key Hash) ๋“ฑ๋ก

๋งํฌ ๋ฅผ ํ†ตํ•ด ํ‚ค ํ•ด์‹œ๋“ฑ๋ก์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค. ๋””๋ฒ„๊ทธ, ๋ฆด๋ฆฌ์ฆˆ ํ‚ค ํ•ด์‹œ ๊ฐ’์„ ๋“ฑ๋กํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  1. ์šด์˜์ฒด์ œ์— ๋”ฐ๋ฅธ ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด ํ‚ค ํ•ด์‹œ๋ฅผ ์ƒ์„ฑ
  2. [๋‚ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜] > [ํ”Œ๋žซํผ] > [Android ํ”Œ๋žซํผ ๋“ฑ๋ก]
  3. [ํ‚ค ํ•ด์‹œ] ํ•ญ๋ชฉ์—์„œ ์ƒ์„ฑํ•œ ํ‚ค ํ•ด์‹œ๋ฅผ ์ž…๋ ฅ ํ›„ ์ €์žฅ

img_3.png

๋””๋ฒ„๊ทธ ํ‚ค ํ•ด์‹œ

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

React Native 0.60.x ๋ถ€ํ„ฐ ๊ธฐ๋ณธ์ ์œผ๋กœ ๋””๋ฒ„๊น… ํ‚ค ํ•ด์‹œ๊ฐ€ ํฌํ•จ๋ฉ๋‹ˆ๋‹ค. {PROJECT_DIR}/android/app ๊ฒฝ๋กœ์— debug.keystore ํŒŒ์ผ์„ ์ฐพ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜ ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด ํ‚ค ํ•ด์‹œ ๊ฐ’์„ ์ถ”์ถœํ•˜๊ณ  ์นด์นด์˜ค ๊ฐœ๋ฐœ์ž ์‚ฌ์ดํŠธ์— ๋“ฑ๋กํ•ด์ค๋‹ˆ๋‹ค.

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

๋ฆด๋ฆฌ์ฆˆ ํ‚ค ํ•ด์‹œ

keytool -exportcert -alias <RELEASE_KEY_ALIAS> -keystore <RELEASE_KEY_PATH> | openssl sha1 -binary | openssl base64

Manifest ํŒŒ์ผ ์ˆ˜์ •

android/app/src/main/AndroidManifest.xml ํŒŒ์ผ์—์„œ allowBackup์„ true๋กœ ๋ณ€๊ฒฝํ•ด์ค๋‹ˆ๋‹ค.

...
android:allowBackup="true"
...

Redirect URI ์„ค์ •

android/app/src/main/AndroidManifest.xml

<activity android:name="com.kakao.sdk.auth.AuthCodeHandlerActivity">
  <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>

strings.xml ํŒŒ์ผ ์ˆ˜์ •

<string name="kakao_app_key">{์นด์นด์˜ค ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ key}</string>

kotlin์„ ํ•ด์„๊ฐ€๋Šฅํ•˜๋„๋ก ์ˆ˜์ •

android/build.gradle ํŒŒ์ผ์—์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ˆ˜์ •ํ•ฉ๋‹ˆ๋‹ค.

 buildscript {
   ext {
     ...
     kotlinVersion = '1.3.41'
   }
   dependencies {
     ...
     classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
   }
 }

๊ตฌ๊ธ€

์• ํ”Œ๋ฆฌ์ผ€์ด์…˜(ํ”„๋กœ์ ํŠธ) ์ถ”๊ฐ€

๊ตฌ๊ธ€๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

ํŒจํ‚ค์ง€ ์„ค์น˜

google-signin ํŒจํ‚ค์ง€๋ฅผ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค.

yarn add @react-native-google-signin/google-signin

# and

npx pod-install

Android ์„ค์ •

Firebase๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด Configure a Google API Project ๊ฐ€์ด๋“œ๋ฅผ ๋”ฐ๋ผ ์„ค์ •์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

  1. ์•„๋ž˜ ํ”„๋กœ์ ํŠธ ๊ตฌ์„ฑ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ด ๋Œ€์ƒ ํ”„๋กœ์ ํŠธ๋ฅผ ์„ ํƒํ•ด์ค๋‹ˆ๋‹ค.

img_6.png 2. ํŒจํ‚ค์ง€๋ช…๊ณผ ํ‚ค์Šคํ† ์–ด SHA-1 ๊ฐ’์„ ์ž…๋ ฅํ•ด์ค๋‹ˆ๋‹ค.
img_7.png
ํŒจํ‚ค์ง€๋ช…์€ Androidmanifest.xml ํŒŒ์ผ์—์„œ ์ฐธ์กฐํ•˜๋ฉด ๋˜๊ณ , SHA-1 ๊ฐ’์€ ์œ„ ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด ์ฐพ์•„๋‚ผ ์ˆ˜ ์žˆ๋‹ค. 3. build.gradle ํŒŒ์ผ ์ˆ˜์ •

ext {
    ...
    googlePlayServicesAuthVersion = "19.2.0"
}
dependencies {
    ...
    classpath 'com.google.gms:google-services:4.3.10'
}
repositories {
    google()
}
  1. android/app/build.gradle ํŒŒ์ผ ์ˆ˜์ •

๊ฐ€์žฅ ์•„๋ž˜์— ์ถ”๊ฐ€

apply plugin: 'com.google.gms.google-services'

iOS ์„ค์ •

  1. ์•ฑ ๋“ฑ๋ก

Xcode์—์„œ ํ™•์ธํ•œ ๋ฒˆ๋“ค ID๋ฅผ ์ž…๋ ฅํ•ด์ค๋‹ˆ๋‹ค. 2. ๊ตฌ์„ฑ ํŒŒ์ผ ๋‹ค์šด๋กœ๋“œ GoogleService-Info.plist ํŒŒ์ผ์„ ๋‹ค์šด๋ฐ›์•„ Xcode ํ”„๋กœ์ ํŠธ ๋ฃจํŠธ ๊ฒฝ๋กœ์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. 3. Firebase SDK ์ถ”๊ฐ€
3-1. Xcode ํ”„๋กœ์ ํŠธ๋ฅผ ์—ฐ ํ›„ File(ํŒŒ์ผ) > Swift Package > Add Package Dependency ์ด๋™
3-2. ๋ฉ”์‹œ์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋ฉด Filebase iOS SDK ์ €์žฅ์†Œ URL์„ ์ž…๋ ฅ
3-3. ์‚ฌ์šฉํ•  SDK ๋ฒ„์ „ ์„ ํƒ
3-4. ์‚ฌ์šฉํ•  Firebase ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ ํƒ img_12.png

  1. ํด๋ผ์ด์–ธํŠธ ID ๋งŒ๋“ค๊ธฐ

img_8.png

  • Bundle ID๋Š” Android์—์„œ ์‚ฌ์šฉํ–ˆ๋˜ Bundle Identifier ๊ฐ’์„ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

img_9.png 2. ์ƒ์„ฑ๋œ ํ˜น์€ ๊ธฐ์กด์— ์‚ฌ์šฉํ•˜๋˜ ํด๋ผ์ด์–ธํŠธ ID๋ฅผ URL Schemes์— ์ง€์ •
URL Schemes์— ํด๋ผ์ด์–ธํŠธ ID๋ฅผ ์—ญ์œผ๋กœ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค.

eg.
Client Id: 123123.blabla.com
URL Schemes: com.blabla.123123

๋„ค์ด๋ฒ„

ํŒจํ‚ค์ง€ ์„ค์น˜

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

npx pod-install

iOS ์„ค์ •

  1. Info.plist ํŒŒ์ผ ์ˆ˜์ •
<key>LSApplicationQueriesSchemes</key>
<array>
 <string>naversearchapp</string>
 <string>naversearchthirdlogin</string>
</array>

์• ํ”Œ

ํŒจํ‚ค์ง€ ์„ค์น˜

yarn add @invertase/react-native-apple-authentication

npx pod-install

iOS ์„ค์ •