페북 / 카톡 로그인

android/app/build.gradle

@@ -196,6 +196,8 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-kakao')
+    implementation project(':react-native-fbsdk')
     implementation project(':react-native-vector-icons')
     implementation project(':react-native-keep-awake')
     implementation fileTree(dir: "libs", include: ["*.jar"])
@@ -208,6 +210,8 @@ dependencies {
     } else {
       implementation jscFlavor
     }
+    implementation 'com.facebook.android:facebook-android-sdk:[4,5)'
+     
 }
 
 // Run this once to be able to run the application with BUCK

android/app/google-services.json

@@ -0,0 +1,40 @@
+{
+  "project_info": {
+    "project_number": "946601090559",
+    "firebase_url": "https://emptyapp-a1475.firebaseio.com",
+    "project_id": "emptyapp-a1475",
+    "storage_bucket": "emptyapp-a1475.appspot.com"
+  },
+  "client": [
+    {
+      "client_info": {
+        "mobilesdk_app_id": "1:946601090559:android:391fb5b7d46a4b50",
+        "android_client_info": {
+          "package_name": "org.seonsujoa.emptyapp"
+        }
+      },
+      "oauth_client": [
+        {
+          "client_id": "946601090559-561crc8g6ohvg8cg4lpa3m507fqatggg.apps.googleusercontent.com",
+          "client_type": 3
+        }
+      ],
+      "api_key": [
+        {
+          "current_key": "AIzaSyArBoreuYqa0gdeyMxLOV0KMme3qb5Oseg"
+        }
+      ],
+      "services": {
+        "appinvite_service": {
+          "other_platform_oauth_client": [
+            {
+              "client_id": "946601090559-561crc8g6ohvg8cg4lpa3m507fqatggg.apps.googleusercontent.com",
+              "client_type": 3
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "configuration_version": "1"
+}

android/app/src/main/AndroidManifest.xml

@@ -1,5 +1,5 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-  package="org.seonsujoa.emptyapp">
+  package="org.seonsujoa.emptyapp" >
 
     <uses-permission android:name="android.permission.INTERNET" />
 
@@ -8,8 +8,20 @@
       android:label="@string/app_name"
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
-      android:allowBackup="false"
+      android:allowBackup="true"
       android:theme="@style/AppTheme">
+
+       <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
+
+         <meta-data android:name="com.kakao.sdk.AppKey" android:value="0318752c8f3bb6903f850d59b7bb500b" />
+         <activity
+    android:name="com.kakao.auth.authorization.authcode.KakaoWebViewActivity"
+    android:launchMode="singleTop"
+    android:exported="false"
+    android:windowSoftInputMode="adjustResize">
+</activity>
+
+
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"

android/app/src/main/java/org/seonsujoa/emptyapp/MainApplication.java

@@ -7,6 +7,8 @@ import com.facebook.react.PackageList;
 import com.facebook.hermes.reactexecutor.HermesExecutorFactory;
 import com.facebook.react.bridge.JavaScriptExecutorFactory;
 import com.facebook.react.ReactApplication;
+import com.jeffgukang.ReactNativeKakao.ReactNativeKakaoReactPackage;
+import com.facebook.reactnative.androidsdk.FBSDKPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
 import com.corbt.keepawake.KCKeepAwakePackage;
 import com.facebook.react.ReactNativeHost;
@@ -28,6 +30,7 @@ public class MainApplication extends Application implements ReactApplication {
       @SuppressWarnings("UnnecessaryLocalVariable")
       List<ReactPackage> packages = new PackageList(this).getPackages();
       // Packages that cannot be autolinked yet can be added manually here, for example:
+      // packages.add(new FBSDKPackage());
       // packages.add(new MyReactNativePackage());
       return packages;
     }

android/app/src/main/res/values/strings.xml

@@ -1,3 +1,4 @@
 <resources>
     <string name="app_name">emptyApp</string>
+    <string name="facebook_app_id">644056506000345</string>
 </resources>

android/build.gradle

@@ -23,6 +23,7 @@ buildscript {
 allprojects {
     repositories {
         mavenLocal()
+        maven { url 'http://devrepo.kakao.com:8088/nexus/content/groups/public/' }
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
             url("$rootDir/../node_modules/react-native/android")

android/settings.gradle

@@ -1,4 +1,8 @@
 rootProject.name = 'emptyApp'
+include ':react-native-kakao'
+project(':react-native-kakao').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-kakao/android')
+include ':react-native-fbsdk'
+project(':react-native-fbsdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fbsdk/android')
 include ':react-native-vector-icons'
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 include ':react-native-keep-awake'

ios/Podfile

@@ -32,6 +32,8 @@ target 'emptyApp' do
 
   pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
 
+  pod 'react-native-fbsdk', :path => '../node_modules/react-native-fbsdk'
+
   target 'emptyAppTests' do
     inherit! :search_paths
     # Pods for testing

ios/emptyApp.xcodeproj/project.pbxproj

@@ -5,7 +5,6 @@
 	};
 	objectVersion = 46;
 	objects = {
-
 /* Begin PBXBuildFile section */
 		00E356F31AD99517003FC87E /* emptyAppTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* emptyAppTests.m */; };
 		11FA0C6A9866471DB2CDE574 /* FontAwesome5_Solid.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C72EE95CD67945429ECF8FFC /* FontAwesome5_Solid.ttf */; };
@@ -36,6 +35,7 @@
 		D5CE09C8B7754934BD21387C /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 155721587C9D4E05B71891B4 /* Ionicons.ttf */; };
 		E293DE94B147488787B44961 /* libPods-emptyApp-tvOSTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 7F605EB65251234E1FC00D9D /* libPods-emptyApp-tvOSTests.a */; };
 		FE1C8F27F181410FBB1D4E90 /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 379A11462E21408BB7BEDAF6 /* Octicons.ttf */; };
+		2329BE5CC4D9489AAC181CEE /* libReactNativeKakao.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 8EA5530579E545B4B747A260 /* libReactNativeKakao.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -99,6 +99,8 @@
 		F093F82CC38A4AFFB1AF0F03 /* Fontisto.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Fontisto.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Fontisto.ttf"; sourceTree = "<group>"; };
 		F53F944945A14A0DA580B519 /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = SimpleLineIcons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = "<group>"; };
 		FC870C5F5E744F5BB1EB4F2A /* Foundation.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Foundation.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Foundation.ttf"; sourceTree = "<group>"; };
+		DA193DD333F14FCB8F019EE6 /* ReactNativeKakao.xcodeproj */ = {isa = PBXFileReference; name = "ReactNativeKakao.xcodeproj"; path = "../node_modules/react-native-kakao/ios/ReactNativeKakao.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
+		8EA5530579E545B4B747A260 /* libReactNativeKakao.a */ = {isa = PBXFileReference; name = "libReactNativeKakao.a"; path = "libReactNativeKakao.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -115,6 +117,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				90F2E3F571BDC36D6EA06796 /* libPods-emptyApp.a in Frameworks */,
+				2329BE5CC4D9489AAC181CEE /* libReactNativeKakao.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -222,6 +225,7 @@
 		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
+				DA193DD333F14FCB8F019EE6 /* ReactNativeKakao.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -723,6 +727,14 @@
 				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/emptyApp.app/emptyApp";
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../node_modules/react-native-kakao/ios/ReactNativeKakao/**",
+				);
 			};
 			name = Debug;
 		};
@@ -743,6 +755,14 @@
 				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/emptyApp.app/emptyApp";
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../node_modules/react-native-kakao/ios/ReactNativeKakao/**",
+				);
 			};
 			name = Release;
 		};
@@ -763,6 +783,10 @@
 				PRODUCT_BUNDLE_IDENTIFIER = kr.co.plusonnet.empty;
 				PRODUCT_NAME = emptyApp;
 				VERSIONING_SYSTEM = "apple-generic";
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../node_modules/react-native-kakao/ios/ReactNativeKakao/**",
+				);
 			};
 			name = Debug;
 		};
@@ -782,6 +806,10 @@
 				PRODUCT_BUNDLE_IDENTIFIER = kr.co.plusonnet.empty;
 				PRODUCT_NAME = emptyApp;
 				VERSIONING_SYSTEM = "apple-generic";
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../node_modules/react-native-kakao/ios/ReactNativeKakao/**",
+				);
 			};
 			name = Release;
 		};
@@ -810,6 +838,14 @@
 				SDKROOT = appletvos;
 				TARGETED_DEVICE_FAMILY = 3;
 				TVOS_DEPLOYMENT_TARGET = 9.2;
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../node_modules/react-native-kakao/ios/ReactNativeKakao/**",
+				);
 			};
 			name = Debug;
 		};
@@ -838,6 +874,14 @@
 				SDKROOT = appletvos;
 				TARGETED_DEVICE_FAMILY = 3;
 				TVOS_DEPLOYMENT_TARGET = 9.2;
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../node_modules/react-native-kakao/ios/ReactNativeKakao/**",
+				);
 			};
 			name = Release;
 		};
@@ -865,6 +909,14 @@
 				SDKROOT = appletvos;
 				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/emptyApp-tvOS.app/emptyApp-tvOS";
 				TVOS_DEPLOYMENT_TARGET = 10.1;
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../node_modules/react-native-kakao/ios/ReactNativeKakao/**",
+				);
 			};
 			name = Debug;
 		};
@@ -892,6 +944,14 @@
 				SDKROOT = appletvos;
 				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/emptyApp-tvOS.app/emptyApp-tvOS";
 				TVOS_DEPLOYMENT_TARGET = 10.1;
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../node_modules/react-native-kakao/ios/ReactNativeKakao/**",
+				);
 			};
 			name = Release;
 		};

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "emptyapp",
+  "name": "emptyApp",
   "version": "0.0.1",
   "lockfileVersion": 1,
   "requires": true,
@@ -2399,6 +2399,14 @@
         "webidl-conversions": "^4.0.2"
       }
     },
+    "dooboolab-welcome": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/dooboolab-welcome/-/dooboolab-welcome-1.1.0.tgz",
+      "integrity": "sha512-K9TKEeefzDXZiUyLZG+bIr8cy9UoYIfFMseowp/o3czVl7TfkVm3gQpeB85w+TO8xeqzWHiIcEelZbBgt5WUwQ==",
+      "requires": {
+        "chalk": "^2.4.1"
+      }
+    },
     "ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -7065,6 +7073,11 @@
         }
       }
     },
+    "react-native-fbsdk": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/react-native-fbsdk/-/react-native-fbsdk-1.0.1.tgz",
+      "integrity": "sha512-5TNPOMb+Wq5Z7jmUHGF9f6WrmSl3LeKoZZcgTBUp6Qt/o7g1+VzbI3a9gCrGwJcvWZrdN8qlBhMNcwQ3y8ecyg=="
+    },
     "react-native-gesture-handler": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz",
@@ -7075,11 +7088,24 @@
         "prop-types": "^15.5.10"
       }
     },
+    "react-native-kakao": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/react-native-kakao/-/react-native-kakao-1.1.2.tgz",
+      "integrity": "sha512-HUVe+yQvz2mTT4x7XI8bWR6cRcb67llZjVpzMgl5gfnXtDPYN/PYZ41yrZ5ugF9C+4c6f8uD4K7gx8swT81MAQ=="
+    },
     "react-native-keep-awake": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/react-native-keep-awake/-/react-native-keep-awake-4.0.0.tgz",
       "integrity": "sha512-0Fotox+eLXQooeibVs3P60yASYUWjtRw9MZNmbuHt5UZQrgUrAKsE4jm7gTr4tPU1m1RkwGzcgUFpcOkh/ec7g=="
     },
+    "react-native-naver-login": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-native-naver-login/-/react-native-naver-login-1.3.0.tgz",
+      "integrity": "sha512-pW+6sFBQrt/pCkuCITgXXj1p04+qgxn7VrSVGxaD/A28g7QNPHsb09j3B/gnnGABzImktF/3wvqDk8BsNitjjQ==",
+      "requires": {
+        "dooboolab-welcome": "^1.0.5"
+      }
+    },
     "react-native-ratings": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-6.3.1.tgz",

package.json

@@ -14,8 +14,11 @@
     "react": "16.8.6",
     "react-native": "0.60.3",
     "react-native-elements": "^1.1.0",
+    "react-native-fbsdk": "^1.0.1",
     "react-native-gesture-handler": "^1.3.0",
+    "react-native-kakao": "^1.1.2",
     "react-native-keep-awake": "^4.0.0",
+    "react-native-naver-login": "^1.3.0",
     "react-native-reanimated": "^1.1.0",
     "react-native-vector-icons": "^6.6.0",
     "react-navigation": "^3.11.1",

src/navigation/SwitchNavigator.js

@@ -50,7 +50,7 @@ const SwitchNavigator = createStackNavigator(
     
   },
   {
-    initialRouteName: "Root",  
+    initialRouteName: "Login",  
 
     mode: 'modal',
     headerMode: 'none',

src/pages/_1_Login.js

@@ -1,5 +1,6 @@
 import React from 'react';
- 
+import { LoginButton, AccessToken } from 'react-native-fbsdk';
+import RNKakao from 'react-native-kakao';
 import C from 'rn-class'
 C.addColor("#03cf5d", "color-naver");
 
@@ -9,12 +10,50 @@ export default (props)=>{
     const authLogin = () => {
         props.navigation.navigate('AcceptTerms');
     }
+    kakaoLogin = async () => {
+        try {
+          const result = await RNKakao.login();
+          this.setState({
+            userInfo: JSON.stringify(result)
+          });
+        } catch (e) {
+          this.setState({
+            userInfo: `Error: ${e}`
+          });
+        }
+      }
+    
+      kakaoLogout = async () => {
+        try {
+          const result = await RNKakao.logout();
+          this.setState({
+            userInfo: JSON.stringify(result)
+          });
+        } catch (e) {
+          this.setState({
+            userInfo: `Error: ${e}`
+          });
+        }
+      }
+    
+      getUserInfo = async () => {
+        try {
+          const result = await RNKakao.userInfo();
+          this.setState({
+            userInfo: JSON.stringify(result)
+          });
+        } catch (e) {
+          this.setState({
+            userInfo: `Error: ${e}`
+          });
+        }
+      }
 
     return (
         <C.View cls="jc-sa ai-c flx1 bgc-color-white"> 
             <C.ImageBackground source={require("../res/speech_bubble.png")} 
                 cls="ai-c jc-c flx0.5 w70" 
-                resizeMode="contain" 
+                resizeMode="contain"  
                 >   
                 <C.Text cls="f5"> empty </C.Text> 
             </C.ImageBackground>
@@ -24,9 +63,34 @@ export default (props)=>{
                 </C.Text>
             </C.View>
             <C.View  cls="jc-sa flx0.3 w80%">
-                <C.EL.Button onPress={authLogin} btncls="bgc-color-facebook" title="Facebook"/>
+                {/* <C.EL.Button onPress={authLogin} btncls="bgc-color-facebook" title="Facebook" /> */}
+                <LoginButton
+                        onLoginFinished={
+                            (error, result) => {
+                            if (error) {
+                                console.log("login has error: " + result.error);
+                            } else if (result.isCancelled) {
+                                console.log("login is cancelled.");
+                            } else {
+                                AccessToken.getCurrentAccessToken().then(
+                                (data) => {
+                                    console.log(data.accessToken.toString())
+                                }
+                                )
+                            }
+                            }
+                        }
+                        onLogoutFinished={() => console.log("logout.")}/>
+
+
+
                 <C.EL.Button onPress={authLogin} btncls="bgc-color-google-plus" title="Google"/>
-                <C.EL.Button onPress={authLogin} btncls="bgc-color-kakao" tcls="color-kakaotext" title="Kakao"/>
+
+
+                <C.EL.Button onPress={authLogin} btncls="bgc-color-kakao" tcls="color-kakaotext" title="Kakao" onPress={kakaoLogin}/>
+
+
+
                 <C.EL.Button onPress={authLogin} btncls="bgc-color-naver" title="Naver"/> 
             </C.View>
         </C.View>