[React Native] 리액트 네이티브에서 네이버 로그인 구현하기 (@react-native-seoul/naver-login)

리액트 네이티브 (안드로이드, ios)에서 네이버 로그인을 하는 방법을 정리하고자 한다.

우선 네이버 개발자센터에서 어플리케이션을 등록해야 한다.

 

Application으로 이동하여 애플리케이션 등록을 선택한다.

 

앱 이름을 입력하고, 사용 API에서 네이버 로그인을 선택한다.

 

 

제공 정보를 선택할 수 있지만 필요하지 않으니 생략한다.

아래 로그인 오픈 API 서비스 환경에서 안드로이드, iOS를 선택한다.

 

안드로이드

다운로드 URL은 아직 배포 전이므로 https://localhost 등으로 입력한다.

네이버 로그인은 타 소셜 로그인과 다르게 배포가 완료되어야 완벽하게 작동한다는 점을 참고한다.

 

우선 패키지명은 일반적인 경우 android/app/src/main/AndroidManifest.xml을 보면 알 수도 있지만, 없는 경우도 있으니 MainActivity.kt를 확인하자.

 

android/app/src/main/java/com/myProject/MainActivity.kt

 

 

 

맨 위에 패키지명이 있다.

 

 

 

iOS

마찬가지로 다운로드 URL은 아직 배포 전이므로 https://localhost 등으로 입력한다.

네이버 로그인은 타 소셜 로그인과 다르게 배포가 완료되어야 완벽하게 작동한다는 점을 참고한다.

 

 

URL Schme은 내가 설정하는 문자열로, 일반적으로 naverlogin.@@ 와 같은 방법을 사용한다.

타 앱과 URL Scheme이 같을 경우, 로그인 후 우리의 앱이 아닌 타 앱으로 리디렉션이 일어날 가능성이 있으므로 가능한 unique하게 입력하도록 하자.

 

iOS의 경우 네이버 앱이 있는 경우와 없는 경우를 코드로 지정해주어야 한다.

우선 myProject/ios/myProject/Info.plist에 2가지를 추가해 주자.

 

CFBundleURLSchemes라는 키에 array 안의 string으로 아까 애플리케이션을 등록할 때 입력했던 URL Scheme (naverlogin.@@)을 입력한다.

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>naverlogin.@@</string>
        </array>
    </dict>
</array>

 

LSApplicationQueriesSchemes라는 키에 array 안의 string으로 다음 값들을 입력한다.

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>naversearchapp</string>
    <string>naversearchthirdlogin</string>
</array>

 

 

이번엔 myProject/ios/myProject/AppDelegate.mm에서 코드를 추가해 준다.

import하는 코드를 맨 위에 추가하고,

#import <RNKakaoLogins.h>
#import <NaverThirdPartyLogin/NaverThirdPartyLoginConnection.h>

 

@implementation AppDelegate 밑에 다음 코드를 추가한다.

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  if ([url.scheme isEqualToString:@"naverlogin.어쩌고"]) {
    return [[NaverThirdPartyLoginConnection getSharedInstance] application:app openURL:url options:options];
  }
  return NO;
}

url의 scheme이 우리가 지정했던 URL Scheme (naverlogin.@@)과 같은지 확인하는 과정이다.

 

 

공통

애플리케이션을 등록하면 개요 > 애플리케이션 정보에서 Client ID, Client Secret을 확인할 수 있다.

.env에 해당 값들을 입력한다.

 

설정은 끝났다. 코드로 돌아가자.

---

 

0. 콘솔에서 모듈을 설치해 준다.

npm i @react-native-seoul/naver-login
cd ios
pod install

 

1. import한다.

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

 

2. response 객체를 생성한다.

const [success, setSuccessResponse] =
    useState<NaverLoginResponse['successResponse']>();
const [failure, setFailureResponse] =
    useState<NaverLoginResponse['failureResponse']>();

 

3. 네이버 로그인은 SDK를 initialize하는 과정이 필요하다.

const initANDROID = {
  consumerKey: Config.NAVER_CLIENT_ID ? Config.NAVER_CLIENT_ID : '',
  consumerSecret: Config.NAVER_CLIENT_SECRET
    ? Config.NAVER_CLIENT_SECRET
    : '',
  appName: '앱 이름',
};
const initIOS = {
  consumerKey: Config.NAVER_CLIENT_ID ? Config.NAVER_CLIENT_ID : '',
  consumerSecret: Config.NAVER_CLIENT_SECRET
    ? Config.NAVER_CLIENT_SECRET
    : '',
  appName: '앱 이름',
  serviceUrlSchemeIOS: 'naverlogin.@@',
};
NaverLogin.initialize(Platform.OS === 'android' ? initANDROID : initIOS);

 

URL Scheme와 앱 이름을 잘 입력해서 SDK를 초기화해준다.

 

4. Login하여 Token을 받아온다.

const {failureResponse, successResponse} = await NaverLogin.login();
setSuccessResponse(successResponse);
setFailureResponse(failureResponse);
console.log(successResponse ? 'success' : 'failure');
console.log('successResponse:', successResponse);

 

successResponse에는 accessToken, refreshToken 등이 온다.

 

5. accessToken을 백엔드에 전송한다.

백엔드에서는 내가 보낸 accessToken을 네이버 서버에 한번 더 검증하고 다른 정보들을 받아올 것이다.