RN ์์ ๋ก๊ทธ์ธ ๋ชจ๋ ํํค์ณ ๋ณด์ ! ๐
์์ํ๋ฉฐ
๊ทผ์ก๋งจ ์ด๋ผ๋ ๋ชจ๋ฐ์ผ ์ดํ๋ฆฌ์ผ์ด์ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉฐ ๊ฐ๋ฐ ์ธ์ด๋ก React Native ๋ฅผ ์ฑํํ๊ณ , ์์ ๋ก๊ทธ์ธ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๊ฒ ๋์๋ค.
[์ฌ์ ์ค๋น]
RN >= 0.60 (RN <= 0.59์ ๊ฒฝ์ฐ ํจํค์ง ์ค์น๋ฒ์ด ์์ดํ ์ ์์ต๋๋ค.
์นด์นด์ค
์ ํ๋ฆฌ์ผ์ด์ (ํ๋ก์ ํธ) ์ถ๊ฐ
- ๋จผ์ Kakao Developers ์ฌ์ดํธ์ ์ ์ํด ๋ด ์ ํ๋ฆฌ์ผ์ด์ ๋ฉ๋ด์์ ์ ํ๋ฆฌ์ผ์ด์ ์ถ๊ฐ๋ฅผ ํด์ค๋๋ค.
1-1. ์ฑ ์ด๋ฆ, ์ฌ์
์๋ช
์
๋ ฅ ์ ๊ฐ๋จํ ์ ํ๋ฆฌ์ผ์ด์
์ ์์ฑํ ์ ์์ต๋๋ค.
2. ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์นด์นด์ค ๋ก๊ทธ์ธ์ด ๋นํ์ฑํ ๋์ด ์๊ธฐ ๋๋ฌธ์ ์ ํ๋ฆฌ์ผ์ด์
> ์นด์นด์ค ๋ก๊ทธ์ธ ๋ฉ๋ด์์ ํ์ฑํ ์์ผ์ค๋๋ค.
3. ์นด์นด์ค ๋ก๊ทธ์ธ ํ์ฑํ ๋ถ๋ถ ํ๋จ์ ์๋ Redirect URI๋ฅผ ์ค์ ํด์ค๋๋ค. ๊ณต์ ๋ฌธ์์์๋ ์๋ ๋๊ฐ์ง์ ๊ท์น์ ์ง์ผ Redirect URI๋ฅผ ์ค์ ํด์ผ ํ๋ค๊ณ ๊ฐ์ด๋ํ๊ณ ์์ต๋๋ค.
- Redirect URI๋ HTTP/HTTPS ํ๋กํ ์ฝ ๋ฐ 80, 443 ํฌํธ๋ฅผ ํ์ฉํฉ๋๋ค.
- Redirect URI๋ HTTP/HTTPS ํ๋กํ ์ฝ์ ๊ตฌ๋ถํ๋ฏ๋ก ๊ฐ๊ฐ ๋ฑ๋กํด์ผ ํฉ๋๋ค.
4. ์ ํ๋ฆฌ์ผ์ด์
> ์นด์นด์ค ๋ก๊ทธ์ธ > ๋์ํญ๋ชฉ ๋ฉ๋ด์ ์ ์ํ์ฌ ์นด์นด์ค ๋ก๊ทธ์ธ ์ ์ ๊ณต ๋ฐ์ ๋ฐ์ดํฐ๋ค์ ์ค์ ํ ์ ์์ต๋๋ค. ์๋ ๊ฐ์ธ์ ๋ณด ํ
์ด๋ธ์์ ์ ๊ณต๋ฐ์ ํญ๋ชฉ์ ์ค์ ํ๊ณ ์ฐ์ธก ์๋จ์ ๋์ ํ๋ฉด ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋ฒํผ์ ํตํด ์นด์นด์ค ๋ก๊ทธ์ธ ์ ๋
ธ์ถ๋๋ ๋ชจ๋ฌ์ ํ์ธํด๋ณผ ์ ์์ต๋๋ค.
ํจํค์ง ์ค์น
์ ๋ React Native ์นด์นด์ค ๋ก๊ทธ์ธ ํจํค์ง ๋ฅผ ์ฌ์ฉํด ์ฐ๋์ ์งํํด๋ณด๋ ค๊ณ ํฉ๋๋ค.
yarn add @react-native-seoul/kakao-loginiOS์ ๊ฒฝ์ฐ ์๋ ๋ช ๋ น์ด๋ก pod ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์น๊ฐ ๋ณ๋๋ก ํ์ํฉ๋๋ค.
npx pod-installiOS ์ธํ
์ค์ ํ์ผ ๋ณ๊ฒฝ
๋จผ์ 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์ ์์ฑํ ์ ์๋ค.
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์ ๋์ผํ์ง ํ์ธํฉ๋๋ค.
Android
ํค ํด์(Key Hash) ๋ฑ๋ก
๋งํฌ ๋ฅผ ํตํด ํค ํด์๋ฑ๋ก์ ์งํํฉ๋๋ค. ๋๋ฒ๊ทธ, ๋ฆด๋ฆฌ์ฆ ํค ํด์ ๊ฐ์ ๋ฑ๋กํ๋ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ์ด์์ฒด์ ์ ๋ฐ๋ฅธ ๋ช ๋ น์ด๋ฅผ ํตํด ํค ํด์๋ฅผ ์์ฑ
- [๋ด ์ ํ๋ฆฌ์ผ์ด์ ] > [ํ๋ซํผ] > [Android ํ๋ซํผ ๋ฑ๋ก]
- [ํค ํด์] ํญ๋ชฉ์์ ์์ฑํ ํค ํด์๋ฅผ ์ ๋ ฅ ํ ์ ์ฅ
๋๋ฒ๊ทธ ํค ํด์
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64React 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 base64Manifest ํ์ผ ์์
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-installAndroid ์ค์
Firebase๋ฅผ ์ฌ์ฉํ์ง ์๋๋ค๋ฉด Configure a Google API Project ๊ฐ์ด๋๋ฅผ ๋ฐ๋ผ ์ค์ ์ ์งํํฉ๋๋ค.
- ์๋ ํ๋ก์ ํธ ๊ตฌ์ฑ ๋ฒํผ์ ํด๋ฆญํด ๋์ ํ๋ก์ ํธ๋ฅผ ์ ํํด์ค๋๋ค.
2. ํจํค์ง๋ช
๊ณผ ํค์คํ ์ด SHA-1 ๊ฐ์ ์
๋ ฅํด์ค๋๋ค.
ํจํค์ง๋ช
์ Androidmanifest.xml ํ์ผ์์ ์ฐธ์กฐํ๋ฉด ๋๊ณ , SHA-1 ๊ฐ์ ์ ๋ช
๋ น์ด๋ฅผ ํตํด ์ฐพ์๋ผ ์ ์๋ค.
3. build.gradle ํ์ผ ์์
ext {
...
googlePlayServicesAuthVersion = "19.2.0"
}
dependencies {
...
classpath 'com.google.gms:google-services:4.3.10'
}
repositories {
google()
}android/app/build.gradleํ์ผ ์์
๊ฐ์ฅ ์๋์ ์ถ๊ฐ
apply plugin: 'com.google.gms.google-services'iOS ์ค์
- ์ฑ ๋ฑ๋ก
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 ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ํ
- ํด๋ผ์ด์ธํธ ID ๋ง๋ค๊ธฐ
- Bundle ID๋ Android์์ ์ฌ์ฉํ๋ Bundle Identifier ๊ฐ์ ์ฌ์ฉํ๋ฉด ๋ฉ๋๋ค.
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-installiOS ์ค์
Info.plistํ์ผ ์์
<key>LSApplicationQueriesSchemes</key>
<array>
<string>naversearchapp</string>
<string>naversearchthirdlogin</string>
</array>์ ํ
ํจํค์ง ์ค์น
yarn add @invertase/react-native-apple-authentication
npx pod-install