sanguk.dev
작성완료
React Native SNS 로그인

React Native SNS 로그인

React Native에서 카카오, 네이버, 페이스북, 애플 로그인을 구현하는 방법을 설명하며, 각 로그인 방법에 필요한 설치 및 설정 과정을 코드 예제와 함께 제공한다. 카카오 로그인은 키 해시와 Android/iOS 설정을 포함하고, 네이버 로그인은 클라이언트 ID와 시크릿을 요구하며, 페이스북 로그인은 앱 ID와 클라이언트 토큰을 설정해야 한다. 애플 로그인은 Apple 개발자 사이트에서 키를 생성하고 XCode에서 설정해야 한다.

React Native@react-native-seoul/kakao-login@react-native-seoul/naver-loginreact-native-fbsdk-next@invertase/react-native-apple-authentication

@react-native-seoul/kakao-login

카카오 로그인 시 필요(키 해시는 Xo8WBi6jzSxKDVR4drqm84yr9iU= 를 사용하면 됨)

Install

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

Android

xml

<!-- <activity /> android:name=".MainActivity" 내부 -->
<intent-filter>
  <action android:name="androiid.intent.action.VIEW" />
  <category android:name="android.intent.category.BROWSABLE" />
  <category android:name="android.intent.category.DEFAULT" />
  <data android:scheme="<!-- project -->" android:host="main" />
</intent-filter>

<!-- <application /> 내부 -->
<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" />
    <data android:host="oauth" android:scheme="kakao<!-- KAKAO_APP_KEY -->" />
  </intent-filter>
</activity>

<!-- android/app/src/main/res/values/strings.xml -->
<resources>
	<string name="kakao_app_key"><!-- KAKAO_APP_KEY --></string>
</resources>

IOS

objective-c
#import <RNKakaoLogins.h>

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

  // kakao
  if([RNKakaoLogins isKakaoTalkLoginUrl:url]) {
    return [RNKakaoLogins handleOpenUrl: url];
  }

  return YES;
}
xml
<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLName</key>
		<string>kakao</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>kakao<!-- KAKAO_APP_KEY --></string>
		</array>
	</dict>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLName</key>
		<string>naver</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string><!-- project --></string>
		</array>
	</dict>
</array>
<key>KAKAO_APP_KEY</key>
<string><!-- KAKAO_APP_KEY --></string>
<key>LSApplicationQueriesSchemes</key>
<array>
	<string>kakaokompassauth</string>
	<string>storykompassauth</string>
	<string>kakaolink</string>
	<string>naversearchapp</string>
	<string>naversearchthirdlogin</string>
</array>

Use

typescript
import { getProfile as getKakaoProfile, login } from '@react-native-seoul/kakao-login';

const kakaoLogin = (): void => {
	login().then(() => {
		getKakaoProfile().then((value: any): void | PromiseLike<void> => {
      const id: string = value?.id ?? '';
      const name: string = (value?.nickname as string) ?? '';
    });
	});
}

@react-native-seoul/naver-login

네이버 로그인 시 필요

Install

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

Android

groovy
// android/settings.gradle
include ':react-native-seoul-naver-login'
project(':react-native-seoul-naver-login').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-seoul/naver-login/android')

// android/app/src/main/java/com/<project>/MainActivity.javaimport android.os.Bundle;
import com.dooboolab.naverlogin.RNNaverLoginModule;

public class MainActivity extends ReactActivity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	  RNNaverLoginModule.initialize(this);
	}
	...
}

// android/app/src/main/java/com/<project>/MainApplication.javaimport com.dooboolab.naverlogin.RNNaverLoginPackage;

IOS

xml
<!-- ios/<project>/Info.plist --><key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLName</key>
		<string>kakao</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>kakao<!-- KAKAO_APP_KEY --></string>
		</array>
	</dict>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLName</key>
		<string>naver</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string><!-- project --></string>
		</array>
	</dict>
</array>
<key>KAKAO_APP_KEY</key>
<string><!-- KAKAO_APP_KEY --></string>
<key>LSApplicationQueriesSchemes</key>
<array>
	<string>kakaokompassauth</string>
	<string>storykompassauth</string>
	<string>kakaolink</string>
	<string>naversearchapp</string>
	<string>naversearchthirdlogin</string>
</array>
objective-c
// ios/<project>/AppDelegate.mm#import <NaverThirdPartyLogin/NaverThirdPartyLoginConnection.h>

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

// naverif ([url.scheme isEqualToString:@"<project>"]) {
    return [[NaverThirdPartyLoginConnection getSharedInstance] application:application openURL:url options:options];
  }

  return YES;
}

Use

typescript
import NaverLogin, {GetProfileResponse} from '@react-native-seoul/naver-login';

const iosKeys = {
  consumerKey: 'NAVER_CLIENT_ID',
  consumerSecret: 'NAVER_CLIENT_SECRET',
  appName: 'NAVER_APP_NAME',
  serviceUrlScheme: 'URL_SCHEME',
  disableNaverAppAuth: true,
};
const androidKeys = {
  consumerKey: 'NAVER_CLIENT_ID',
  consumerSecret: 'NAVER_CLIENT_SECRET',
  appName: 'NAVER_APP_NAME',
};

const os = Platform.OS;
const naverLoginRequest = os === 'ios' ? iosKeys : androidKeys;

const naverLogin = (): void => {
	NaverLogin.login(naverLoginRequest).then(({failureResponse, successResponse}) => {
		const token = successResponse?.accessToken;
    if (failureResponse || !token) {
      failureResponse && console.log(failureResponse);
      return;
    }

		NaverLogin.getProfile(token).then(({response}) => {
	    const id: string = response?.id ?? '';
	    const name: string = response?.name ?? '';
    });
  });
}

react-native-fbsdk-next

페이스북 로그인 시 필요

Install

shell
yarn add react-native-fbsdk-next

Android

xml
<!-- android/app/src/main/AndroidManifest.xml --><!-- <application /> 내부 --><meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
<meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>
<provider android:authorities="com.facebook.app.FacebookContentProvider<!-- FACEBOOK_APP_ID -->"
          android:name="com.facebook.FacebookContentProvider"
          android:exported="true" />
<activity android:name="com.facebook.FacebookActivity"
  android:configChanges=
          "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
  android:label="@string/app_name" />
<activity
    android:name="com.facebook.CustomTabActivity"
    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" />
        <data android:scheme="@string/fb_login_protocol_scheme" />
    </intent-filter>
</activity>

<!-- android/app/src/main/res/values/strings.xml --><string name="fb_login_protocol_scheme">facebook</string>
<string name="facebook_app_id">FACEBOOK_APP_ID</string>
<string name="facebook_client_token">FACEBOOK_CLIENT_TOKEN</string>
groovy
// android/build.gradle
buildscript {
	repositories {
    mavenCentral()
  }
}

// android/app/build.gradle
dependencies {
  implementation 'com.facebook.android:facebook-login:latest.release'
}

IOS

xml
<!-- ios/<project>/Info.plist --><key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLName</key>
		<string>kakao</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>kakao<!-- KAKAO_APP_KEY --></string>
		</array>
	</dict>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLName</key>
		<string>naver</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string><!-- project --></string>
		</array>
	</dict>
	<dict>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>fb<!-- FACEBOOK 앱 ID --></string>
		</array>
	</dict>
</array>
<key>FacebookAppID</key>
<string><!-- FACEBOOK 앱 ID --></string>
<key>FacebookClientToken</key>
<string><!-- FACEBOOK 앱 시크릿 코드 --></string>
<key>FacebookDisplayName</key>
<string><!-- FACEBOOK 표시 이름 --></string>
objective-c
// ios/<project>/AppDelegate.m#import <FBSDKCoreKit/FBSDKCoreKit-swift.h>#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...

  [[FBSDKApplicationDelegate sharedInstance] application:application didFinishLaunchingWithOptions:launchOptions];// herereturn [super application:application didFinishLaunchingWithOptions:launchOptions];
}

Use

xml

@invertase/react-native-apple-authentication

애플 로그인 사용 시 필요

Install

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

IOS

shell
# 1. 애플 개발자 사이트 접속
# https://idmsa.apple.com/IDMSWebAuth/signin?appIdKey=891bd3417a7776362562d2197f89480a8547b108fd934911bcbea0110d07f757&path=%2Faccount%2F&rv=1
# 2. 키(keys) 생성
# 3. Sign in with Apple 선택 후 Configure 버튼 클릭
# 4. Primary App ID 선택 후 저장
# 5. XCode에서 Targets 선택 -> Signing & Capabilities -> + 버튼 클릭 -> Sign in with Apple 추가

Use (Only IOS)

typescript
import appleAuth from '@invertase/react-native-apple-authentication';

const appleLogin = (): void => {
  appleAuth.performRequest({
    requestedOperation: 1,
    requestedScopes: [0, 1],
  }).then(response => {
    let id = response?.user ?? '';
  }).catch(() => {});
};